Easy methods to Create Customized Product Badges for Woocommerce?

By default Woocommerce has solely “Sale” and “Out of inventory” badges however what if you have to create {custom} product badges? For instance, automated product badge for a featured product or “New” badge for merchandise which can be newer than 30 days? And even {custom} textual content badges with “Free transport” or “Prime product” textual content?

Nicely, be that as it could, on this submit I’m going to indicate you how you can show {custom} product badges on WooCommerce.

Video: Easy methods to Create Customized Product Badges for Woocommerce?

In the event you’re not aware of the coding or utilizing code snippets, then I might counsel you to check out the video right here under. In it I’ll present you how you can create {custom} product badges for Woocommerce in a manner that’s described additionally on this submit.

Code snippets plugin or capabilities.php file?

All of the snippets proven right here under needs to be added both to your little one theme’s capabilities.php file or higher but – use Code Snippets plugin for it.

WpCodeBox is my favourite code snippets supervisor for WordPress. It is a premium plugin and for those who’re , then seize WPCodeBox with a pleasant 20% low cost right here (SAVE 20% Coupon WPSH20).

All CSS code goes to the Look >> Customizer >> Extra CSS field.

Listen although, that you probably have to tweak this CSS in a manner that it appears good along with your theme.

Show Woocommerce Low cost as a proportion on the Sale Badge?

So, your Woocommerce sale product has a default badge with textual content “Sale”. With the snippet right here under, you’ll be able to show the Woocommerce low cost as a proportion on a sale badge. It additionally works with variable merchandise.

PS! If wanted then change or take away “as much as -” textual content within the line 51 of this code.

<span position="button" tabindex="0" data-code="// Show the Woocommerce Low cost Proportion on the Sale Badge for variable merchandise and single merchandise
add_filter( 'woocommerce_sale_flash', 'display_percentage_on_sale_badge', 20, 3 );
operate display_percentage_on_sale_badge( $html, $submit, $product ) {

if( $product->is_type('variable')){
$percentages = array();

// It will get all of the variation costs and loop all through them
$costs = $product->get_variation_prices();

foreach( $costs['price'] as $key => $value ){
// Solely on sale variations
if( $costs['regular_price'][$key] !== $value ){
// Calculate and set within the array the share for every variation on sale
$percentages[] = spherical( 100 – ( floatval($costs['sale_price'][$key]) / floatval($costs['regular_price'][$key]) * 100 ) );
}
}
// Shows most low cost worth
$proportion = max($percentages) . '%';

} elseif( $product->is_type('grouped') ){
$percentages = array();

// It will get all of the variation costs and loop all through them
$children_ids = $product->get_children();

foreach( $children_ids as $child_id ){
$child_product = wc_get_product($child_id);

$regular_price = (float) $child_product->get_regular_price();
$sale_price = (float) $child_product->get_sale_price();

if ( $sale_price != 0 || ! empty($sale_price) ) {
// Calculate and set within the array the share for every little one on sale
$percentages[] = spherical(100 – ($sale_price / $regular_price * 100));
}
}
// Shows most low cost worth
$proportion = max($percentages) . '%';

} else {
$regular_price = (float) $product->get_regular_price();
$sale_price = (float) $product->get_sale_price();

if ( $sale_price != 0 || ! empty($sale_price) ) {
$proportion = spherical(100 – ($sale_price / $regular_price * 100)) . '%';
} else {
return $html;
}
}
return '<span class="onsale perc">' . esc_html__( 'as much as -', 'woocommerce' ) . ' '. $proportion . '

// Show the Woocommerce Low cost Proportion on the Sale Badge for variable merchandise and single merchandise
add_filter( 'woocommerce_sale_flash', 'display_percentage_on_sale_badge', 20, 3 );
operate display_percentage_on_sale_badge( $html, $submit, $product ) {

  if( $product->is_type('variable')){
      $percentages = array();

      // It will get all of the variation costs and loop all through them
      $costs = $product->get_variation_prices();

      foreach( $costs['price'] as $key => $value ){
          // Solely on sale variations
          if( $costs['regular_price'][$key] !== $value ){
              // Calculate and set within the array the share for every variation on sale
              $percentages[] = spherical( 100 - ( floatval($costs['sale_price'][$key]) / floatval($costs['regular_price'][$key]) * 100 ) );
          }
      }
      // Shows most low cost worth
      $proportion = max($percentages) . '%';

  } elseif( $product->is_type('grouped') ){
      $percentages = array();

       // It will get all of the variation costs and loop all through them
      $children_ids = $product->get_children();

      foreach( $children_ids as $child_id ){
          $child_product = wc_get_product($child_id);

          $regular_price = (float) $child_product->get_regular_price();
          $sale_price    = (float) $child_product->get_sale_price();

          if ( $sale_price != 0 || ! empty($sale_price) ) {
              // Calculate and set within the array the share for every little one on sale
              $percentages[] = spherical(100 - ($sale_price / $regular_price * 100));
          }
      }
     // Shows most low cost worth
      $proportion = max($percentages) . '%';

  } else {
      $regular_price = (float) $product->get_regular_price();
      $sale_price    = (float) $product->get_sale_price();

      if ( $sale_price != 0 || ! empty($sale_price) ) {
          $proportion    = spherical(100 - ($sale_price / $regular_price * 100)) . '%';
      } else {
          return $html;
      }
  }
  return '<span class="onsale perc">' . esc_html__( 'as much as -', 'woocommerce' ) . ' '. $proportion . '</span>'; // If wanted then change or take away "as much as -" textual content
}

Now, if you want to customise the styling of this sale badge, then use this piece of CSS and the top outcome appears just like the one within the screenshot.

How to display custom product badges on WooCommerce?

Customized CSS for the sale badge (non-obligatory)

.onsale.perc:after {
	border: 5px strong #ffcc00;
border-color: clear clear #ffcc00 #ffcc00;
	border-width: 9px 6px;
	place: absolute;
	proper: -10px;
	backside: 0;
	content material: '';
}
.onsale.perc:earlier than {
border: 5px strong #ffcc00;
    border-color: #ffcc00 clear clear #ffcc00;
    border-width: 9px 6px;
    place: absolute;
    proper: -10px;
    high: 0;
    content material: '';
}
.onsale.perc {
	high: 16px;
	left: 0px;
}

Easy methods to show “New” badge for latest merchandise?

With the assistance of this piece of code right here under, you’ll be able to show “new” badge for merchandise which can be newer than 30 days. If you have to change variety of days then change quantity in line 6 and line 17 ( $newness_days = 30;)

Listen that this badge is proven each on archive and single product pages. In the event you don’t have to show it both right here or there, then simply take away the primary or second a part of the code.

<span position="button" tabindex="0" data-code="// New badge for latest merchandise (archive)
add_action( 'woocommerce_before_shop_loop_item_title', 'new_badge', 3 );

operate new_badge() {
international $product;
$newness_days = 30; // Variety of days the badge is proven
$created = strtotime( $product->get_date_created() );
if ( ( time() – ( 60 * 60 * 24 * $newness_days ) ) < $created ) {
echo '<span class="ct-woo-card-extra new-badge">' . esc_html__( 'NEW', 'woocommerce' ) . '</span>';
}
}

// New badge for latest merchandise on single product web page
add_action( 'woocommerce_single_product_summary', 'new_badge_single_product', 1 );
operate new_badge_single_product() {
international $product;
$newness_days = 30; // Variety of days the badge is proven
$created = strtotime( $product->get_date_created() );
if ( ( time() – ( 60 * 60 * 24 * $newness_days ) ) < $created ) {
echo '<span class="itsnew">' . esc_html__( 'NEW', 'woocommerce' ) . '

// New badge for latest merchandise (archive)
add_action( 'woocommerce_before_shop_loop_item_title', 'new_badge', 3 );
          
operate new_badge() {
   international $product;
   $newness_days = 30; // Variety of days the badge is proven
   $created = strtotime( $product->get_date_created() );
   if ( ( time() - ( 60 * 60 * 24 * $newness_days ) ) < $created ) {
      echo '<span class="ct-woo-card-extra new-badge">' . esc_html__( 'NEW', 'woocommerce' ) . '</span>';
   }
}

// New badge for latest merchandise on single product web page
add_action( 'woocommerce_single_product_summary', 'new_badge_single_product', 1 );  
operate new_badge_single_product() {
   international $product;
   $newness_days = 30; // Variety of days the badge is proven
   $created = strtotime( $product->get_date_created() );
   if ( ( time() - ( 60 * 60 * 24 * $newness_days ) ) < $created ) {
      echo '<span class="itsnew">' . esc_html__( 'NEW', 'woocommerce' ) . '</span>';
   }
}

Customized CSS for the brand new badge (see the feedback for archive and single product web page in code)

/* New badge in archive web page */
.ct-woo-card-extra.new-badge{
	place: absolute;
    background: #E54C60;
	coloration: #fff;
	font-weight: 700;
	text-transform: uppercase;
	border-radius: 50px;
	font-size: 10px;
	padding: 5px;
	proper: 15px;
	z-index: 2;
	show: flex;
    align-items: heart;
    justify-content: heart;
    width: 32px;
    peak: 32px;
	high: 110px;
}
/* New badge in single product web page web page */
.itsnew {
   background: #f37b21;
   padding: 5px 10px;
   font-size: 12px;
   font-weight: 600;
   coloration: #fff;
   margin-top: 15px;
   float: proper;
   high: 15px;
}

Easy methods to show featured product badge in Woocommerce?

Subsequent let’s add a featured product badge in Woocommerce. Which means if the product is about as “featured” then the badge is proven routinely each on class and single product web page. If you need to show it solely on one in every of these locations then take away different par of the code.

If you need to vary the label “featured” for anything, then change it on strains 17 and 38.

This needs to be the top outcome with low cost proportion badge, “new” badge and featured product badge.

How to display featured product badge in Woocommerce?

// Show featured product badge in Woocommerce archive web page
add_action( 'woocommerce_before_shop_loop_item_title', 'featured_badge_on_archive_pages', 10 );
// add_action( 'blocksy:woocommerce:product-card:title:earlier than', 'featured_badge_on_archive_pages', 1 );
operate featured_badge_on_archive_pages() {
    international $product;
    
    // Is a WC product
    if ( is_a( $product, 'WC_Product' ) ) {
        // Get productID
        $product_id = $product->get_id();
        
        // Returns an array containing the IDs of the featured merchandise.
        $featured_product_ids = wc_get_featured_product_ids();
        
        // Checks if a price exists in an array
        if ( in_array( $product_id, $featured_product_ids ) ) {
            echo '<span class="featured-badge">Featured</span>';
        } 
    }
}

// Show featured product badge in Woocommerce single product web page

add_action( 'woocommerce_single_product_summary', 'featured_badge_on_product_pages', 1 );
operate featured_badge_on_product_pages() {
    international $product;
    
    // Is a WC product
    if ( is_a( $product, 'WC_Product' ) ) {
        // Get productID
        $product_id = $product->get_id();
        
        // Returns an array containing the IDs of the featured merchandise.
        $featured_product_ids = wc_get_featured_product_ids();
        
        // Checks if a price exists in an array
        if ( in_array( $product_id, $featured_product_ids ) ) {
            echo '<span class="featured1">Featured</span>';
        } 
    }
}

Customized CSS for the featured product badge.

/* Woocommerce featured product badge on archive pages */
.featured-badge  {
	high: 20px;
	left: 0px;
	width: 100%;
	background: #1e1e1e99;
	coloration: #fff;
 show: flex;
  justify-content: heart;
	place: absolute;
	z-index: 1;
		font-size: 13px;
	text-transform: uppercase;
	font-weight: 600;
}
/* Woocommerce featured product badge in single product web page */
.featured1 {
	background: #fff000;
	coloration: #000;
	font-weight: 600;
	text-transform: uppercase;
	padding: 5px 10px;
  font-size: 12px;
	font-weight: 600;
margin-top: 15px;
	float: proper;
}

Easy methods to show {custom} product badges with checking a checkbox?

Subsequent, let’s add a checkbox at your single product edit web page. In the event you examine this then the textual content “Free transport” is proven on the one product web page under the title. See these screenshots right here under, and also you’ll see the way it can even show it for the badge we’re going to create within the subsequent chapter.

How to display custom product badges on WooCommerce?
How to display custom product badges on WooCommerce?

If you need to vary the textual content proven within the badge, then simply modify it in line 34. Additionally, change the textual content in strains 7 and 9 accordingly.

Now, let’s show {custom} product badges with checking a checkbox.

<span position="button" tabindex="0" data-code="// Step 1: Add checkbox

add_action( 'woocommerce_product_options_general_product_data', 'checkbox_badge' );

operate checkbox_badge() {
woocommerce_wp_checkbox( array(
'id' => 'checkbox_badge',
'class' => '',
'label' => 'Show free transport badge'
)
);
}

// Step 2: Save checkbox choice

add_action( 'save_post', 'save_checkbox_badge_selection' );

operate save_checkbox_badge_selection( $product_id ) {
if ( outlined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
return;
if ( isset( $_POST['checkbox_badge'] ) ) {
update_post_meta( $product_id, 'checkbox_badge', $_POST['checkbox_badge'] );
} else delete_post_meta( $product_id, 'checkbox_badge' );
}

// Step 3: Show {custom} badge at single product web page

add_action( 'woocommerce_single_product_summary', 'display_checkbox_badge', 7 );

operate display_checkbox_badge() {
international $product;
if ( get_post_meta( $product->get_id(), 'checkbox_badge', true ) ) {
echo '
<div class="custom-badge-1">Free transport

// Step 1: Add checkbox 

add_action( 'woocommerce_product_options_general_product_data', 'checkbox_badge' );        
  
operate checkbox_badge() {           
woocommerce_wp_checkbox( array( 
'id' => 'checkbox_badge', 
'class' => '', 
'label' => 'Show free transport badge'
) 
);      
}

// Step 2: Save checkbox choice
  
add_action( 'save_post', 'save_checkbox_badge_selection' );
  
operate save_checkbox_badge_selection( $product_id ) {
    if ( outlined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
        return;
    if ( isset( $_POST['checkbox_badge'] ) ) {
            update_post_meta( $product_id, 'checkbox_badge', $_POST['checkbox_badge'] );
    } else delete_post_meta( $product_id, 'checkbox_badge' );
}

// Step 3: Show {custom} badge at single product web page
  
add_action( 'woocommerce_single_product_summary', 'display_checkbox_badge', 7 );
  
operate display_checkbox_badge() {
    international $product;     
    if ( get_post_meta( $product->get_id(), 'checkbox_badge', true ) ) {
        echo '
<div class="custom-badge-1">Free transport</div>'; // Change this textual content if wanted
    }
}

Customized CSS for the product badge.

/* Show {custom} product badges with checking a checkbox */
.custom-badge-1 {
  font-size: 13px;
	coloration: #fff;
	font-weight: 600;
	background: #E54C60;
	border: 2px strong #E54C60;
	text-align: heart;
	padding: 7px;
	show: inline;
}
.entry-summary .value {
	margin-top: 1em;
}

Easy methods to show Woocommerce product badge with {custom} textual content?

Final badge we’re going to create as we speak is the one that permits us to show Woocommerce product badge with {custom} textual content. It would add a textual content field inside your product edit web page (see the screenshot above) and can show the textual content you entered on single product web page.

<span position="button" tabindex="0" data-code="// Show Fields
add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_fields' );

// Save Fields
add_action( 'woocommerce_process_product_meta', 'woo_add_custom_fields_save' );

operate woo_add_custom_fields() {

international $woocommerce, $submit;

echo '<div class="options_group">';

// Show Woocommerce product badge field in product edit web page
woocommerce_wp_text_input(
array(
'id' => '_text_field',
'label' => __( 'Badge textual content', 'woocommerce' ),
'placeholder' => 'Enter your badge textual content right here',
'desc_tip' => 'true',
'description' => __( 'Enter your badge textual content right here', 'woocommerce' )
)
);
echo '</div>';
}
operate woo_add_custom_fields_save( $post_id ){
// Textual content Area
$woocommerce_text_field = $_POST['_text_field'];
if(!empty( $woocommerce_text_field )) {
update_post_meta( $post_id, '_text_field', esc_attr( $woocommerce_text_field ) );
} else {
update_post_meta( $post_id, '_text_field', "" );
}
}

// Show Woocommerce product badge with {custom} textual content in single product web page
add_action('woocommerce_single_product_summary', 'display_custom_field_value', 7 );
operate display_custom_field_value(){
$worth = get_post_meta( get_the_ID(), '_text_field', true);
if(strlen($worth) != null && strlen($worth) > 0) {
echo '<div class="custom-badge">'.get_post_meta( get_the_ID(), '_text_field', true ).'

// Show Fields
add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_fields' );

// Save Fields
add_action( 'woocommerce_process_product_meta', 'woo_add_custom_fields_save' );

operate woo_add_custom_fields() {

  international $woocommerce, $submit;
  
  echo '<div class="options_group">';
  
 // Show Woocommerce product badge field in product edit web page
woocommerce_wp_text_input( 
	array( 
		'id'          => '_text_field', 
		'label'       => __( 'Badge textual content', 'woocommerce' ), 
		'placeholder' => 'Enter your badge textual content right here',
		'desc_tip'    => 'true',
		'description' => __( 'Enter your badge textual content right here', 'woocommerce' ) 
	)
); 
  echo '</div>';	
}
operate woo_add_custom_fields_save( $post_id ){
	// Textual content Area
	$woocommerce_text_field = $_POST['_text_field'];
  if(!empty( $woocommerce_text_field )) {
	update_post_meta( $post_id, '_text_field', esc_attr( $woocommerce_text_field ) );
  } else {
	update_post_meta( $post_id, '_text_field', "" );
  }
}

// Show Woocommerce product badge with {custom} textual content in single product web page
add_action('woocommerce_single_product_summary', 'display_custom_field_value', 7 );
operate display_custom_field_value(){
  $worth = get_post_meta( get_the_ID(), '_text_field', true);
  if(strlen($worth) != null && strlen($worth) > 0) {
	echo '<div class="custom-badge">'.get_post_meta( get_the_ID(), '_text_field', true ).'</div>';
  }
}

Customized CSS for the badge

/* Show Woocommerce product badge with {custom} textual content in single product web page */
.custom-badge {
  font-size: 13px;
	coloration: #1e1e1e;
	font-weight: 600;
	border: 2px dashed #ddd;
	background: #f9f9f9;
	padding: 7px;
	show: inline;
	margin-left: 10px;
}
.entry-summary .value {
	margin-top: 1em;
}

So, there you go. Now you understand how to create {custom} product badges and show then in a manner you want.

Helpful Woocommerce suggestions

  • Easy methods to filter WooCommerce admin merchandise by on sale?
  • Woocommerce – Disable Fee Strategies Primarily based on Consumer Roles
  • Easy methods to promote tickets with Woocommerce?
  • 12 helpful Woocommerce snippets & hacks
  • Easy methods to show Woocommerce retailer handle for Native pickup transport methodology?
  • Easy methods to Conceal Woocommerce transport strategies for particular transport lessons?
  • Easy methods to rename, take away, reorder and add Woocommerce My Account tabs?

Related Posts

Leave a Comment

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

Shopping Cart
Scroll to Top