[Resolved] Sold Out Banner

Home Forums Support Sold Out Banner

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1088613
    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?

    #1088634
    David
    Staff
    Customer Support

    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;
    }
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.