YITH WooCommerce Badge Management – Custom Badge Not Rendering on Shop Listing

Environment
Theme: WoodMart (latest version)
Plugin: YITH WooCommerce Badge Management Premium (licensed)
WooCommerce: Latest version

Issue Description
We are using YITH WooCommerce Badge Management Premium to display two custom product badges on our WooCommerce store.

The badge rules have been configured correctly, but both badges are not displaying consistently across the website.

Any guidance on the relevant WoodMart files or JavaScript responsible for badge rendering would be greatly appreciated.

Current Behavior
On the single product page, the badge container is generated, but one or both badges are not rendered correctly.
On the shop/category pages, the badge behavior is different from the product page.
The percentage discount badge is positioned differently on archive pages versus single product pages, suggesting that different WoodMart templates or JavaScript are being used.
Investigation Performed

We have already completed the following checks:

Activated the official YITH Premium license.
Tested the same badge configuration on a clean local WordPress installation.
On the local installation, both badges work correctly.
Therefore, the issue appears to be specific to the staging website and its interaction with the WoodMart theme.
JavaScript Investigation

While debugging the staging website, we noticed:

The badge wrapper <div> is present in the HTML.
However, the badge content is not being populated.
The browser console reports multiple JavaScript errors/conflicts related to the WoodMart theme.
It appears that WoodMart JavaScript may be interrupting or preventing YITH’s badge rendering process.

Because the badge container exists but remains empty, we suspect that one of the WoodMart scripts is preventing the YITH badge initialization from completing successfully.

Any guidance on the relevant WoodMart files or JavaScript responsible for badge rendering would be greatly appreciated.

Hello,

Please try adding the following code snippet to your child theme’s functions.php file and check if it resolves the badge rendering issue:

add_action( 'init', function() {
	add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
	remove_action( 'woocommerce_before_shop_loop_item_title', 'woodmart_template_loop_product_thumbnail', 10 );
}, 1100 );

Additionally, WoodMart includes a built-in Custom Label Builder that allows you to create custom product labels without using an additional badge plugin. You can check the following documentation for more details:
https://xtemos.com/docs-topic/custom-label-builder

Hope this Helps!

Best Regards

Thank you for providing the hook code.

We added the suggested code exactly as instructed, but unfortunately, the issue still persists. The badge wrapper <div> is generated, but it remains empty and no badge content is rendered.

Could you please advise what the next troubleshooting step should be?

Hello,

Please check how it works with the default WordPress theme and the WooCommerce Storefront theme just to check whether the issue is with our theme or not. Also, please check the site with our theme but only with the theme’s default plugins activated, and deactivate all the 3rd party plugins from the site.

If it works fine with the default WordPress theme, then provide the admin panel login details of the website to check it myself and help you out accordingly.

Best Regards

[Author]

Posts