How to hide shopping cart icon when cart is empty

Squarespace 7.1squarespace 7.1 FE
Written By Primitus Consultancy

In this tutorial, you'll learn to hide the shopping cart icon when it's empty, streamlining your website's design and enhancing the user experience. This will work for Squarespace 7.1.

When a visitor is on your website and their shopping cart happens to be empty, Squarespace will exhibit the shopping cart icon alongside a zero. However, you might prefer this display to only appear once items have been added to their cart.

Complexity: Easy

Step 1

Copy the code below and from the Squarespace dashboard navigate to Pages > Webtools > Custom CSS and paste the code.

/* Hide Cart When Empty */
.cart-quantity-zero {
  display: none !important;
}

Step 2

The shopping cart disappears when it is zero and only appears when it there are products in the cart.

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

All work in this guide is provided ?“AS IS”. Other than as provided in this agreement, this guide makes no other warranties, express or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, we recommend that you purchase the services of a developer.

Featured
side-bar-logo.png
Plugins-Button.jpg
Templates-Button.jpg
SEO-Button.jpg
11help-Button.jpg
Home Blog
Primitus Consultancy

We work with small and medium-sized businesses to help create a professional online presence. We provide a one shop full-service design studio in London, United Kingdom. 

https://primitusconsultancy.co.uk
Previous

Why hiding the shopping cart icon when empty makes sense
Next

The Advantages of Bespoke Squarespace Templates