WooCommerce SOLD badge

  • birdhousedigital
    August 31, 2026 at 6:47 pm

    Hi,
    I’m using the GP Query block to show WooCommerce products on an event page. I have the price showing using {{post_title link:post}} but can’t figure out how to show a SOLD badge?

    I thought there could be a way to do it using Conditions perhaps?

    Many thanks.

  • Alvind
    August 31, 2026 at 7:31 pm

    Hi there,

    Add a Text block containing SOLD inside the Query block’s Loop Item, give it a CSS class such as: sold-badge

    Style the badge as required, then add this CSS:

    
.gb-loop-item:not(.outofstock) .sold-badge {
	display: none;
}

    WooCommerce automatically adds the outofstock class to products whose stock status is Out of stock, and GB includes those product classes on the Loop Item. Therefore, the badge will only remain visible for sold-out products.

    Make sure the product’s stock status is set to Out of stock. Also check that WooCommerce isn’t configured to hide out-of-stock products entirely; otherwise, the product won’t appear in the query.

    Conditions aren’t necessary here. GenerateBlocks’ current Conditions feature is presently intended for supported content such as Overlay Panels, not individual blocks inside a Query loop.

  • birdhousedigital
    August 31, 2026 at 7:46 pm

    Thanks for your quick response.
    I had tried something like this too but i now realise it’s not working because the query loop is a Post Meta query. Essentially we’re using a post object field to select which products to show on the event page. Is there anyway to do it with this setup?

  • birdhousedigital
    August 31, 2026 at 7:48 pm

    Oh also, using {{post_meta key:_stock_status}} spits out the correct stock status – so it’s coming through correctly..

  • Alvind
    August 31, 2026 at 8:33 pm

    Ah okay. In that case WooCommerce’s product classes won’t automatically be added to the Loop Item.

    Since {{post_meta key:_stock_status}} is returning the correct value, you can use it as an HTML attribute on the SOLD Text block.

    Select the SOLD block and go to Advanced > HTML Attributes, then add:

    
Name: data-stock-status
Value: {{post_meta key:_stock_status}}

    Keep the sold-badge CSS class on that block, then use:

    .sold-badge:not([data-stock-status="outofstock"]) {
	display: none;
}

    The rendered attribute will be either:

    
data-stock-status="instock"

    or:

    
data-stock-status="outofstock"

    Therefore, the badge will only display when that related product is out of stock.

  • birdhousedigital
    September 1, 2026 at 8:13 pm

    Thank you, for some reason this isn’t working but I’ve changed the way that my products show and that’s allowed me to use your first fix.
    Thanks for your help.

  • Alvind
    September 1, 2026 at 8:15 pm

    No problem, glad to hear that!

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.