Skip to content
CartPops Docs
Esc
↑↓navigate↵open⌘Jpreview
On this page

Integrations

How CartPops works with the WooCommerce Mini Cart block, the Blocksy theme, Elementor and the Cart and Checkout blocks.

CartPops works with WooCommerce and most themes out of the box. This page covers the places where it connects to other tools, and the settings for each.

WooCommerce Mini Cart block

Many block themes show the WooCommerce Mini-Cart block in the header. CartPops can take over that button.

In wp-admin, go to WooCommerce > CartPops > Advanced. On the General tab, under WooCommerce Mini Cart, choose an Integration mode:

  • Replace (default): clicking the Mini-Cart button opens the CartPops drawer instead of WooCommerce’s own mini cart panel.
  • Standalone: CartPops and the Mini-Cart block work independently. Use this if you want both.

This is the easiest way to give a block theme a header cart button that opens CartPops. Add the Mini-Cart block to your header in the Site Editor and leave the mode on Replace.

Blocksy

CartPops can replace the cart icon in the header of the Blocksy theme and open the CartPops drawer when shoppers click it. It also works with a Blocksy child theme.

Go to WooCommerce > CartPops > Advanced and open the Integrations tab.

Check the Theme box. When Blocksy is active it reads Integration available.

Switch on Replace header cart icon, then click Save Changes.

After you switch on Replace header cart icon, more settings appear:

  • Icon style: Cart, Bag, Basket, Cart 2, Bag 2 or Basket 2.
  • Show item count badge: show the number of items on the icon.
  • Open CartPops drawer on click: open the CartPops drawer instead of Blocksy’s own cart panel. On by default.
  • Icon Color, Badge Background and Badge Text: leave these empty to inherit the colors from the theme.

A preview of the header icon shows your choices.

For other themes, the box says No integration available and lists the supported themes. CartPops still works with them. Add a launcher with the floating launcher, a shortcode or a menu item.

Elementor

CartPops Pro adds a CartPops Cart widget to Elementor. Find it in the WooCommerce or CartPops group in the widget panel. It renders an inline cart launcher, so you can place it in an Elementor header or any section.

In the widget’s Menu Icon section, set:

  • Icon: a cart or bag icon.
  • Items Indicator: None, Bubble or Plain.
  • Hide Empty: hide the item count while the cart is empty.
  • Subtotal: Show or Hide the cart total.
  • Alignment: Left, Center or Right.

The Style tab adds color controls for the text, icon, background and border, with separate Normal and Hover states.

The widget has no settings in the CartPops admin. Its colors come from the Inline launcher appearance colors on the Launcher page and from Elementor’s style controls.

Classic themes and other themes

CartPops renders the drawer and the floating launcher in the footer of classic themes automatically. To add a header cart button, use the shortcode or a menu item. See Cart launcher and Shortcodes.

For step-by-step help with a specific theme, see How to install CartPops on the Shoptimizer theme.

WooCommerce Cart and Checkout blocks

CartPops works with the WooCommerce Cart and Checkout blocks. It uses the WooCommerce Store API, so the drawer stays in sync with a block-based cart. When a shopper adds a product with a WooCommerce block, the drawer updates, and it opens if Open drawer on is set to Add to cart.

CartPops is also compatible with WooCommerce High-Performance Order Storage (HPOS).

Was this page helpful?