[Resolved] Sold Out Banner

[Renaldo]

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?

[David]

Hi there,

try this:

1. Create a Hook Element:

https://docs.generatepress.com/article/hooks-element-overview/

2. Add this to the Hook content:

<?php
    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;
}

[Author]

Posts