Why the badge doesn’t show in homepage and shop page?

Hi @waseemsannib ,

For some reason it seems your theme doesn’t use the hooks needed by the plugin to display badge.

For the shop page, I can see in the source code that products have “outofstock” css classes. It means you can use the alternative method (go in Settings > Sold Out Badge for WooCommerce > Alternative method)

For the home page, I can’t see any product with outofstock class, it could be because all products in home page are in stock or because you’re using a different system to display products, like a page builder.
Please be aware that some solutions are not compatible with Sold Out Badge plugin: Gutenberg Widgets like “All products” for example is not compatible due to a limitation in WooCommerce blocks (they’re currently working on that but it could take months). Some Elementor widgets are not compatible either but some workarounds may be possible.

Could you tell me which tool is used to display products on homepage ? I could try to find a way to help you with this information.

Regards,

Charlie

Thank you Charlie for the valuable information. I have selected an alternative method in the setting and it seems nothing works. The badge still shows on the product page. No on the shop page nor in the homepage.

I use WPbakery page builder, and WooCommerce Dynamic Pricing & Discounts plugin but it is already deactivated to avoid conflict.

“Nautical” product is out of stock and added on the shop page and homepage. The badge is still not displaying.

I hope you could understand where the issue existed.

Thanks

Is there any support?

This is an open source plugin, which is free, and developed by only one person during nights and week-ends. So no, there isn’t any support. However, feel free to change the source code to make it fit your needs ??

Since WPBakery Page Builder is less and less used, I don’t know if I’ll try to make it compatible. I prefer to focus on Elementor compat, which is not fully done yet.

About your website, two things:

• on the shop page, out of stock products do have a “outofstock” class, so the badge can be added with pure CSS like below:

  .product.outofstock:before {
      content: 'SOLD';
      position: absolute;
      left: 6px;
      right: auto;
      top: 6px;
      z-index: 9999;
      color: #fff;
      padding: 3px 8px;
      text-align: center;
      background: #a087aa;
      font-weight: bold;
  }

• on the home page, the products don’t have the “outofstock” class, so unfortunately you’ll need to either develop your own solution or to change the tool used to display products.

Regards,

Charlie

Thank you, I have added the CSS and it worked perfectly on the shop page. How I can hide the label on the product page? I just need to show the badges on the shop page only.

You’ll need to add some custom CSS to target single product pages. But I can see you already did that.

I’m going to close this as resolved, but feel free to open a new thread if you need help.

Cheers,

Charlie
`

Hi, I’m having the same problem, my badge doesn’t displays on the shop page. I use WPBakery Page Builder as well but I don’t understand much about code, a developer built the web and he’s no longer available.
This is our website: https://refrivan.com.ar
Thanks!