Hide Shopping Cart Icon When Cart is Empty
If a visitor is on your website and their shopping cart is empty, Squarespace will display the shopping cart icon with a zero next to it. You may not want this to display until they have something inside their cart.
In a previous video, I've shown you how to do this using quite a bit of JavaScript but with the new fluid engine update they've made it super easy to do this using just a few lines of CSS.
So in this video, I am going to show you how to hide the cart icon when a visitor’s cart is empty.
Step 1: Set Up Your Cart
Your first step is to edit the site header and make sure the cart is turned on. You can then choose an icon from the list provided or select to display text instead.
Step 2: Add the Code
Copy and paste the following code into Design > Custom CSS
/* Hide Cart When Empty */
.cart-quantity-zero {
display: none !important;
}