0

I have a question. What would I need to do to have a image overlay for sold out products. This basically should cause the image to be "grayed out" (so a gray overlay with opacity at 60% or something like that), so that you can still see the image but it is clearly out of stock because the whole thing is grayed out. It doesn't need to say out of stock or anything like that.

I've looked for an extension that would do that and wasn't able to find it. The closest I found was doing something with css and using a z-index to overlay the image but I'm not sure how well that would work.

Thanks :)

Improve this question

1 Answer 1

Reset to default
2

A quick & dirty way to do this would be to apply the css in the template to change the image opacity when the item is not salable.

Edit to app/design/frontend/YOUR_PACKAGE/YOUR_THEME/template/catalog/product/view.phtml

Put this at the bottom of the file.

<?php if (!$_product->isSaleable()) {
           echo '<style>.product-img-box .product-image img { opacity: 0.6;filter: alpha(opacity=60); } </style>';
      }
?>

Change the CSS to be whatever you need for your image appearance change or overlay.

Improve this answer
2
  • That doesn't seem to be working... I added the code to the bottom of the file and it didn't change any opacity. (right before the last div to close the product view... Also where would I put it for the category page (once I get it working)
    – user12644
    Feb 2, 2015 at 20:07
  • You can replace the .product-img-box .product-image img class with whatever your image class is set to. The category page would require more modifications.
    – seanbreeden
    Feb 2, 2015 at 20:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.