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.

Site Tools