Change Add to Cart Button Color separately from Sold Out Button in Classic Theme

JD10
Explorer
57 0 32

I am using the Classic theme. The Customizer for this theme does not allow me to change the color of JUST the Add to Cart button or JUST the Sold Out button (which replaces the Add to Cart button when an item is sold out). Changing the colors in the Customizer also changes links and other buttons.

I found a way to add this code to the bottom of the theme.scss.liquid file...

/* change the color of the add to cart button */
#AddToCart {
    background: #cc9900;
}
 

... and it works (though it may not be the best way to do this) - however, it ALSO changes the Sold Out button color (which I do not want).

IF I use the code above, I have not been able to figure out how to change the Sold Out button to a different color (or even to just leave it the color it currently is).

I do not know CSS very well (just learning). Does anyone have a suggestion or fix for either changing JUST the Add to Cart button without affecting the color of the Sold Out button; OR changing the Add to Cart button AND the Sold Out button separately?

I appreciate any tips - thank you!

Replies 5 (5)
Alex135
Astronaut
1889 2 471

Try this:

/* change the color of the add to cart button */
#AddToCart {
    background: #cc9900;
}

/* change the color of the sold out button */
#AddToCart.disabled {
    background: #cccccc;
}

 

JD10
Explorer
57 0 32

Thank you VERY much Alex - that works!

When I click on a Sold Out item, I see a flash of the Add to Cart button, but then that button goes to the Sold Out button.  Any idea how to get rid of that flash of the Add to Cart button? Maybe that's a more complicated fix?

I sincerely appreciate your time and your help - thank you!

Alex135
Astronaut
1889 2 471

A JavaScript script is involved in changing the Add to Cart button to the Sold Out button, for example.  The script executes after the page is completely loaded.  Because there is a slight delay between when the Add to Cart button is rendered and when the page is completely loaded, you see that flash.

So the solution is to make sure that the page loads the Sold Out button the first time around (for products/variants that are actually sold out) instead of the Add to Cart button.

Open product.liquid.  Look for:

            <button type="submit" name="add" id="AddToCart" class="btn">
              <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
            </button>

Change that to:

            {% if variant.available %}
            <button type="submit" name="add" id="AddToCart" class="btn">
              <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
            </button>
            {% else %}
            <button type="submit" name="add" id="AddToCart" class="btn disabled" disabled >
              <span id="AddToCartText">{{ 'products.product.sold_out' | t }}</span>
            </button>
            {% endif %}

 

JD10
Explorer
57 0 32

Alex - I really appreciate your knowledge, and your willingness to help. Your explanation also helps me to understand what is happening.

You've made my day - thank you! I cannot tell you how many hours I've put into this to try to figure this out. I just followed your instructions, and it works PERFECTLY!

Thank you very much for your time!

RCar193
Tourist
7 0 1