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 🙂

Display a custom Product badge on the WooCommerce Single Product Page

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 CustomizeWoo.com FREE
 * @source        https://businessbloomer.com/?p=73566
 * @author        Rodolfo Melogli
 * @testedwith    Woo 3.5.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
// -----------------------------------------
// 1. Add new checkbox to product edit page (General tab)
 
add_action( 'woocommerce_product_options_general_product_data', 'bbloomer_add_badge_checkbox_to_products' );        
 
function bbloomer_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', 'bbloomer_save_badge_checkbox_to_post_meta' );
 
function bbloomer_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:

Display a checkbox to enable/disable the WooCommerce Product badge

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


/**
 * @snippet       Checkbox to display Custom Product Badge Part 2 - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @source        https://businessbloomer.com/?p=73566
 * @author        Rodolfo Melogli
 * @compatible    Woo 3.5.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
// -----------------------------------------
// 3. Display badge @ single product page if checkbox checked
 
add_action( 'woocommerce_single_product_summary', 'bbloomer_display_badge_if_checkbox', 6 );
 
function bbloomer_display_badge_if_checkbox() {
    global $product;     
    if ( get_post_meta( $product->get_id(), 'custom_badge', true ) ) {
        echo '
<div class="woocommerce-message">CUSTOM BADGE!</div>

';
    }
}

Final result:

Display a custom Product badge on the WooCommerce Single Product Page

“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 🙂

Share:

Leave a Reply