How to show or hide elements when product is out of stock

You can show or hide any element inside your Buy Module based on the product's stock status using the sf-out-of-stock combo class.

Show an element when out of stock

1. By default, hide the element in Webflow.
2. Give it sf-out-of-stock combo class.
3. Make it visible in the styles panel.
4. Remove the combo class and publish.

Hide an element when out of stock

1. By default, show the element in Webflow.
2. Give it sf-out-of-stock combo class.
3. Hide it in the styles panel.
4. Remove the combo class and publish.

Change add to cart button text when out of stock

To swap the button text when a product is out of stock, add two text elements inside the button and use the methods above together to toggle their visibility. Apply sf-out-of-stock combo class to both text elements — hide one and show the other.