The Clear Cart module allows you to add a button to your Cart page, mini cart, and side cart that enables your customer to remove all items from their cart with a single click.
You can fully customize the behavior, placement, design, and label of your Clear Cart button.
In the screenshot below, you can see an example of what a Clear Cart button looks like on a WooCommerce Cart page:
Below, we’ll see how to configure and activate the module.
1. Open the Clear Cart Module
Open your Merchant dashboard by clicking the Merchant menu in the left sidebar of your WordPress admin area.
Find the Improve Experience section, and then click the Clear Cart module to open its settings page:
2. Configure the Behavior of the Module
On the module’s admin page, find the Settings panel where you can configure how the Clear Cart module will behave and what message it will show your customers.
You have access to the following options:
- Cart Item Threshold – Here, you can specify the minimum number of items that must be in the cart for the Clear Cart button to be shown.
- Clear Cart After Inactivity – This option displays a prompt to clear the cart when there’s no user activity for a certain amount of time. If enabled, you can also configure the following options:
- Time of Cart Session Expiration – Here, you can specify the number of hours after which the inactivity prompt will appear (default value: 24).
- Inactive Confirmation Message – This is the message in the inactivity prompt (default value: ‘It looks like you haven’t been active for a while. Would you like to empty your shopping cart?’).
- Confirmation Message – This option is only shown when the Clear Cart After Inactivity option is toggled off. It allows you to change the message that appears in the confirmation dialog box shown before a customer clears their cart (default value: ‘Are you sure you want to empty your shopping cart?’).
- Redirect URL after Clearing the Cart – Here, you can specify if the page should redirect after a customer clears their cart, and if so, to which part of the site. The available options are None, Home, Shop, and Custom. The Custom option allows you to specify a custom URL.
If you’ve changed any of the default values, click the Save button in the top-right corner of the page.
3. Customize the Placement of Your Clear Cart Buttons
You can find the Placement panel below Settings on the module’s admin page. It lets you enable or disable the Clear Cart button at various locations on your site and configure its position at each location.
The Placement panel includes the following options:
- Cart Page – This toggle allows you to show or hide the Clear Cart button on your Cart page. If enabled, Merchant also shows the following option:
- Position – Here, you can define where you want to show the button on the Cart page. The available options are After Coupon Button, After Update Cart Button, and After Cart Table.
- Mini Cart – This toggle allows you to show or hide the Clear Cart button in your mini cart. If enabled, Merchant also shows the following option:
- Position – Here, you can define where you want to show the button in the mini cart. The available options are Before View Cart Button, After View Cart Button, and After Checkout Button.
- Side Cart – This toggle allows you to show or hide the Clear Cart button in your side cart. (To use this option, you need to activate the Side Cart module on your site.) If enabled, Merchant also shows the following option:
- Position – Here, you can define where you want to show the button in the side cart. The available options are Before View Cart Button, After View Cart Button, and Before Checkout Button.
If you’ve made any changes, click the Save button that will appear in the top-right corner of the page.
4. Fine-tune the Look and Feel of the Button
You can find the Look and Feel panel below the Placement panel on the module’s admin page. Here, you can change the design and label of your Clear Cart button.
You have access to the following options:
- Label – This is the text that appears on the button (default value: ‘Clear Cart’).
- Style – Here, you can choose from three button styles. The available options are Solid (shows a solid background color), Outline (shows a transparent background with a solid border), and Text (only shows the label).
- Border Radius – Here, you can make your Clear Cart button more rounded (default value: 0px).
- Padding Top/Bottom – Here, you can increase or decrease the top and bottom padding of the button (default value: 15px).
- Padding Left/Right – Here, you can increase or decrease the left and right padding of the button (default value: 25px).
- Button Background Color – This is the background color of the Clear Cart button (default value: #212121).
- Button Background Hover Color – Here, you can set the background color of the button in hover state (when a user moves the cursor over it) (default value: #414141).
- Button Text Color – This is the text color of the Clear Cart button (default value: #ffffff).
- Button Text Hover Color – Here, you can set the text color of the button in hover state (default value: #ffffff).
- Font size – Here, you can change the font size of the label on the button (default value: 16px).
If you’ve changed any of the default values, click the Save button in the top-right corner of the page.
5. Activate the Module’s Shortcode
You can find the Use shortcode panel below the Look and Feel panel on the module’s admin page. The shortcode enables you to define custom positions for your Clear Cart buttons that are not covered by the module’s settings.
The shortcode option is for developers — only activate it, if you know how shortcodes work in WordPress (note that if the shortcode is activated, the Clear Cart buttons added via the module’s settings will disappear from your site, as the position of the button will be controlled by the shortcode instead of the settings).
The module’s shortcode is as follows:
[merchant_module_clear_cart]To activate the shortcode, toggle the Use shortcode option on, and then click the Save button that will appear at the top of the page:
6. Enable the Module
To activate the Clear Cart module, click the Enable module at the top of the page:
