A shopper looking at a water bottle may also want a mug, a spare lid, or a cleaning brush. If those items live on other pages, many shoppers never see them. Showing a WooCommerce upsell on the product page puts the right extras next to the item, so shoppers can add them while they are already deciding.
By the end of this guide, you will have a rule that shows a chosen extra on matching product pages, a section heading and position that suit your theme, colors that match your store, and a quick check that each extra goes into the cart on its own.
What you need
- WordPress 6.5 or later, WooCommerce 8.2 or later, and PHP 8.1 or later.
- The Extra Products plugin with an active license. Without one, extras are hidden on product pages, while your settings and rules are kept.
- The extras you want to offer, published as simple products or fully specified variations.
- Optional: Dynamic Pricing or Dynamic Discounts, if you want extras to show quantity prices from your discount rules.
Step 1: Activate your license
Install and activate the plugin while WooCommerce is active. Then open UFP → Extra Products → License and activate the license key from your UFP account. Extra products appear on product pages while the site has an active license.
Step 2: Create a rule for your product pages
Back on UFP → Extra Products, open the Rules tab, and select Add rule. Give it a Rule name you will recognize, such as “Mug for bottles”, and check Enabled. New rules start switched off.
- Under Show on these product pages, select Add selector. Set Match to Individual products, keep Operator on In list, and choose the product that should show the suggestion in Value, for example the bottle.
- Under Extra products to display, search for the extra in Individual products, for example the mug.
Select Save rules. You can also match by Product category, Product tag, Product attribute, or Custom product taxonomy, or check All products for a catalog-wide rule. When a rule has several selector rows, every row must match. If your site uses a page cache, clear it so visitors see the new extras.
Step 3: Name the section and choose its position
Open the Display tab. Make sure Enable extra products is checked, then write a Section heading that tells shoppers what they will find. The default is “Complete your order”.
Choose a Default position: after the add to cart form, at the end of the product summary, before or after the product tabs, or Manual placement (block or shortcode). Set Maximum products to limit how many extras appear. To include WooCommerce cross-sells as well, check Use cross-sell products; it is off by default.
Step 4: Match the look to your store
On the Appearance tab, choose the details each row shows: Product images, Stock availability, Unit prices, and Discount badges. Under Colors, set Color source to Match the theme or Custom colors. With custom colors, you can set the Background, Text, Border, Button background, and Button text.
Adjust Corner radius (px), Image size (px), and Space between products (px) while you watch the Style preview. Then select Save settings.
Step 5: Check the product page
Visit the product page. Each extra has its own quantity control, a live price, and an Add to cart button. When the shopper changes the quantity, the row’s total updates. Adding the extra creates its own cart item and leaves the main product’s quantity alone. A short confirmation appears at the button once the item is in the cart.
Step 6: Pick extras for a single product (optional)
For a one-off pairing, edit the product and open Product data → Extra products. Add Individual products in the order you want them shown, or use Product lists to include simple products from a category, tag, or attribute. The same tab can override the global Extra products, Use cross-sell products, and Position settings for that product. Save the product when you are done.
On the product page, individual selections appear first, then matching rules in their saved order, then cross-sells. Duplicates show only once.
Good to know
- Variable parents cannot be rows. Choose a fully specified variation instead. Variations with an Any attribute cannot be quick-added, and product lists include simple products only.
- Extras are ordinary cart items. They are not tied to the main product, so shoppers can buy an extra on its own. Stock, quantity limits, taxes, coupons, and cart discounts work as usual.
- The cart has the final word on price. Complex discount rules can show a provisional price until the store confirms it.
- Per-product selections use the classic product editor. Clear any full-page cache after you save rules.
Frequently asked questions
Does it use the WooCommerce Upsells field?
No. The plugin shows the extras you choose in its own product tab and in its rules. It can also include products from Linked products → Cross-sells when you turn on Use cross-sell products, for the whole store or for one product. The Upsells field is not used.
Can it build “frequently bought together” suggestions automatically?
No. It does not work out pairings from your order history. You decide which extras appear, either on a single product or with rules by product, category, tag, attribute, or product taxonomy.
Will it work with my block theme?
Yes, with manual placement. Automatic positions use the classic WooCommerce product hooks. In Site Editor templates, add the Extra Products block, or a Shortcode block containing [ufp_extra_products].
Does it work with Dynamic Pricing and Dynamic Discounts?
Yes. Price previews use Dynamic Pricing when it is installed, then Dynamic Discounts, and otherwise standard WooCommerce prices. Shoppers see an extra’s quantity price before they add it, and the cart still confirms the final price.
