How to Add a Clear Cart Button in WooCommerce?

September 5, 2023,
How to Add a Clear Cart Button in WooCommerce?
Adding a clear-cart button to your store might initially sound like a crazy idea. Nevertheless, it's worth exploring other aspects of this feature, as there are scenarios where enabling a clear-cart button in your WooCommerce store becomes advantageous. This functionality can greatly benefit customers who prefer to empty their shopping carts with a single click. Additionally, it helps in preventing any potential discomfort among less content customers. If you're involved in implementing the clear-cart button on your online store, this guide provides valuable insights. Join us as we walk you through the process of incorporating a clear-cart button into WooCommerce. Let's get started on this journey!

Why Add a Clear Cart Button in WooCommerce?

There exist two primary motives for incorporating this type of button into your store. Could this button potentially streamline the process of customers choosing not to make a purchase? To provide you with enhanced clarity on the occasions and rationale for implementing this clear-cart button, refer to the key reasons outlined below.
  • Enhance customers’ shopping experience: The presence of a clear-cart button will aid customers in effortlessly and promptly removing items from their carts. By integrating this button into your store, you empower customers to independently manage item removal, thereby enhancing the overall shipping experience.
  • Boost sales in the long term: When customers experience satisfaction while shopping in your store, their likelihood of returning to make further purchases increases significantly. This, in turn, translates to substantial gains in boosting your long-term sales revenue.

Ways to Add Clear Cart Button to WooCommerce

It’s now time for us to delve into the process of adding a clear-cart button within WooCommerce. This article will provide comprehensive guidance on accomplishing this task using two distinct approaches. The initial approach involves implementing code snippets, whereas the alternative method entails utilizing a plugin. We recommend that you thoroughly explore both methods, allowing you to determine the most suitable approach based on your understanding and the nature of your online business.

Using Code Snippets

The first step involves familiarizing yourself with the code snippets utilized for incorporating the clear-cart button into your store. Your first step entails accessing the backend of your WordPress site. Within this interface, locate the "Plugins" section and proceed by selecting "Add New." Continue by searching for the "Code Snippets" plugin. Subsequently, install and activate it for future applications. After that, your task is to hit on the section “Snippets” and click on “Add New” which is in your sidebar. Check out the below screen to know the location of these functions. When you are here, your next job is to name this new snippet. In this case, you could name it the “Add Clear-cart button”. Then, you need to copy the following code before clicking “Save Changes” and activating it for enabling. add_action( 'woocommerce_cart_coupon', 'custom_woocommerce_empty_cart_button' ); function custom_woocommerce_empty_cart_button() { echo '<a href="' . esc_url( add_query_arg( 'empty_cart', 'yes' ) ) . '" class="button" title="' . esc_attr( 'Empty Cart', 'woocommerce' ) . '">' . esc_html( 'Empty Cart', 'woocommerce' ) . '</a>'; } add_action( 'wp_loaded', 'custom_woocommerce_empty_cart_action', 20 ); function custom_woocommerce_empty_cart_action() { if ( isset( $_GET['empty_cart'] ) && 'yes' === esc_html( $_GET['empty_cart'] ) ) { WC()->cart->empty_cart(); $referer  = wp_get_referer() ? esc_url( remove_query_arg( 'empty_cart' ) ) : wc_get_cart_url(); wp_safe_redirect( $referer ); } }

Using WooCommerce Clear Cart Plugin

If you opt for a more efficient and expedient approach and are not inclined towards working with code, utilizing a plugin becomes essential. In such a scenario, the ideal choice is the "Clear Cart and Sessions for WooCommerce" plugin, which effectively aids WooCommerce store proprietors in incorporating a clear-cart button into their stores. With the support of this plugin, store owners gain comprehensive control over customer sessions and carts. It facilitates the automatic clearing of sessions or carts after a specified duration. Furthermore, users have the capability to clear carts and sessions within minutes, hours, or days. It is now time to delve into the implementation process of this task using this exceptional plugin.

Step 1: Install and activate the plugin

In order to enable this plugin for later use, installing and activating the plugin Clear Cart and Sessions is a must-do step. After you purchase this plugin, you can download the. ZIP file. Next, you need to go to the admin panel in WordPress. Here, it is easy to notice the section “Plugins” where you could click on “Add New” to upload the downloaded zip file. This will help you install the plugin effortlessly. So, you need to upload the file to proceed with its installation. After some seconds, the plugin will be installed. Next, you need to activate it before going on with configuration settings.

Step 2: Configure the settings

Before adding the clear-cart button, the configuration of settings will be prioritized. To do so, you need to go to your admin panel in WooCommerce. Proceed to pick up the section “Settings”, then hit on the tab named “Clear Cart & Session” to configure this extension. When you are here, you could be able to discover the setting sections, including “Redirection Settings”, “Empty Cart Button” and “Session Expire”. This is to say, you need to enable all of these three sections. Beforehand, it is a must to enable the session to expire and redirection settings before adding the clear-cart button. In the field “Activating”, it means that you will make up your mind to enable or disable the session time. On the other hand, in the field “Time Format”, it is a must to choose the time in minutes, hours, or days to clear the cart. In specifying the time, you need to verify the session expiration. Moreover, the field “Time of checking user frequently” aims at specifying the time for checking whether users are inactive before clearing their carts or not. Let us take an example for you to understand. In case you are fond of setting the time for cart expiration in 24 hours. Your to-do task is to check the activity of users after the time of 23 hours. If that consumer is active after the period of 23 hours, then the time will be updated, and it starts the session expiration counter. In redirecting customers to a store page or shop when you decide to add the clear-cart session. In the field “Redirection Address”, you will select the shop that you are going to redirect your customers to a store page or shop page. You also need to make the decision on the field “Activate”. By checking this option, you are capable of enabling redirection. On the other hand, you also need to specify the URL in which are about to redirect customers.

Step 3: Enable the clear-cart button

When you are done with the two above steps, you can enable the clear-cart button now. This assists you in enabling the Empty Cart button on your cart page to let customers clear all items or products in their carts with only one click. To do this, you need to configure the setting of this kind of button. By working with the field “Activate”, you could be able to enable or disable the clear-cart button on your cart page. In the field “Custom Button Text”, you will customize the text of your clear-cart button; whereas the field “Use the Default Theme” requires you to tick this option if you want to use the design of the default themes button. What is more, if you want to add colors to this button, you could do it by choosing the field “Custom Button Color”. Here, you could be able to customize the background color of your clear-cart button. It is also possible for you to choose the text color for this button by working out the field “Custom Text Color”. In the final field “Show Confirmation Dialog”, you can tick this option for asking for customers’ confirmation before they clear their carts.

Conclusion

In conclusion, adding a clear-cart button to your WooCommerce store can be a strategic move with several benefits. It enhances the overall shopping experience for customers by providing them with a quick and convenient way to remove items from their carts, which can lead to increased customer satisfaction and the likelihood of return visits. Moreover, it can boost your long-term sales revenue as satisfied customers are more likely to become repeat buyers. This blog has covered two methods for adding the clear-cart button: one using code snippets for those comfortable with coding and another through the use of the "Clear Cart and Sessions for WooCommerce" plugin, catering to those who prefer a simpler, plugin-based approach. Whichever method you choose, implementing this feature can contribute to a smoother and more user-friendly shopping experience for your WooCommerce store's customers.