Sold out badge on block based product page?

Plugin works great and I like very much the fact that the setup is very simple and to the point. It also works great with what I would call “native” woocommerce pages, however it works less smoothly when using block based single product page (eg in the link above, the product page is based on kadence shop kit template mechanics).

After a bit of trial and error, I managed to get the sold out plugin to work as well (you need to select the 2020 vintage :-), albeit with an ugly fix in WooCommerce.php to modify show_badge_on_variation_select() and select directly based on div.woocommerce-product-gallery rather than closest(‘.product’) CSS selector. The fix also works on ‘native’ woocommerce product pages, assuming those pages display some product image that is.

I don’t think this is a ‘good’ fix, but I am not sure there is a good way to make this work apart from hacking directly in the php code?

PS: in the same function, i also observed something that leads to a vexing problem when adding CSS logic that depends on the presence of the wcsob_soldout classed element: each time you toggle between out of stock product and product in stock (say because a variation is is stock while the other is not), a new element <span class=’wcsob_soldout’> gets added to the DOM. I think this can be fixed by always removing the span element first, and adding it conditionally:

$form.on(‘show_variation’, function (event, data){

$(‘.wcsob_soldout’).remove();

if (!data.is_in_stock) {

$product.prepend(‘<span class=”wcsob_soldout”>’ + sold_out_text + ‘</span>’);

}

not really elegant, but it works

The page I need help with: [log in to see the link]