How to hide the Add To Cart button on sold out products in Squarespace.

Introduction

The problem: By default, the "Add to cart" shows up even when a product is out of stock. Additionally, if an out of stock variant of a product is selected, the "Add to cart" is also still displayed.

How we're going to solve this: In the below steps, we'll show you how you can hide the "Add to Cart" button when the product is out of stock or sold out. We'll also set it up so that if you have products with variants, if a selected variant is out of stock, the "Add to Cart" button will be hidden when the out of stock/sold out variant is selected.

Step 1: Open the code injection settings in Squarespace

We'll be using the "Header" section of your code injection, to get to the right page in your Squarespace settings, you can use this simple guide from Squarespace: Getting to your Code Injection settings

Step 2: Copy & paste the following snippet

You can now simply copy-paste the below snippet into the "header" area of code injection you have opened in Step 1.

The below snippet hides the "Add to Cart" button whenever a product or a selected variant of a product is out of stock.

Step 3: You're all done

Have any questions about the fix snippet or encountering any issues? Feel free to start a chat with us!