Want to remove add to cart and buy now button when products sold out.

[Gaurav24]

Want to remove add to cart and buy now button when products sold out.

Here is my website products link: https://cameraclub.in/products/fujifilm-gf-20-35mm-f4-r-wr

Please help me out how can I do it.

[theycallmemakka · Accepted solution]

Hi @Gaurav24 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
.product-form__submit[disabled], dynamic-checkout[disabled] {
    display: none;
}

</style>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[Gaurav24]

Thank you @theycallmemakka 
It's working

[aditya58singh]

Hi @Gaurav24 

1. Go to your Shopify Admin
2. Click on 'Online Store' and then 'Themes'.

Find your current theme, click on 'Actions', and then select 'Duplicate'. This will create a backup of your theme.

1 Approach Edit Your Theme Code

In the editor, locate the theme.liquid file. This file is usually found in the "Layout" directory.

Scroll down to the bottom of the theme.liquid file and locate the closing </body> tag.

<style>
.product-form__submit[disabled], .dynamic-checkout__submit[disabled] {
display: none;
}
</style>

This CSS targets the submit buttons in the product form (product-form__submit) and dynamic checkout buttons (dynamic-checkout__submit) that are disabled (typically when a product is sold out).

2 Approch Implement the Conditional Logic

Locate the product template file. This is usually named product-template.liquid, product.liquid, or something similar, and can be found in the 'Sections' or 'Templates' folder.

Find the section of the code where the "Add to Cart" and "Buy Now" buttons are added. This section typically includes HTML input or button elements with types like submit or classes/ids like add-to-cart, buy-it-now, etc.

{% if product.available %}
  <!-- Existing code for Add to Cart and Buy Now buttons -->
  <input type="submit" name="add" class="btn" value="Add to Cart">
  <button type="button" class="buy-it-now btn">Buy it Now</button>
{% else %}
  <p>This product is currently out of stock.</p>
{% endif %}