[Resolved] Sold Out Banner

Home Forums Support Sold Out Banner

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #1088613

    Good day

    Is there anyway we can show a SOLD OUT banner across a product with a transparent background? to show what products are sold out? Instead of having to click on a product only to see that it is sold out?

    Customer Support

    Hi there,

    try this:

    1. Create a Hook Element:


    2. Add this to the Hook content:

        global $product;
        if ( !$product->is_in_stock() ) {
            echo '<span class="soldout">' . __( 'SOLD OUT', 'woocommerce' ) . '</span>';

    3. Select the woocommerce_before_shop_loop_item_title from the Hook List.

    4. Check Execute PHP and set the Display Rules to the Entire Site.

    5. Then add this to your CSS:

    .soldout {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: rgba(0,0,0,0.5);
        color: #fff;
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.