Table of Contents

Add an "Empty Cart" Button to Cart and Checkout

Step 1: Apply the snippet to your configuration

You can apply the snippet below within the “configuration” section of your store's FoxyCart administration - look for the “Add custom header and footer code to your templates” option, enable it (if not already) and include the snippet in the “custom footer”.

{% if cart_is_fullpage or context == "checkout" %}
    <script>
        FC.client.on('ready.done', addEmptyCartFull);
	FC.client.on('render.done', addEmptyCartFull);
 
	function addEmptyCartFull() {
	    var empty_cart = 'https://'+FC.settings.storedomain+'/cart?cart=empty';
	    if (!$('#cart_empty').html()) {
        	$('.fc-cancel-continue-shopping.fc-container__grid').append("<span id='cart_empty'><a href=" + empty_cart + " class='fc-button fc-button--cancel'>Empty Cart</a></span>");
    	    }
	}
    </script>
{% elseif context == "cart" %}
    <script>
        FC.client.on('render.done', addEmptyCartSide);
 
        function addEmptyCartSide() {
            var empty_cart = 'https://'+FC.settings.storedomain+'/cart?cart=empty';
            if (!$('#cart_empty').html()) {
                $('#fc .fc-cart__title__header').after("<div id='cart_empty'><a href="+ empty_cart + " class='fc-button fc-button--cancel'>Empty Cart</a></div>");
            }
        }
    </script>
{% endif %}

Step 2: Customise conditions

You may modify this code to only show the button on the checkout or cart as desired. Please contact us if you need assistance in doing so.