Customize Cart Icon Settings in Modern Cart

The Floating Cart Icon settings in Modern Cart let you control how the cart button looks and behaves on your store. You can manage its visibility, placement, style, and even trigger it with a custom element.

Access Floating Cart Icon Settings

To access these settings, go to WooCommerce > Modern Cart > Floating Cart Icon.

1. Display Floating Cart Button (Pro)

Use this option to show or hide the floating cart button. This does not affect any custom triggers you may set.

2. Floating Cart Button Position

Select where you want to display the floating cart button on your website.

3. Hide Cart Button When Empty (Pro)

Enable this option to hide the floating cart button when the cart is empty. Once a product is added, the button will reappear.

4. Select Floating Cart Button Icon (Pro)

Choose from predefined icons or upload a custom icon that matches your brand. Supported formats include .png, .jpg, and .svg. The recommended size is 36 × 36 px.

If you’d like to upload and use your own custom icon, see this doc for detailed steps: Use a Custom Image for the Floating Cart Icon

5. Use Custom Trigger (Pro)

Enter an element selector (#id or .class) to use as a custom trigger for opening the cart tray. You can also add multiple selectors separated by commas.

To learn more, see this doc: Open the Cart Using a Custom Button or Link

Note: All changes in the settings are saved automatically.