Wednesday, September 14, 2022
The Great Tit
Updated: 20. 9. 2022, Added: 14. 9. 2022

Add WooCommerce Sold Out Badge in Oxygen Builder

If you want to display WooCommerce product badge which says that product is out of stock (sold out), then you can go through this tutorial. It's not only usable for Oxygen Builder, but I hope for all WordPress websites.

When using Oxygen repeater

You need to create a custom function in your code snippets plugin (I am using Advanced scripts):

// Display badge - Out of stock

function gt_soldout_woocommerce() {
    global $product;
    if($product) { // Updated 20.9.2022
    if ( ! $product->is_in_stock() ) {
        echo '<span class="badge not_available">Out of stock</span>'; //change text as you need
    }
}
}

Then you can add this in your product card in repeater. The card must be position:relative; if you want it floating over image on top (for example).

Není skladem = Sold Out

The code of this function will be called by text block with dynamic data. You will choose:

Dynamic Data > PHP Function Return Value > Function name = gt_soldout_woocommerce

Or you can call it with code block:

Then you need to adjust the CSS. For example:

span.badge {
    position: absolute;
    font-size: 12px;
    background-color: #fff;
    padding: 5px;
    left: 15px;
    color: #080808;
    font-weight: 600;
}
.badge.not_available {
    top: 15px;
    background-color: #ff002b;
    color: #FFF;
    left: auto;
    right: 15px;
}

When using Oxygen WooCommerce Products Element

If you use classic WooCommerce element from Oxygen WooCommerce integration, then use this function in your code snippets plugin. And again style it via CSS.

add_action( 'woocommerce_before_shop_loop_item_title', function() {
   global $product;
   if ( !$product->is_in_stock() ) {
       echo '<span class="badge not_available">Now Sold</span>';
   }
});

Or you can customize it more with this:

add_action ('woocommerce_after_shop_loop_item_title', 'gt_woo_badge_outofstock', 10);

function gt_woo_badge_outofstock () {
    product $ global;
    if ($ product-> stock management () && (int) $ product-> get_stock_quantity () <1)
    echo '<span class="badge not_available">' .__ ('Not available'). '</span>'; //change the text here
}
Did I help you? Support me on Patreon!
Beep this article to your friends!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram