Add WooCommerce Sold Out Badge in Oxygen Builder

2 min read / Custom Code, Oxygen Builder, Plugins, WooCommerce, WordPress / Share on: Twitter, LinkedIn, Facebook

Post summary: Learn how to add Sold Out badge within WooCommerce Oxygen integration.

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).

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
}

0 comments