How to Create an Add to Cart Popup in Divi

Are you using Divi and you want to customize your product pages for greater conversion rate? 

In the end, you may receive hundreds, or thousands of website visitors on your online store, but if nobody is motivated to purchase, there’s something missing, and you will lose business as a result. 

To enable potential customers to add items to their shopping carts, besides creating a UX that walks them to the checkout, you need to ask them to make an order, and the best way to attain that is by using an ‘Ádd to Cart’ button effectively, even in your popups. 

Therefore, in this tutorial, you will learn how to create an ‘Add to Cart’ popup in Divi pages, with the help of Divi’s best options, Divi Areas Pro, and WooCommerce integrations. Let’s begin. 

Table of Contents

  • Over to You
  • The Woo Add to Cart Module

    The Woo Add to Cart Module allows you to design and customize the WooCommerce add to cart button, your store’s product stock, and the product quantity, all from one place.

    YouTube

    By loading the video, you agree to YouTube’s privacy policy.
    Learn more

    Load video

    It is a module that allows you to have greater control over how your product pages look, and that helps you accomplish more with Divi eCommerce overall. 

    And add-to-cart popup example

    When clicked on successfully, the Add to Cart button adds the selected product to the shopping cart, the Product Stock displays the number of products available for purchase, and moreover, the Product Quantity allows users to select the amounts of products they want to purchase.

    Besides the standard customization options available to all Divi Modules, the Woo Add to Cart module offers the following:

    • Show Quantity Field: Allows you to choose whether the product quantity field should be displayed or not.
    • Show Stock: Allows you to choose whether the product stock element should be displayed or not.
    • Fields: Allows you to style the quantity field.
    • Dropdown Menus: Options that style the dropdown menu items that feature variable product attributes (if required).
    • Button: Options that allow you to style the add to cart button.
    • Text: Options that allow you to style the product quantity text element.

    How do Add-to-Cart Popups Work?

    Just like the other types of popups, the add-to-cart popup can be an effective method of gaining more sales and greater conversion rates for your Divi website. An add-to-cart popup will appear either prior to, or after the customer adds an item to their cart.

    In the same vein as with other popups, you can change the text, media, fonts, and colors to make sure that the popup is in line with the rest of your website’s branding.

    Creating Your Add-to-Cart Popup

    Before we begin with the steps, we would like to tell you about Divi Areas Pro, the all-round solution for creating Divi popups.

    Once you’re using Divi Areas Pro, you can add popups to practically any page of your Divi website and assign the specific trigger and layout of your popups.

    Moreover, as mentioned above, Divi provides you with one of the most convenient ways to add a WooCommerce add-to-cart popup and showcase products on the page.

    To create an add-to-cart popup using Divi Areas Pro, use the following steps:

    Install and Activate Divi Areas Pro on Your Website

    As a premium Divi plugin, Divi Areas Pro is hosted on divimode.com and the Elegant Themes marketplace. That means, you can download it from our own website or Elegant Themes, depending on where you purchased it.

    Try Divi Areas Pro today

    Sounds interesting? Learn more about Divi Areas Pro and download your copy now!
    Many pre-designed layouts. Automated triggers. No coding.

    Click here for more details

    Installation via WordPress dashboard

    1. Download the plugins zip file.
      – If you purchased a license on divimode.com: Log into your user account. The download link in the Purchases tab.
      – If you purchased a license on the Divi Marketplace: You can download the plugin from the marketplace page.
    2. Log into your WordPress website as an administrator. Open the Plugins > Add New page. Once the page is loaded, click on the “Upload Plugin” button at the top of the page.
    3. Select the .zip file that you downloaded in step 1 above and hit the “Install Now” button.
    4. After installation, activate Divi Areas Pro.

    Create a new Area by clicking the “Add Divi Area” button within the Divimode menu

    This will open up the plugin’s visual editor, which you can use to design and customize the popup:

    The Divi Area Content Editor

    At this point, you can proceed to using the Divi Builder to design the content of your area. You can add any Divi modules or widgets and customize the layout and style using the visual editor.

    The most important element you need to add the ‘Woo Product Add to Cart’ module

    Adding Woo Product Add to Cart Module

    Choose a trigger for the popup 

    This can be a user action such as clicking a button or hovering over an element, or it can be set to display automatically upon page load. It’s super easy with Divi Areas Pro:

    Preview the popup to ensure it looks and functions as intended

    This will allow you to see how the popup will appear to users on the front-end of your website. 

    Save the popup and publish it to make it live on your website. Once the ‘Add-to-cart’ popup is published, it will be displayed to users according to the trigger you have set.

    If you have any questions or need further assistance using Divi Areas Pro, you can refer to the plugin’s documentation or contact the support team.

    Over to You

    That’s how easy it is to create ‘Add-to-Cart’ popups in Divi with Divi Areas Pro. This way, you can improve the purchase process on your Divi website, provide better UX for your customers, reduce cart abandonment, and boost conversions as a result. 

    Feel free to give Divi Areas Pro a try and create eCommerce popups whenever you need them! 

    Looking for more advice on how to create powerful popups? Read the following blog posts:

    New to Divi Popups? Take our FREE 6-Day Email Course!

    Want to design the perfect ‘Add-to-Cart’ Divi popups for your website? Work with our partner agency and make it happen. Let’s Go

    Try Divi Areas Pro today

    Sounds interesting? Learn more about Divi Areas Pro and download your copy now!
    Many pre-designed layouts. Automated triggers. No coding.

    Click here for more details