Sold Out Badge not showing on custom WC Archive Layout

[Fjerrr]

Hello!
I’m designing a website for a client, and I need to display when a product is out of stock.

I’ve tried two of the suggested methods i’ve found in the forum- This one and this one
I believe the issue must be related to the fact that i’m bulding a custom layout, and when I call the product featured image, it is not necessarily calling the ‘stock’ attribute. Hence the ribbon, or CSS declared ‘sold out’ text isn’t showing.

Is there a way to give the Product Featured Image a custom attribute that will call the ‘stock’ variable? Or is there any other suggested way to make this work?

Thanks beforehand!

[tristup]

Hi Fjer,

Thanks for reaching out.
You can do that by adding an extra div element inside the Product Looper with the condition of Product is not InStock and add the Text element with the content Out of Stock. Please find the screenshots describing the process.

The div named Out of Stock.

The condition added to the above div.

Add the Text

The output.

Hope it helps.
Thanks

[Fjerrr]

Thank you so much for your clear and comprehensive reply.
It is working perfectly.

Pro X Theme, along with the top level support you offer, is by far the best tool i’ve come across in my 6 years of working in web development.

I have another small inquiry- On a different web, the client has requested the amount of items in cart to be displayed next to the cart icon on the navigation bar.
I’m using the built in {{dc:woocommerce:cart_items_raw}} dynamic hook to display it. Is there any way (I assume, using JS) to hide the output of this hook if there are 0 items in the cart?

[prakash_s]

Hello Fjer,

Yes, you can set the condition on the element if the cart item count is 0 then the element won’t be displayed. Please have a look at the given screenshot below.

Here I have used the condition on the basis of dynamic content “{{dc:woocommerce:cart_items_raw}}” if it does not equal to the 0 then it would allow the element to display or it would not display the element.

Hope it helps
Thanks

[Fjerrr]

It did help. Thank you so much for your assistance!

[friech]

We are delighted to assist you with this.

Cheers!