i whant/need to add the class outofstock to the image of product list item and single item
list view :
hidden link
single item :
hidden link
the 500SL is out of stock NOW
Hello Marc,
Thank you for contacting Toolset support. I'll be happy to help you with this.
I understand that you need to set a class to the image of a product when this product is out of stock. Unfortunately this isn't possible unless you use custom code, which is out of our support scope. Here you can visit the link where you will find the documentation about the shortcode that generates the image of the product: https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-woo-product-image
Also, there is a workaround which is not exactly what you were asking for but it could be helpful. Instead of adding a class to the image of the product it is possible to wrap the image in a container with this class if the product is out of stock. To achieve this follow this steps:
- Go to Toolset -> Layouts and edit the Layout for single product
- Edit the cell of the featured image and add a conditional shortcode that checks if the product is out of stock (Conditional output -> Type fields -> Product in Stock Status)
- Once created the conditional, place the container with the class ('outofstock') wrapping the image shortcode.
Note: Please remember that this conditional output must be set twice, once for showing the opening tag of the container with the class "outofstock" and once for the closing tag.
Follow the same logic if you want to implement it in the archive page for products.
To fetch this image in CSS instead of using a class like img.outofstock you will be using a class similar to .outofstock img. Note that is possible that you will need to use the "!important" statement to overwrite some CSS classes.
Please let me know if you need any further assistance and I will be happy to help.
Kind regards,
Carlos
