How to hide images of products that are not available

[sjfield15]

I am using the Kalles theme - I have added the following code:

.js.product-form__input.product-form__input--pill input.disabled + label {
display: none;
}

to my base.css

This hides the swatches of products that are not available but customers can still see images of the products that are unavailable. Is there a non-app way to hide these images if product quantity is 0? What if I have multiple images of one variant?

Thanks!

[sjfield15]

Here is an image of the product - this product is unavailable as you can see on the swatches, however, the image still appears.

[CafeDelMar]

Hi @sjfield15.

Can you please share the website URL? If it's password-protected, a password would be needed, too. It would be much easier to debug and solve.

[sjfield15]

https://madelinelove.com/

[CafeDelMar]

@sjfield15, sorry, I can't spot any unavailable products. All of the variants shown are available and can be added to the cart.

[sjfield15]

The photos have the unavailable products. For example, the photo of the fuchsia necklace I posted - there is no fuchsia product swatch available because the fuchsia is sold out. I want that photo to not be shown as well.