Please note that creating this popup requires our WooCommerce Pro premium feature.
One of the best methods of increasing your store’s average order size is utilizing cross-sells. Cross-selling is where you advertise or recommend products that go well with the product the customer is planning on buying.
For example, if someone is buying a bike, you might suggest a helmet for them to purchase too.
Use this 5-step guide for creating a cross-sell popup on your WooCommerce site.
Step 1: Creating Your Popup Content
We’ll be creating a popup that recommends homemade hot cocoa when someone adds a mug to their cart.
Let’s create a new popup. To get started, go to the “Add Popup” link in the “Popup Maker” menu. Alternatively, you can click the “Add New Popup” button on the “All Popups” page.
On the new popup page, enter the name for the popup. The name is for internal use only to find the popup in the list of popups. No site visitor will see this name. I’ll use “Mug Cross-sell.”
Then, enter the title, which will be the main headline in the popup. You can leave this blank if you do not need a headline. I’ll enter “Don’t forget some hot cocoa!” in for my title.
Next, enter the content of the popup. For cross-sell popups, adding an image and explaining the value of having the additional product is a good start. Don’t forget to add the link or button to take the visitor to the product you are recommending!
Step 2: Adding Triggers and Cookies
Now that we have our content added, it’s time for us to set up our triggers and cookies. The triggers are what causes the popup to open. For this popup, we want to open it automatically when someone adds our mug to their shopping cart.
By default, the popup will open for the site visitor every time they add the mug to their shopping cart. We probably don’t want that. We may only want to show the popup until the site visitor takes some action, such as closing the popup, and then prevent the popup from opening again. To do this, we use cookies.
First, click the “Add New Trigger” button in the “Targeting” section of the popup settings.
In the popup that opens, choose “Item Added to Cart” as the trigger. Make sure the “Prevent popup from showing to visitor again using a cookie?” option is checked.
For the “Stop showing popup once visitor takes this action:”, we want to choose “On Popup Close.” This will cause the cookie to be set when the popup is closed.
Then, click the “Add” button.
On the next screen, you will see a setting to adjust which products should open the popup. If you leave the “Required products” empty, this popup will open when any product is added to the cart.
For this cross-sell popup, we want to limit it to only the relevant products. In my case, it is our coffee mug product.
Click the “Add” button.
Our trigger and cookie are now set up!
Step 3: Targeting Your Checkout Page
By default, Popup Maker will load our popup on all pages, posts, products, and everywhere else. To adjust where the popup loads, we use the “Targeting” settings.
Switch to the “Targeting” tab of the popup settings. Click on the “Choose a condition” dropdown.
There are many conditions you can choose from, including targeting the home page, only posts, only pages, or specific pages. Which settings you select will depend on where you need the popup to load.
For this popup, we want to display it on the product’s page once a visitor clicks the “Add to Cart” button.
Popup Maker also lets us add it throughout the shop pages. However, some of our visitors may scroll through the shop and click the “Add to Cart” button for different products.
Since we may add cross-sell popups to other products, this would mean the visitor would see a different popup for each button they clicked on the shop page. For example, if a customer went to the shop page and quickly added our mug, hot cocoa, and coffee to their cart, they would not enjoy seeing a popup for each one. We do not want to frustrate our visitors by opening too many in a short period.
I am going to select the “Products: Selected” option in the “Products” section. Once selected, I can choose my “Mug” option in the new dropdown.
Once selected, new “And” and “Or” options will appear. You can use these to target multiple areas of your website with the same popup. For this popup, I will not use those since I am only targeting visitors on the mug’s page.
Step 4: Adjust Display Settings
Now that we have a way for the popup to open (triggers) and we have told the popup what pages to load on (targeting), we can adjust what the popup looks like using the “Display” settings.
Popup Maker provides many granular settings so you can fine-tune your popup. For this popup, we want a simple popup that appears in the middle of the screen.
Now, go to the “Display” settings tab. You will see “Display Presets” first. Along the top will be links for other display settings, including size, animation, and position.
For this popup, I am going to use a small, non-obtrusive popup. To help us get started, we will click on the “Right Bottom Slide-in” display preset.
Once clicked, a message will appear saying the display settings have been updated.
All that is left is to click the “Appearance” link. This will let us select the “theme” which controls the popup’s visual appearance, including colors, spacing, and fonts. Popup Maker comes with several built-in themes, and you can also create your own themes that match your site.
For this popup, I am going to choose a custom theme that matches my site. To build it, I duplicated the built-in “Enterprise Blue” theme and modified the close button settings.
Step 5: Publish
Now that we have our popup set up, it’s time to publish and check it out. First, click publish to save your popup.
Next, go to the page you are targeting with your popup. In our case, it’s the mug’s product page. Since this popup’s trigger is “add to cart”, we will add the mug to our cart to get the popup to appear.
Once you have closed the popup, our cookie will be set. This may make it difficult to view changes to your popup. If you edit or change the popup, you can go back to the page you are targeting and use Popup Maker’s admin menu to open the popup.
Your WooCommerce cross-sell popup is now ready!
