How to Add a Modern Cart Trigger to a WordPress Menu

Modern Cart lets you turn any menu item, header cart icon, or other clickable element into a cart trigger using its built-in Use Custom Trigger setting. This opens the cart tray right from your navigation menu, with no custom JavaScript required.

Note: Use Custom Trigger is available in Modern Cart Pro only.

Method 1 – Custom Menu Item + Use Custom Trigger

Step 1: Add the menu item

1. Go to Appearance > Menus.
2. Open Screen Options (top right) and tick CSS Classes (this field is hidden by default).
3. Expand the Custom Links section, set the URL to # and the Link Text to Cart (or paste a cart emoji to show an icon).
4. Click Add to Menu.
5. Enter a class in the menu item’s CSS Classes field, e.g. my-cart-trigger.
6. Save the menu.

Step 2: Register the trigger in Modern Cart

1. Go to WooCommerce > Modern Cart > Floating Cart Icon.
2. Scroll to Use Custom Trigger and enter your selector: .my-cart-trigger (you can add multiple, comma-separated, e.g. .my-cart-trigger, #my-id).
3. Save. Clicking the menu item now opens the cart tray.

Here is the related Doc on the Custom Trigger feature.

Method 2 – Cart Icon in a Header Built with a Page Builder or Theme

If your header is built with a page builder (Elementor including Ultimate Addons for Elementor, Bricks, Beaver Builder, Spectra) or your theme’s header builder (Astra, Kadence, etc.), you can use the cart icon there as the trigger:

1. Add an Icon, Button, or Cart widget to your header and choose a cart icon.
2. In that element’s settings, add a CSS class or ID, usually under Advanced > CSS Classes or CSS ID, e.g. my-custom-cart.
3. Go to WooCommerce > Modern Cart > Floating Cart Icon, scroll to Use Custom Trigger, and enter that selector (.my-custom-cart).
4. Save. Clicking the header cart icon now opens the cart tray.

Tip: On Astra, the theme’s built-in header cart icon opens Modern Cart automatically, with no setup needed.

Method 3 – Using a Floating Cart Launcher

By default, Modern Cart displays a floating cart button on the page. This is the recommended trigger approach. You can customize its position and appearance under WooCommerce > Modern Cart > Floating Cart Icon.

Notes

• The floating cart launcher is the primary intended trigger. Menu and header triggers use the Use Custom Trigger setting.
• The floating button and custom triggers work independently; hiding the floating button does not disable your custom triggers.
• Always test on both desktop and mobile after adding triggers.