In this article, you’ll find out how to create a WooCommerce popup to showcase a cart using JetPopup & JetBlocks WooCommerce cart widgets.

So, let’s begin!

Table of Contents

• How the Popup works? (Example)
• Create a New WooCommerce Cart Popup Template
  • #1 Go to JetPopup > All Popups
  • #2 Add Content to your Popup
• Attach Popup Template to the Needed Widget
  • #1 Open the Header template
  • #2 Drag and drop WooCommerce Cart widget
  • #3 Navigate to JetPopup Block
• Put in a Nutshell

Before we start 🔔

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 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 view the products to the cart and 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.

This post provides a detailed explanation of creating 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 Go to JetPopup > All Popups

To create a new popup template with JetPopup, you need to make sure that the JetPopup plugin is installed and active on your site.

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.

#2 Add Content to your Popup

Once we’ve added a new popup template, we can add content to it and customize 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 edit JetPopup Settings. To access, click the Settings option in the bottom left corner and switch from Settings to Style block.

In Position block select Horizontal Position > Right option.

Now let’s remove the default content 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. If you have a WooCommerce plugin already installed and active on the site, you will select the default WooCommerce Cart widget.

Just drag and drop it to the needed section.

Fill in the widget’s title to show up at the top of the list of products added to the Cart, and check the Hide if the cart is an 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 Open the Header template

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.

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.

#2 Drag and drop WooCommerce Cart widget

Locate JetBlocks widgets list (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).

#3 Navigate to JetPopup Block

Open the Advanced widget’s settings and here navigate to JetPopup block. Here select the newly created popup template from the 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, update the JetPopup plugin to the latest version).

Put in a Nutshell

As you can 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 the cart easier for your visitors.