Anastasiia Mykytiuk
Updated on

Creating WooCommerce Popup to Showcase Cart with JetPopup and JetBlocks WooCommerce Cart widgets

Once you’re using JetPopup, you can add the popup templates to practically any page of your site, or even assign the specific popup to the widget’s element or button. However, while we all know how to create simple popup templates with static content, we still feel confused when it comes to creating popups for WooCommerce sites, e.g., ones that should showcase the products added to the WooCommerce cart, etc.

JetPopup plugin provides one of the most convenient ways of adding such a cart element displaying the products added to the WooCommerce cart. Using such an element, added to the header, the visitor will be able to view the products to the cart at all times, remove the ones not needed, and view the total price for all the added products.

You can see how this popup works in UnderTone Crocoblock skin: the WooCommerce element (available in JetBlocks) is added to its header, and the popup template containing the WooCommerce Cart products is attached to it and appears on click.

WooCommerce Popup

This post provides the detailed explanation on how to create the very similar WooCommerce Cart widget with the popup that features the products added to one’s cart.

Create a New WooCommerce Cart Popup Template

  1. First, in order to create a new popup template with JetPopup, you need to make sure that JetPopup plugin is installed and active on your site.
  2. Next, let’s navigate to JetPopup > All Popups in WordPress Dashboard and here click Popup Layout in the top right corner. You’ll see the popup window where you’d be offered to select the needed popup layout preset. To use the preset that looks similar to the one used in UnderTone skin, select the Slide In popup layout preset. Then click Create Popup button.
  3. Once we’ve added a new popup template, we can start adding content to it and customizing it according to our needs. First, to make the popup template attached to the right side of the screen instead of the left one, proceed to editing JetPopup Settings. To access then click the Settings option in the bottom left corner and switch from Settings to Style block.
  4. In Position block select Horizontal Position > Right option.
  5. Now let’s remove the default content that’s shown in the popup template and replace it with the one needed. To do it, navigate to the widgets list and locate the default WordPress widget bock. In case you have WooCommerce plugin already installed and active on the site, you will be able to select the default WooCommerce Cart widget. Just drag and drop it to the needed section.
  6. Fill in the widget’s title to show up at the top of the list of products added to the Cart, and check Hide if cart is empty option to prevent the widget from displaying an empty cart.

Attach Popup Template to the Needed Widget

Once you’ve finished creating the popup template, let’s assign it to the specific widget (in our case, it is to be WooCommerce Cart widget in JetBlocks).

  1. Let’s navigate to WordPress Dashboard. You need to open the header template to which you want to add this widget, and thus provide an ability for the users to view the products added to cart on click.
  2. In case you’re using Elementor PRO, you can find this template in Elementor > My Templates block. If you’re using Crocoblock header & footer builder functionality, let’s navigate to Crocoblock > My Library. Here select the needed header template and click Edit with Elementor option to open it in Elementor editor.
  3. Locate JetBloks widgets list (it is available only when the plugin is installed and active on the site). Drag and drop the WooCommerce Cart widget to your header (in the specific column and section where you need it to be placed).
  4. Open the Advanced widget’s settings and here navigate to JetPopup block. Here select the newly created popup template from Attached Popup dropdown and set the Click on widget trigger type (it’s available from JetPopup v.1.1.0, so, in case you don’t see this trigger type, just update JetPopup plugin to the latest version).

As you can clearly see, it is easy to add the list of products added to cart to the popup template. Once you’ve got Crocoblock products, such as JetPopup and JetBlocks, you can do it within several minutes without ever breaking a sweat. Feel free to create such WooCommerce popup templates whenever you need them to make navigation to cart way easier for your visitors.