Setting 'Add To Cart' button colour for specific product sections

Technical Q&A
1

Hi all,

I’ve figured out how to set custom text for 3 specific product section buttons (both for in and out of stock variants) in product-form.liquid:

{%- liquid
      assign default_text = 'products.product.add_to_cart' | t
      assign button_text = 'products.product.add_to_cart' | t
        if template == 'product.undated-weekly' or template == 'product.undated-daily' or template == 'product.journals'
          assign default_text = 'products.product.preorder' | t
          assign button_text = 'products.product.preorder' | t 
        endif
      unless current_variant.available
        assign button_text = 'products.product.sold_out' | t
        	if template == 'product.undated-weekly' or template == 'product.undated-daily' or template == 'product.journals'
        		assign default_text = 'products.product.comingsoon' | t
        		assign button_text = 'products.product.comingsoon' | t
            endif
      endunless
    -%}

In theme.css.liquid, the section below controls colour for all disabled buttons. However, I want a specific colour to be applied to the three sections noted above.

.btn.disabled{
    cursor:default;
    color:#444;
    background-color:#f6f6f6 !important;
    transition:none

If anyone could help achieve this I would appreciate it very much. I thought about creating a .coming-soon-background entry in theme.css.liquid, but I’m not sure how to apply it to specific sections.

Thank you very much in advance!

2

@Meglin

You could use the conditionals to setup the class. Create a variable with the default class or an empty String then set the value within the conditionals just as you are doing for the button text and default text.

After that, within the button’s HTML apply the class to it.

Then target those specific classes with your CSS.

Hope that helps!