Skip Navigation

[Résolu] how to add class to woo commerce list view item

This support ticket is created Il y a 5 années et 1 mois. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Marqué : ,

This topic contains 1 réponse, has 2 voix.

Last updated by Carlos Rojas Il y a 5 années et 1 mois.

Assigned support staff: Carlos Rojas.


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


Carlos Rojas

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:

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,