How to Add a Quantity Selector to Your One-Click Upsell Offer

CartFlows Pro lets you add a quantity selector to your One-Click Upsell and Downsell offers, so shoppers can choose how many of the offer product they want instead of always getting just one. This guide walks through setting the default quantity on your offer step and adding the Offer Product Quantity element to the offer page so shoppers can adjust it themselves.

How the Quantity Selector Works

When you set up an Upsell or Downsell offer, CartFlows lets you choose a starting quantity for the offer product right in the step settings. Adding the Offer Product Quantity element to the offer page then puts a quantity field in front of your shopper.

• If you only set the quantity in the step settings, that amount is added automatically when the shopper accepts the offer. They won’t see a way to change it themselves.
• If you add the Offer Product Quantity element to the offer page, a quantity stepper appears next to the product, pre-filled with the quantity you set (or 1 if left blank).
• The shopper can increase or decrease the quantity before accepting, and the amount they choose is what gets added to their order.

This gives shoppers control over exactly how many they want, right on the offer page, without needing to leave the flow.

How to Set Up the Quantity Selector

Step 1. From the WordPress admin, go to CartFlows → Funnels (or Store Checkout) and open the funnel that contains your Upsell or Downsell step.

Step 2. Click the settings (gear) icon on that step’s row to open its settings.

Step 3. In the Products tab, find the Quantity field next to the offer product you’ve selected.

Step 4. Set the default quantity you’d like the offer to start at. Leave this blank and it will default to 1.

Step 5. Open the same step in your page builder. Gutenberg, Elementor, Bricks, and Beaver Builder are all supported, the element is called Offer Product Quantity, though where you find it in the panel and how you insert it looks a little different from one builder to the next. The steps below use Elementor as the example.

Step 6. Search for Offer Product Quantity in your builder’s widget/block/element panel, and add it onto your offer page layout, near the product details.

Step 7. Optional: use the widget’s style options (alignment, width, colors, border, typography) to match the field to the rest of your offer page. These same style options are available whichever builder you’re using.

Step 8. Save the page and the step settings.

The quantity selector is now active on that Upsell/Downsell offer.

Using a different page builder, or no page builder at all? If your offer page is built with something other than Gutenberg, Elementor, Bricks, or Beaver Builder, you can add the [cartflows_offer_product_quantity] shortcode anywhere on the page instead, most builders (and the classic editor) can drop in a shortcode directly. See our Upsell Downsell Shortcodes doc for the full list of available shortcodes and how to place them.

The Quantity Selector in Action

Once it’s set up, shoppers land on the offer page and see the quantity field next to the offer product, already filled in with your default quantity.

They can increase or decrease the number using the stepper, then accept the offer as usual. Whatever quantity is showing when they accept is the amount added to their order.

Frequently Asked Questions