Adding custom fields to your WooCommerce products on a WordPress site can greatly enhance your online store’s functionality and user experience. If you’re not very tech-savvy, don’t worry! Here’s a straightforward guide on how to add custom fields like “Badge Text,” “Display Start Date,” and “Display End Date” using the Code Snippets plugin. This way, you can manage special promotions or display unique messages on your product pages without touching a single line of code directly in your theme files.
What You’ll Need
- A WordPress site with WooCommerce installed.
- The Code Snippets plugin is installed on your WordPress site.
Video: How to Create Custom Date-Specific WooCommerce Product Badges?
1. Install the Code Snippets Plugin
First off, if you haven’t already installed the Code Snippets plugin, here’s how to do it:
- Go to your WordPress dashboard.
- Navigate to Plugins > Add New.
- Search for Code Snippets.
- Click Install Now and then activate the plugin.
There is also a WpCodeBox plugin, which is my favorite code snippets manager for WordPress. This is a premium plugin and if you’re interested, then grab WPCodeBox with a nice 20% discount here (SAVE 20% Coupon WPSH20).
Why Use Code Snippets?
Using the Code Snippets plugin is a safe way to add custom code to your WordPress site. It prevents any potential errors that might break your site if you were to directly edit the theme files. Plus, it’s super convenient to manage all your custom code snippets in one place!
2. Create a New Snippet
With the Code Snippets plugin active, you’re going to create a new snippet that will add these custom fields to your products:
- In your WordPress dashboard, go to Snippets > Add New.
- You’ll see a field to enter a title for your snippet. Name it something relevant like “Add Custom Fields to WooCommerce Products”.
3. Copy and Paste the Code
Now, in the large text area below the title:
Copy and paste the entire code you provided here below. This code is what tells WooCommerce to add new fields for badge text and start/end dates, and also how to save and display these fields on your products.
// Add custom fields to WooCommerce backend under General tab
add_action( 'woocommerce_product_options_general_product_data', 'wpsh_add_text_field_below_sale_price' );
function wpsh_add_text_field_below_sale_price() {
global $product_object;
// Original custom field
woocommerce_wp_text_input( array(
'id' => '_badge',
'label' => __( 'Badge text', 'woocommerce' ),
'description' => __( 'Enter your pduct badge text here', 'woocommerce' ),
'desc_tip' => 'true',
'type' => 'text',
'value' => $product_object->get_meta( '_badge' ),
) );
// Start date field
woocommerce_wp_text_input( array(
'id' => '_start_date',
'label' => __( 'Dislay start date', 'woocommerce' ),
'placeholder' => 'YYYY-MM-DD',
'description' => __( 'Enter the start date of the badge display', 'woocommerce' ),
'type' => 'date',
'value' => $product_object->get_meta( '_start_date' ),
'custom_attributes' => array(
'pattern' => 'd{4}-d{2}-d{2}',
),
) );
// End date field
woocommerce_wp_text_input( array(
'id' => '_end_date',
'label' => __( 'Display end date', 'woocommerce' ),
'placeholder' => 'YYYY-MM-DD',
'description' => __( 'Enter the start date of the badge displayv', 'woocommerce' ),
'type' => 'date',
'value' => $product_object->get_meta( '_end_date' ),
'custom_attributes' => array(
'pattern' => 'd{4}-d{2}-d{2}',
),
) );
}
// Save custom field values including dates for all product types
add_action( 'woocommerce_admin_process_product_object', 'wpsh_save_field', 10, 1 );
function wpsh_save_field( $product ) {
if ( isset( $_POST['_badge'] ) ) {
$product->update_meta_data( '_badge', sanitize_text_field( $_POST['_badge'] ) );
}
if ( isset( $_POST['_start_date'] ) ) {
$product->update_meta_data( '_start_date', sanitize_text_field( $_POST['_start_date'] ) );
}
if ( isset( $_POST['_end_date'] ) ) {
$product->update_meta_data( '_end_date', sanitize_text_field( $_POST['_end_date'] ) );
}
$product->save();
}
// Adjust display logic on single product and archive pages
function wpsh_should_display_custom_field($start_date, $end_date, $text) {
$current_date = date('Y-m-d');
if (empty($start_date) && empty($end_date) && !empty($text)) {
return true;
} elseif (!empty($start_date) && empty($end_date) && $current_date >= $start_date) {
return true;
} elseif (empty($start_date) && !empty($end_date) && $current_date <= $end_date) {
return true;
} elseif (!empty($start_date) && !empty($end_date) && $current_date >= $start_date && $current_date <= $end_date) {
return true;
}
return false;
}
add_action( 'woocommerce_before_add_to_cart_form', 'wpsh_display_on_single_product_page', 1 );
function wpsh_display_on_single_product_page() {
global $product;
if ( is_a( $product, 'WC_Product' ) ) {
$text = $product->get_meta( '_badge' );
$start_date = $product->get_meta( '_start_date' );
$end_date = $product->get_meta( '_end_date' );
if ( wpsh_should_display_custom_field($start_date, $end_date, $text) ) {
echo '<div class="woocommerce-message"> ' . $text . '</div>';
}
}
}
add_action( 'blocksy:woocommerce:product-card:title:after', 'wpsh_display_on_archive_page', 10 );
function wpsh_display_on_archive_page() {
global $product;
if ( is_a( $product, 'WC_Product' ) ) {
$text = $product->get_meta( '_badge' );
$start_date = $product->get_meta( '_start_date' );
$end_date = $product->get_meta( '_end_date' );
if (wpsh_should_display_custom_field($start_date, $end_date, $text)) {
echo '<div class="custom-text"> ' . $text . '</div>';
}
}
}4. Review and Activate
Before activating the snippet, make sure everything looks right. There’s a description box below the code area where you can note what this snippet does (though this is optional). When ready:
- Click the Save Changes and Activate button at the bottom of the page.
5. Test It Out
Go to any product in your WooCommerce store (Products > All Products > Edit a product), and scroll down to the Product Data section. Under the General tab, you should now see your new fields for badge text and dates.
This is the result:
6. Adding Dates and Badges
When editing or adding a new product:
- You can enter a badge text that might say something like “New Arrival” or “Limited Edition”.
- Set a start and an end date for when this badge should be displayed on the product page.
Wrap-Up
And that’s pretty much it! You’ve now added custom fields to your WooCommerce products without any complex coding. Go ahead and give your products that personal touch with custom badge texts and date-specific notes. If you ever need to turn off these features temporarily, you can simply deactivate the snippet in the Code Snippets dashboard. Simple as that!
If you have any questions or need further assistance, don’t hesitate to reach out or consult the detailed documentation available for the Code Snippets plugin and WooCommerce. Happy selling!
