Hide Add-To-Cart button in Magento Product Page

Question

I am working on a project inhouse and came across a little problem. My store has 2 configurable attributes, color & size. If a product is Out of stock, the Add To Cart button hides once both of the Attributes (Colors & Sizes) are selected.

My objective:

I want to hide the Add-To-Cart button as soon as the Color is selected, only if ALL the sizes of this particular color is Out of stock.

Answer 1

One way to do this is to create custom module with custom controller in which you will print ajax response. Then in the template with jQuery or Prototype add onchange event on the Color select box, on which you will send ajax request to the custom controller, including the product id, then check if the combination is good or not. If not, hide the "Add to Cart" button.

Another way without ajax, is to print the combinations of each Color that has "Out of stock" variations for ALL Sizes in JSON format in the template, that way you can check with Javascript if selected color is in the printed JSON, then hide the "Add to Cart" button. This way you will need to do the calculations in the template for each Color.

Answer 2

You can easily handale with css class. Create css class and put condition in product page if product is configurable then add to

<div class="<?php if($configurable) echo 'configurableproduct'; ?>">
  .......
 </div>