---
title: Cart launcher
description: Add a cart button that opens the drawer. Use the floating launcher, the Cart Launcher block, a shortcode or a menu item.
sidebar:
  label: Cart launcher
  icon: shopping-bag
---

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](/guides/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.

:::note
**Hide launcher on pages** applies to floating launchers only. Launchers you place with a shortcode, the Cart Launcher block's inline form or a menu item always show.
:::

### 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](/guides/shortcodes) 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.

1. Go to **Appearance** > **Menus** and open the menu you want to change.

2. Click **Screen Options** at the top right, then tick **CSS Classes** under **Show advanced menu properties**.

3. Add a menu item, for example a **Custom Link** with `#` as the URL, and give it a label.

4. 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.

:::warning
This works for classic menus built under **Appearance** > **Menus**. It does not work in the Navigation block of a block theme. In a block theme, use the WooCommerce **Mini-Cart** block (see [Integrations](/guides/integrations)) or a Shortcode block with `[cartpops_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](/developers/javascript#events-you-can-dispatch).

## 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](/guides/how-to-disable-trigger).