Trying to create an upsell popup on your WooCommerce store so that you can boost your revenue and encourage shoppers to increase their order sizes?
In this post, you’ll learn how to use the Merchant plugin to set up your own customizable upsell popup that appears after a shopper adds an item to their cart.
Here’s an example of what it might look like, but you’ll have tons of options to customize the popup content according to your preferences.
Or, you can also hide all of the information that’s not part of your upsell offer. Here’s an example of what it looks like to just display the products that are related to the item the shopper just added to their cart:
With Merchant’s code-free settings, you can easily tweak the popup to make it your own:
- Show different types of upsell offers/products, including related products or products that the shopper has recently viewed.
- Choose from three preset layouts and tweak all of the colors and styling according to your preferences.
- Show/hide information as needed. For example, you can hide information about the product that the shopper added to their cart if you want to put the focus on your upsell offer.
- Choose which pages on your site should trigger the upsell popup, such as single product pages, archive pages, and your store homepage.
- Manually exclude individual products from triggering the popup.
- Hide the popup based on a user’s device – you can use toggles to easily show/hide the popup for desktop and/or mobile visitors.
A Quick Introduction to the Merchant Plugin
As I showed you in the introduction, Merchant makes it easy to create upsell popups that promote various types of products or deals, such as related products or recently viewed products.
The cool thing about the Merchant plugin is that it’s not just a WooCommerce upsell popup plugin. It’s actually a modular toolkit of 47+ features/enhancements to boost your store’s revenue and improve the shopping experience for your customers.
Some of these modules can help you implement other marketing strategies, such as various types of discounting strategies including “Buy X, Get Y” deals, bulk discounts, free gifts, product bundles, storewide sales, and more.
Beyond that, you also get access to lots of other modules to improve various parts of your store, including real-time product search, sale tags, wishlists, waitlists, Shopify-style side carts, and more.
Because Merchant uses a 100% modular approach, it will only load the specific modules that you choose to enable. This keeps your store lightweight and loading fast, while still giving you access to a bunch of tools.
You can just use Merchant for upsell popups. But after exploring all of the modules, you’ll probably find some other ways to improve your store that go beyond popup upsells.
How to Create a WooCommerce Upsell Popup With Merchant
Now, let’s get into the actual step-by-step guide on how to create your first upsell popup for WooCommerce using the Merchant plugin.
1. Purchase, Install, and Activate Merchant Pro
To begin, you’ll need to install the Merchant and Merchant Pro plugins on your site.
While Merchant does have a free version at WordPress.org, you’ll need Merchant Pro to access the Added to Cart Popup module, which is what you’ll use to create your upsell popups.
You can purchase Merchant Pro here – licenses start at just $79 and give you access to all 47+ modules, so you can probably also get value from the plugin in other ways and eliminate some other premium plugins that you’re currently paying for.
Once you’ve made your purchase, you’ll want to install and activate both the free version of Merchant at WordPress.org and Merchant Pro on your site.
I also recommend adding your license key for Merchant Pro, which will let you receive automatic update notifications (and give you the option to enable automatic updates). You can add it by going to Merchant → Settings and using the License Activation box.
2. Enable the Added To Cart Popup Module
Next, you need to enable the Added to Cart Popup module in Merchant, which is what you can use to create your upsell popups.
Again, to keep your store lightweight and avoid bloat, Merchant will only load the specific modules that you activate on your store, which is why you need to enable the module before you can set up your popup.
In your WordPress dashboard, go to Merchant → Dashboard. Then, select the Added to Cart Popup module, which should be listed under Convert More.
This should take you to the module’s settings area. To enable it, just click the blue Enable button at the top.
3. Configure Your Upsell Popup
Now, you can use the other settings in the Added to Cart Popup module to configure the content and style of your upsell popup.
Below, I’ll take you through all the important settings for your popup. I’ll divide things into four subcategories:
- Layout and size
- Upsell content
- Display conditions
- Colors and design
Layout and Size
To start, you can choose the layout and size of your upsell popup.
Merchant offers three different preset layouts to choose from. You’ll be able to include all of the same information in each layout – the only difference is the design.
If you choose a different layout, you should automatically see the live preview on the right update to reflect that choice.
Below that, you can choose the width of the popup, in pixels. This will affect the size of the popup for desktop visitors. If you decide to enable your upsell popup for mobile visitors (more on that later), the popup will automatically adjust to mobile visitors’ screen sizes.
Upsell Content
Once you’ve chosen the layout, you then get lots of options to configure the content of your upsell popup.
These settings can be roughly divided into four types of content:
- Popup message – you can customize the message that appears at the top of the popup. For example, you could use this as part of your upsell offer.
- Product added to cart – you can show information about the product that shoppers already added to their carts (the one that triggered the upsell popup). These settings are listed under Show product info. You can also use the toggles to disable some/all of this information if you want to put more focus on your upsell offer.
- Cart details – you can display information about the shopper’s cart, such as the cart total and shipping cost. You can also optionally add buttons to checkout or view the full cart. These settings are listed under Show cart details, as well as some extra toggles to display the various buttons.
- Upsell products – you can display products or offers to encourage shoppers to add additional items or otherwise increase the size of their orders. You can choose which products to upsell using the Show suggested products toggle and settings. More on this below.
For an upsell popup, the most important choice is probably the Show suggested products toggle at the bottom, which lets you control which products to upsell in the popup. Here’s an example of what I’m talking about, so that you understand exactly where these products will appear.
You have two different options for choosing which products to display:
- Related Products – it will display products that are related to the item shoppers just added to their carts. Merchant will automatically generate these based on the categories and tags associated with the product.
- Recently Viewed Products – it will display other products that the shopper recently viewed. The product list will be unique for each shopper, as it’s based on each shopper’s actual browsing history. This is powered by Merchant’s Recently Viewed Products module.
You’re free to choose whichever option best fits your needs.
Display Conditions (by Product, Page, or Shopper Browsing Device)
By default, your upsell popup will display when any shopper adds any item to their cart from any page on your site.
However, you might have situations where you want to make your upsell popup a little more restrictive. For example, you might want to exclude certain products from triggering the popup. Or, you might want to only show the popup if a shopper adds the item from the single product page (but not your store’s homepage).
To give you the ability to make these choices, Merchant gives you three types of display conditions.
First, you can use the Exclusion List toggle to exclude certain products from triggering the popup. If you enable this toggle, you can choose between two types of exclusions:
- Specific Products – you can search for and select individual products/variants by name. If a shopper adds one of these products to their cart, the upsell popup will not display.
- Specific Categories – you can search for and select one or more product categories. If a shopper adds any item from within those categories, that item will not trigger the popup.
Next, you can use the Show on pages checkboxes to disable the popup on certain types of pages. That is, if a shopper adds an eligible item to their cart from a type of page that you’ve disabled, that will not trigger the popup.
You can enable or disable the upsell popup for three different types of content:
- Homepage
- Product Single – the product page for an individual product.
- Product Archive – any type of page that lists multiple products, such as a category or tag page.
Finally, you can use the Show on devices checkboxes to disable the popup for people who are shopping on a desktop or mobile device.
For example, if you uncheck the Mobile box, mobile visitors will never see the upsell popup. It will only display to people browsing from a desktop computer.
Colors and Design
Finally, you also get some options to configure the color and style of your upsell popup. You can find all of these in the Look and Feel settings.
As you make changes here, the live preview should automatically update so that you can get a better idea of how your choices will affect things.
4. Save Settings and Test
At this point, you’re pretty much done!
To save your choices, make sure to click the Save button in the top-right corner.
Then, I recommend opening your store and adding an eligible item to your cart to make sure your upsell popup looks exactly as you want it to.
Remember – your upsell popup will only appear according to the display conditions that you chose.
For example, if you chose to disable the upsell popup for mobile visitors, make sure that you’re testing your site from a desktop device.
Create Your Upsell WooCommerce Popup Today
That wraps up our guide on how to use Merchant Pro to create your own flexible WooCommerce upsell popups.
With Merchant, you can easily upsell other products to your customers, with options to display related products or recently viewed products.
Plus, Merchant isn’t just an upsell popup plugin. It gives you 47+ modules to boost your store’s revenue and improve the shopping experience for your customers.
And because it’s 100% modular, you don’t need to worry about any features that you’re not using affecting your store’s performance.
If you’re ready to get started, purchase your copy of Merchant Pro today.
