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

If you prefer to changing the “Free Of Charge Badge” button text via a plugin, use these buttons to download our plugin, for free.

If you would like help with changing the “Free Of Charge Badge” or any website design project, please contact us – happy to help, always.

Social Media

 

Payments Accepted

 

payment options

Request a Callback

 

Contact Details

Phone: 01 536 3049

Mobile: (087) 13 77 382

Email: info@arrowdesign.ie

Address:

The Chase, Arkle Rd,

Sandyford, Dublin 18,

D18 Y3X2

 

Pin It on Pinterest

Share This