WooCommere: Display Out Of Stock badge for Product In Backorder-CodePudding

On my WooCommere shop, when my product is in backorder the Sales badge still shows up on my product. I would like to replace the Sales badge with the Out Of Stock label.

I have this code so far:

add_action( 'woocommerce_before_shop_loop_item_title', 'new_badge', 3 );         
    
function new_badge() {
  global $product;
  if ( $product->is_on_backorder(1) ) {
    echo '<span  data-shape="type-3">' . esc_html__( 'Out Of Stock', 'woocommerce' ) . '</span>';
   }
}

This code only add the span with the out-of-stock badge over the existing Sales badge, which provokes an overlap.

Is there a way to remove directly the Sales badge?

CodePudding user response：

You can use the filter 'woocommerce_sale_flash' to remove default sale flash badge.

try out this code.

add_action( 'woocommerce_before_shop_loop_item_title', 'new_badge', 3 );         

function new_badge() {
   global $product;
 if ( $product->is_on_backorder(1) ) {
   add_filter('woocommerce_sale_flash', function (){return false;});
    echo '<span  data-shape="type-3">' . esc_html__( 'Out Of Stock', 'woocommerce' ) . '</span>';
  }
 }

CodePudding user response：

Add WooCommerce Sold Out Badge Storewide The most common scenario is the placement of the WooCommerce Sold Out badge across the store for all the products that have been sold out. This can be accomplished by placing the following code snippet in the functions.php file of the theme.

add_action( 'woocommerce_before_shop_loop_item_title', function() {

global $product;

if ( !$product->is_in_stock() ) {

   echo '<span >Now Sold</span>';

} });

Place the following CSS code in the style.css file (located in the theme folder):

.now_sold {

background: #000080;

color: #fff;

font-size: 14px;

font-weight: 700;

padding: 6px 12px;

position: absolute;

right: 0;

top: 0;

}