Black Friday & Cyber Monday SUPER SALE ALL WEEK:
Grab 40% OFF on plugins
Days
Hours
Minutes
Seconds

How to Create Custom Date-Specific WooCommerce Product Badges?

In WooCommerce, custom product badges are used to highlight specific promotions, limited-time offers, or product features. To make these badges even more dynamic, you can set them to appear only during specific date ranges. For instance, if you’re running a special promotion or introducing a new product, you can set a ‘NEW’ product badge to display only between January 1st and January 4th, ensuring that the badge only appears during the promotional period.


This guide walks you through adding custom fields for product badges and you can also know how to configure these fields so that the badge text only appears on the product page when the current date falls within the specified date range.

Solution: Create Custom Date-Specific WooCommerce Product Badges

The code snippet adds custom fields to the WooCommerce product editor, allowing the admin to specify the badge text, start date, and end date for displaying the product badge on the frontend.

// Add custom fields for product badges in the WooCommerce product editor
add_action( 'woocommerce_product_options_general_product_data', 'ts_add_date_specific_product_badge_fields' );

function ts_add_date_specific_product_badge_fields() {
    global $product_object;

    // Badge text field
    woocommerce_wp_text_input( array(
        'id'            => '_badge_text',
        'label'         => __( 'Badge Text', 'woocommerce' ),
        'description'   => __( 'Enter the badge text to display on the product page.', 'woocommerce' ),
        'desc_tip'      => true,
        'type'          => 'text',
        'value'         => $product_object->get_meta( '_badge_text' ),
    ) );

    // Start date field
    woocommerce_wp_text_input( array(
        'id'            => '_badge_start_date',
        'label'         => __( 'Badge Start Date', 'woocommerce' ),
        'placeholder'   => 'YYYY-MM-DD',
        'description'   => __( 'Enter the start date for the badge display.', 'woocommerce' ),
        'type'          => 'date',
        'value'         => $product_object->get_meta( '_badge_start_date' ),
    ) );

    // End date field
    woocommerce_wp_text_input( array(
        'id'            => '_badge_end_date',
        'label'         => __( 'Badge End Date', 'woocommerce' ),
        'placeholder'   => 'YYYY-MM-DD',
        'description'   => __( 'Enter the end date for the badge display.', 'woocommerce' ),
        'type'          => 'date',
        'value'         => $product_object->get_meta( '_badge_end_date' ),
    ) );
}
// Save custom field values for badge text, start date, and end date
add_action( 'woocommerce_admin_process_product_object', 'ts_save_date_specific_badge_fields' );

function ts_save_date_specific_badge_fields( $product ) {
    if ( isset( $_POST['_badge_text'] ) ) {
        $product->update_meta_data( '_badge_text', sanitize_text_field( $_POST['_badge_text'] ) );
    }
    if ( isset( $_POST['_badge_start_date'] ) ) {
        $product->update_meta_data( '_badge_start_date', sanitize_text_field( $_POST['_badge_start_date'] ) );
    }
    if ( isset( $_POST['_badge_end_date'] ) ) {
        $product->update_meta_data( '_badge_end_date', sanitize_text_field( $_POST['_badge_end_date'] ) );
    }
    $product->save();
}
add_action( 'woocommerce_before_add_to_cart_form', 'ts_display_date_specific_badge_on_product_page', 1 );

function ts_display_date_specific_badge_on_product_page() {
    global $product;
    if ( is_a( $product, 'WC_Product' ) ) {
        $badge_text = $product->get_meta( '_badge_text' );
        $start_date = $product->get_meta( '_badge_start_date' );
        $end_date = $product->get_meta( '_badge_end_date' );

        // Get the current date in Y-m-d format
        $current_date = date( 'Y-m-d' );

        // If badge text exists
        if ( !empty( $badge_text ) ) {
            // If both start date and end date are not set, or the current date is within the specified range
            if (
                (empty( $start_date ) && empty( $end_date )) || // No start or end date, always show the badge
                ( !empty( $start_date ) && $current_date >= $start_date ) && // Start date is set and current date is after or equal to it
                ( !empty( $end_date ) && $current_date <= $end_date ) || // End date is set and current date is before or equal to it
                ( !empty( $start_date ) && !empty( $end_date ) && $current_date >= $start_date && $current_date <= $end_date ) // Both dates are set and current date is within the range
            ) {
                // Display the badge
                echo '<div class="woocommerce-message badge-text">' . esc_html( $badge_text ) . '</div>';
            }
        }
    }
}
flexi bogo cta banner image


This to the shop owners who are running or planning to run BOGO offers on their WooCommerce store…

BOGO deals are great for increasing your sales, but have you thought about which offers are bringing you more revenue and which offers are not performing that great?

Don’t just set a BOGO deal, track the revenue generated by your deals in real-time with the Flexi BOGO for WooCommerce plugin.

Output

The custom fields, including ‘Badge Text’, ‘Badge Start Date’, and ‘Badge End Date’, will be added to the WooCommerce product editor. The ‘Badge Text’ entered in the respective field will be displayed on the product page only if the current date falls within the specified ‘Start Date’ and ‘End Date’.

How to Create Custom Date-Specific WooCommerce Product Badges? - Tyche Softwares

When the customer visits the product page, the badge will be displayed on the product page, above the add-to-cart form, if the current date falls within the specified date range.


 WooCommerce Product Badges

For even more impactful communication, consider tweaking the default WooCommerce sale badges to display discount percentages on the shop page. This provides customers with precise information about their savings, further encouraging purchases. If you’re looking to achieve this, check out our guide on displaying the discount percentage on WooCommerce sale badges on shop page in WooCommerce.

Browse more in: Code Snippets, WooCommerce How Tos, WooCommerce Tutorials

Share It:

Subscribe
Notify of
0 Comments
Newest
Oldest
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x