Free of charge badge for woocommerce shop page

Are you looking for a way to add a Free of charge badge for woocommerce shop page in WooCommerce? This code snippet will allow you to add the functionality to allow your customers to quickly see that a product is free of charge – the item stands out by having a ‘badge’ display over the product image. You can completely tailor the wording of the button and the descriptive text to guide the user to click the button.

 

To do this you need to:

1. Open WordPress admin panel, go to Appearance > Theme Editor.
2. Open functions.php theme file.
3. Add the following code at the bottom of function.php file of your child theme.
4. Save the changes and check your website. Note that you can change the text included from ‘Proceed Now’ to whatever you wish. The custom text in proceed to checkout text will now be displayed.

Note:

To change the proceed to checkout button, ensure that you take a backup and only do this through your child theme so that future updates to your theme will not overwrite the code.

//START OF CODE

/**
*Free of charge badge for woocommerce shop pagein WooCommerce
*   Add this code in your active theme functions.php file
**/

function arrowdesign_ie_stock_free_of_charge_badge() {

 

// txt for badge, set defaults or populate from meta
$ad_stock_free_of_charge_badge_var =”XXX free XXX “;

global $product;
if ( ” === $product->get_price() || 0 == $product->get_price() ) {

echo ‘<span class=”your class name” style=”background: #654ea3; color: #fff; font-size: #14px; font-weight: 600; padding: 5px 10px; position: absolute; right: 10px; left: 10px; top: 10px; z-index: 100;”>’.$ad_stock_free_of_charge_badge_var.'</span>’;
}

}//end function

add_action( ‘woocommerce_before_shop_loop_item_title’, ‘arrowdesign_ie_stock_free_of_charge_badge’ );

//END OF CODE