WooCommerce Sold Out Products Badge not showing

Hi Lyse

Can you test this with your theme switched to twenty thirteen and see if it shows there?

Hi Gerhard,

Same thing, the badge does not display.

Lyse

Hi,

Could it be you are using variations and inventory on product level?

In that case your inventory might be set to out of stock on the general tab of the product, yet your variations might have items in stock?

That way the systems does not get the information that it is out of stock and the sold out badge wont appear?

Annie

Hi Gerhard,

I have simple products only – no variations

Lyse

Hi Gerhard,

I’m having seeing the same behavior on my site. I also have only simple (virtual) products. no variations.

Not sure if it makes a difference, but I’m using the Enfold theme as well as your woocommerce widget.

Also, a related issue/question: your sold out products widget is causing my product grids not to lign up at the top anymore because of the insertion of the “Sold Out!” text above those items. Is there a way to move that to below the product image?

Thanks for any help with these two issues.

Nana

Nana, do you mind providing me with a link to your site so I can have a look for you?

Lyse, could you also please give me the URL to your site and point out a product that is sold out?

Hi Gerhard,

Here’s one

Here’s another one

Lyse

Lyse, seems like the URL’s got stripped, can you pop me a mail through my contact form on https://gerhardpotgieter.com with the details?

For others experiencing this, please add the following css to your theme’s custom.css file

.woocommerce span.soldout, .woocommerce-page span.soldout {
    z-index: 999;
}

Hi Gerhard,

Here’s a link to my site showing the problem:
https://184.154.229.10/~potteryn/wordpress/classes-workshops/

Also, sorry to be such a newbie, but where can I find my theme’s custom.css file?

Thanks for taking a look.

Nana

Hello Nanakuo,

If you are using a Woothemes theme you will probably be able to find your custom css in your theme options “display options ( dashboard ).

There you can simply copy and paste Gerhards code.

You can also access it via ” dashboard” “appearance” ‘editor” but if you are a newbie that might not be a good idea.

Good luck,
Annie

I was able to get it to sort of work via line you asked we place in the CSS, however, it does not work well.

https://shakespearencompany.com/product-category/womens/ shows it perfectly fine, however going into the product itself the sold out icon is not on the image and is instead floating above the picture as seen here https://shakespearencompany.com/product/mid-century-bangle/

fsoto

Change this CSS to: .woocommerce span.soldout, .woocommerce-page span.soldout {
z-index: 99999;

Add this css: .container .twelve.units .container .nine.units .woocommerce span.soldout, .woocommerce-page span.soldout {top: 80px!important; left: 12px!important;}

Hey Folks,
Also having this problem. Using the Accentuate theme, and put

.woocommerce span.soldout, .woocommerce-page span.soldout {
z-index: 99999;}
 .container .twelve.units .container .nine.units .woocommerce span.soldout, .woocommerce-page span.soldout {top: 80px!important; left: 12px!important;

into my custom css options, also tried

.woocommerce span.soldout, .woocommerce-page span.soldout {
    z-index: 999;
}

Both yielded no results. Here is my page so you can perhaps see what is going on.
https://www.kaleidoscopejaspermines.com/shop/
Nvm, got it to work, my bad :).