WooCommerce: Display Custom Product Badge (Conditionally)

There are many plugins out there to show custom badges, notices, messages… but as usual a few lines of PHP can help you achieve the same result!

Today we take a look at how to add a checkbox to the product edit page, so that you can display a conditional badge based on whether the checkbox is checked or not.

Have fun 🙂

Part 1 – PHP Snippet: Display Checkbox @ Product Edit Page

First we need to create a new checkbox which will give us control over showing the badge or not. This is pretty simple to do. The only difficult thing is to make sure we “save” the checkbox value in the post meta, so that in Part 2 we can check if the checkbox is checked or not.

/**
 * @snippet       Checkbox to display Custom Product Badge Part 1 - WooCommerce
 * @how-to        Get tutoraspire.com FREE
 * @source        https://tutoraspire.com/?p=73566
 * @author        Tutor Aspire
 * @testedwith    Woo 3.5.1
 * @donate $9     https://www.tutoraspire.com
 */
 
// -----------------------------------------
// 1. Add new checkbox to product edit page (General tab)
 
add_action( 'woocommerce_product_options_general_product_data', 'tutoraspire_add_badge_checkbox_to_products' );        
 
function tutoraspire_add_badge_checkbox_to_products() {           
woocommerce_wp_checkbox( array( 
'id' => 'custom_badge', 
'class' => '', 
'label' => 'Show Custom Badge'
) 
);      
}
 
// -----------------------------------------
// 2. Save checkbox via custom field
 
add_action( 'save_post', 'tutoraspire_save_badge_checkbox_to_post_meta' );
 
function tutoraspire_save_badge_checkbox_to_post_meta( $product_id ) {
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
        return;
    if ( isset( $_POST['custom_badge'] ) ) {
            update_post_meta( $product_id, 'custom_badge', $_POST['custom_badge'] );
    } else delete_post_meta( $product_id, 'custom_badge' );
}

Final result:

Part 2 – PHP Snippet: Display Badge @ Single Product Page

/**
 * @snippet       Checkbox to display Custom Product Badge Part 2 - WooCommerce
 * @how-to        Get tutoraspire.com FREE
 * @source        https://tutoraspire.com/?p=73566
 * @author        Tutor Aspire
 * @compatible    Woo 3.5.1
 * @donate $9     https://www.tutoraspire.com
 */
 
// -----------------------------------------
// 3. Display badge @ single product page if checkbox checked
 
add_action( 'woocommerce_single_product_summary', 'tutoraspire_display_badge_if_checkbox', 6 );
 
function tutoraspire_display_badge_if_checkbox() {
    global $product;     
    if ( get_post_meta( $product->get_id(), 'custom_badge', true ) ) {
        echo '
CUSTOM BADGE!

';
    }
}

Final result:

“I don’t code – is there a reliable plugin for that?”

As many readers would love to code but don’t feel 100% confident with it, I decided to look for a reliable plugin that achieves the same (or even better) result.

In this case, I recommend the YITH WooCommerce Badge Management plugin. On top of displaying custom text badges (free version), you can also create CSS, image and advanced badges, assign product badges to specific products and/or categories, pick the badge position and much more.

But in case you wish to code, keep reading 🙂