Skip Navigation

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

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.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Marqué : ,

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

Last updated by Carlos Rojas Il y a 4 années et 3 mois.

Assigned support staff: Carlos Rojas.

Auteur
Publications
#537290

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

#537348

Carlos Rojas
Supporter

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