Disable Add to cart button for specific variant in dawn theme

[kilimanjaroo]

Hello!

I want to disable add-to-cart buttons for variants where the price is 0( or $1). For this, I change main-product and featured-product liquids. I tried {%- unless product.price == 100 -%} and similar but it hides buttons for all variants. Could someone help me?

{%- when 'buy_buttons' -%}
                                 
                  {%- if product != blank -%}
{%- unless product_variant.price == 100 -%}
                    
   {%- endunless -%}
                  {%- else -%}
                    

                      

                        
                      

                    

                  {%- endif -%}
                

[BSS-Commerce]

Hi @kilimanjaroo

In your code:

Change:

product_variant.price

into:

product.selected_or_first_available_variant.price

I hope that it will work for you.

[kilimanjaroo]

unfortunately no, it still hides for all variants. And select others doesn’t help. Add to cart does not displayed when I select a variant with a normal price

[kilimanjaroo]

unfortunately no, it still hides for all variants. And select others doesn’t help. Add to cart does not displayed when I select a variant with a normal price

[BSS-Commerce]

Hi @kilimanjaroo

Please follow these steps:

• Open Theme => Edit code

• Find the file global.js


• Find the renderProductInfo() code

• Add the following code right after price.classList.remove(‘visibility-hidden’);

const form = document.getElementById(`product-form-${this.dataset.section}`);
if(this.currentVariant.price < 100) {
   form.style.display = "none";
} else {
   form.style.display = "block";
}

• Before:

• After:

I hope that this can help you.

[kilimanjaroo]

Thank you sir it works properly, but when I open the page for the first time these buttons will display. I need to click on another variant and click back for an item with 1 dollar price to hide buttons. But I understand where I need to look

[kilimanjaroo]

And is it possible to disable the element instead hide it?

I tried form.disabled=true; but it doesn’t work

[BSS-Commerce]

Hi @kilimanjaroo

For the issue when you open the page for the first time, these buttons will display, please go to the file global.js to find the code:

class VariantSelects extends HTMLElement

• Then, add the following code right after super();

this.updateOptions();
this.updateMasterId();
this.toggleAddButton(true, '', false);

if (!this.currentVariant) {
  this.toggleAddButton(true, '', true);
  this.setUnavailable();
} else {
  this.updateMedia();
  this.updateURL();
  this.updateVariantInput();
  this.renderProductInfo();
  this.updateShareUrl();
}

• Before:

• After:

• If you want to disable the button instead of hiding the button, please go to the file global.js and edit the following code:

if(this.currentVariant.price < 100) {
   form.style.display = "none";
} else {
   form.style.display = "block";
}

into:

const addButton = form.querySelector('[name="add"]');
const buyButton = form.querySelector('.product-form__buttons .shopify-payment-button button');
if (this.currentVariant.price < 100) {
  addButton.setAttribute("disabled", "disabled");
  buyButton.setAttribute("disabled", "disabled");
} else {
  addButton.removeAttribute("disabled");
  buyButton.removeAttribute("disabled");
}

• Find the following code:

toggleAddButton(disable = true, text, modifyClass = true)

• Comment on the line of code again:

addButton.removeAttribute('disabled');

• Before:

• After:

I hope that this can help you.

[kilimanjaroo]

Thank you sir a lot. Based on your code I did a few changes and it works properly

I put this to class VariantSelects extends HTMLElement

if (!this.currentVariant) {
  this.toggleAddButton();
} else {
  this.updateMedia();
  this.updateURL();
  this.updateVariantInput();
  this.renderProductInfo();
  this.updateShareUrl();
}

And change a bit if price

if (price) {
          price.classList.remove("visibility-hidden");
          if (this.currentVariant.price <= 100) {
            this.toggleAddButton();
          } else {
            this.toggleAddButton(
              !this.currentVariant.available,
              window.variantStrings.soldOut
            );
          }
        }

And it works exactly as I want. Again thank you so much!