Including {custom} fields to your WooCommerce merchandise on a WordPress website can drastically improve your on-line retailer’s performance and person expertise. When you’re not very tech-savvy, don’t fear! Right here’s an easy information on add {custom} fields like “Badge Textual content,” “Show Begin Date,” and “Show Finish Date” utilizing the Code Snippets plugin. This manner, you may handle particular promotions or show distinctive messages in your product pages with out touching a single line of code straight in your theme recordsdata.
What You’ll Want
- A WordPress website with WooCommerce put in.
- The Code Snippets plugin is put in in your WordPress website.
Video: Methods to Create Customized Date-Particular WooCommerce Product Badges?
1. Set up the Code Snippets Plugin
First off, if you happen to haven’t already put in the Code Snippets plugin, right here’s do it:
- Go to your WordPress dashboard.
- Navigate to Plugins > Add New.
- Seek for Code Snippets.
- Click on Set up Now after which activate the plugin.
There’s additionally a WpCodeBox plugin, which is my favourite code snippets supervisor for WordPress. It is a premium plugin and if you happen to’re , then seize WPCodeBox with a pleasant 20% low cost right here (SAVE 20% Coupon WPSH20).
Why Use Code Snippets?
Utilizing the Code Snippets plugin is a protected approach so as to add {custom} code to your WordPress website. It prevents any potential errors which may break your website if you happen to had been to straight edit the theme recordsdata. Plus, it’s tremendous handy to handle all of your {custom} code snippets in a single place!
2. Create a New Snippet
With the Code Snippets plugin energetic, you’re going to create a brand new snippet that may add these {custom} fields to your merchandise:
- In your WordPress dashboard, go to Snippets > Add New.
- You’ll see a area to enter a title on your snippet. Identify it one thing related like “Add Customized Fields to WooCommerce Merchandise”.
3. Copy and Paste the Code
Now, within the giant textual content space under the title:
Copy and paste the complete code you offered right here under. This code is what tells WooCommerce so as to add new fields for badge textual content and begin/finish dates, and likewise save and show these fields in your merchandise.
// Add {custom} fields to WooCommerce backend beneath Basic tab
add_action( 'woocommerce_product_options_general_product_data', 'wpsh_add_text_field_below_sale_price' );
perform wpsh_add_text_field_below_sale_price() {
international $product_object;
// Authentic {custom} area
woocommerce_wp_text_input( array(
'id' => '_badge',
'label' => __( 'Badge textual content', 'woocommerce' ),
'description' => __( 'Enter your pduct badge textual content right here', 'woocommerce' ),
'desc_tip' => 'true',
'sort' => 'textual content',
'worth' => $product_object->get_meta( '_badge' ),
) );
// Begin date area
woocommerce_wp_text_input( array(
'id' => '_start_date',
'label' => __( 'Dislay begin date', 'woocommerce' ),
'placeholder' => 'YYYY-MM-DD',
'description' => __( 'Enter the beginning date of the badge show', 'woocommerce' ),
'sort' => 'date',
'worth' => $product_object->get_meta( '_start_date' ),
'custom_attributes' => array(
'sample' => 'd{4}-d{2}-d{2}',
),
) );
// Finish date area
woocommerce_wp_text_input( array(
'id' => '_end_date',
'label' => __( 'Show finish date', 'woocommerce' ),
'placeholder' => 'YYYY-MM-DD',
'description' => __( 'Enter the beginning date of the badge displayv', 'woocommerce' ),
'sort' => 'date',
'worth' => $product_object->get_meta( '_end_date' ),
'custom_attributes' => array(
'sample' => 'd{4}-d{2}-d{2}',
),
) );
}
// Save {custom} area values together with dates for all product sorts
add_action( 'woocommerce_admin_process_product_object', 'wpsh_save_field', 10, 1 );
perform 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();
}
// Modify show logic on single product and archive pages
perform wpsh_should_display_custom_field($start_date, $end_date, $textual content) {
$current_date = date('Y-m-d');
if (empty($start_date) && empty($end_date) && !empty($textual content)) {
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 );
perform wpsh_display_on_single_product_page() {
international $product;
if ( is_a( $product, 'WC_Product' ) ) {
$textual content = $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, $textual content) ) {
echo '<div class="woocommerce-message"> ' . $textual content . '</div>';
}
}
}
add_action( 'blocksy:woocommerce:product-card:title:after', 'wpsh_display_on_archive_page', 10 );
perform wpsh_display_on_archive_page() {
international $product;
if ( is_a( $product, 'WC_Product' ) ) {
$textual content = $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, $textual content)) {
echo '<div class="custom-text"> ' . $textual content . '</div>';
}
}
}4. Overview and Activate
Earlier than activating the snippet, make certain all the pieces appears to be like proper. There’s an outline field under the code space the place you may notice what this snippet does (although that is non-obligatory). When prepared:
- Click on the Save Adjustments and Activate button on the backside of the web page.
5. Check It Out
Go to any product in your WooCommerce retailer (Merchandise > All Merchandise > Edit a product), and scroll right down to the Product Information part. Underneath the Basic tab, you must now see your new fields for badge textual content and dates.
That is the consequence:
6. Including Dates and Badges
When enhancing or including a brand new product:
- You possibly can enter a badge textual content which may say one thing like “New Arrival” or “Restricted Version”.
- Set a begin and an finish date for when this badge ought to be displayed on the product web page.
Wrap-Up
And that’s just about it! You’ve now added {custom} fields to your WooCommerce merchandise with none complicated coding. Go forward and provides your merchandise that private contact with {custom} badge texts and date-specific notes. When you ever want to show off these options quickly, you may merely deactivate the snippet within the Code Snippets dashboard. Easy as that!
In case you have any questions or want additional help, don’t hesitate to succeed in out or seek the advice of the detailed documentation accessible for the Code Snippets plugin and WooCommerce. Pleased promoting!
