Cart launcher
Add a cart button that opens the drawer. Use the floating launcher, the Cart Launcher block, a shortcode or a menu item.
The cart launcher is a cart button with an item count. Shoppers click it to open the cart drawer. CartPops can show a launcher in four ways:
| Type | Where it appears | Set up with |
|---|---|---|
| Floating launcher | A round button fixed to a corner of the screen | Launcher page (on by default) |
| Cart Launcher block | A floating button added in the Site Editor | Block sidebar |
| Inline launcher by shortcode | Inside your content or theme templates | Shortcodes |
| Menu launcher | Inside a classic WordPress menu | A CSS class on the menu item |
The floating launcher
In wp-admin, go to WooCommerce > CartPops > Launcher. The page is titled Floating Cart Launcher, and a live preview shows each change.
Visibility
- Show floating cart launcher turns the button on or off. It is on by default.
- Show item count shows a count badge on the button.
- Show cart total adds the cart total next to the icon.
- Hide zero item count hides the badge while the cart is empty. This option appears when Show item count is on.
- Hide when cart is empty hides the whole button until something is in the cart.
- Hide launcher on pages lets you search for pages where the floating button should not appear, such as your checkout page.
Position and size
- Screen Position: Bottom Right or Bottom Left.
- Offset X (px) and Offset Y (px): the distance from the screen edge, 0 to 80.
- Size (px): 40 to 80.
Appearance
- Icon Style: Shopping Cart, Shopping Bag or Basket.
- Colors: Button Background, Icon Color, Badge Background and Badge Text.
The Cart Launcher block
On a block theme, you can add the CartPops Cart Launcher block from the Site Editor. In the block sidebar, open Launcher Settings to set Position and Show item count.
A few things to know before you use it:
- The block is a floating button. It stays fixed to the screen like the automatic launcher.
- CartPops already renders a floating launcher in the page footer by default. If you add the block as well, shoppers see two buttons. Turn off Show floating cart launcher on the Launcher page when you rely on the block.
- The block takes its Position and Show item count from its own sidebar. Its other options use fixed starting values, so the Icon Style, Show cart total and Hide when cart is empty settings from the Launcher page don’t carry over to it. Colors, size and offsets still come from the Launcher page.
If you need a launcher inside your content or header instead of a floating one, use the shortcode in a Shortcode block.
Add the launcher to a classic menu
You can turn a menu item into a cart launcher with a CSS class.
Go to Appearance > Menus and open the menu you want to change.
Click Screen Options at the top right, then tick CSS Classes under Show advanced menu properties.
Add a menu item, for example a Custom Link with # as the URL, and give it a label.
Open the item, enter cpops-cart-menu-item in CSS Classes (optional), and save the menu.
CartPops replaces the whole menu item with a launcher, so the item’s own label and link no longer show. The class only exists to mark the spot.
Set how the menu launcher looks under Navigation menu launcher (legacy) on the Launcher page:
- Navigation menu icon: Shopping Cart, Shopping Bag or Basket. The default is Shopping Bag.
- Navigation menu item count style: None, Bubble or Plain.
- Hide zero item count in navigation menu and Show cart total in navigation menu.
Under Inline launcher appearance, set Inline Background, Inline Text, Inline Badge Background and Inline Badge Text. These colors apply to menu launchers, shortcode launchers and inline block launchers. They don’t change the floating launcher.
Open the drawer from your own button
In V1, adding the class cpops-toggle-drawer to any element turned it into a drawer trigger. That no longer works. In V2 the class is only a styling hook on the launcher button itself, and clicking a different element with it does nothing.
To give shoppers another way to open the drawer, use one of the launchers above. A launcher placed by shortcode or menu item behaves like a button you place yourself.
Developers can also open the drawer from their own code by dispatching the cartpops:open event. See JavaScript.
Change when the drawer opens
By default the drawer also opens when a shopper adds a product to the cart. To open it only from the launcher, see How to disable the add-to-cart trigger.