How to create a Cross-Sell Popup

Let's see how to create a cross-sell popup that’s designed to increase leads and conversions. A cross-sell popup is one of the most effective product recommendation techniques, and in our case due to its highly customizable capabilities and splendid design.

Design and Build a Popup

  1. From the WordPress Dashboard > Templates > Popup
  2. Click on Add New and name your template 
  3. Once you click Create Template you will be redirected to the stunning library of pre-made popup templates that you can insert with just a click, or you can always start from scratch. 

Popup Settings

Layout

  1. Width - 500px 
  2. Height - Fit to Content
  3. Close Button - OFF 
  4. Entrance Animation - Fade In 
  5. Exit Animation - Fade Out

Add the content for the Popup 

  1. Set the foundation of our popup, add a section with two columns. Set the background color for the entire section.
  2. Click to edit the first column and go to the Advanced Tab. From here you will need to set the padding value of 25 on all sides. Drag an inner section and delete one column.
  3. Edit the column and from to the Styles Tab, set a background color. 
  4.  Go to the Advanced tab and add some negative margin values to elevate our column out of the section. We will also add padding values of 12px on the Top, Right, and Left. 
  5. Search for the Products element and drag it onto the page. 
  6. Set the columns value to 1 and post per page will be the same value as well. Fine-tune the image settings and size. Hide the ratings and the add to cart button while on the same page. 
  7. If you wish to include other products you simply do that from the query tab, set the source to manual selection, and type in the preferred complimentary product.
  8. Go to the Style tab, set the column gap and the row gap to be the value of 30 pixels. Set an animation for our product as well.
  9. From the Content section, we will tweak the typography options as per usual for the title as well as the price. Set a text color for the price to make it stand out more. 
  10. Moving on to the second column, from the Advanced tab we will add padding values of 40px for the Top and Bottom and 25px for the Left and Right to adjust the rest of the content.
  11. Include a heading element and a text editor element to introduce your login form popup. Stylize the elements and tweak their respective settings. 
  12. Another heading element will need to e added to further clarify our popup. Let's copy the style of the text editor, but only this time, for design purposes we will add an underline as decoration. Go to the Advanced Tab to add some padding values of 55px for the bottom. 
  13. As for our final component, let’s drag a button. Edit the text of the button. Go to the Style tab and configure the typography options. Set the text color and the background color for the button. 

Publish the Popup

  1. Click on Publish, let’s set the conditions. Select WooCommerce, next taxonomy will need to be set to Product categories and to specify your category in our case we will assign it to show on Furniture.
  2. From the triggers tab, set the popup display on page load, to be more specific after 30 seconds
  3. And from the advanced rules, we will have our popup be displayed after a user has viewed 2 pages.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.