Add custom field in woocommerce products for admin and visitors

WooCommerce is a versatile e-commerce platform for WordPress that allows you to create online stores with unique product offerings. While there are many plugins available to extend WooCommerce’s functionality, you can also add custom fields to your products without relying on third-party plugins. This guide will walk you through the process of adding custom fields to WooCommerce products directly through code. We’ll provide instructions for both the admin and front-end display of these custom fields.

Adding Custom Fields to WooCommerce Products: A Code-Based Approach

1. Prepare Your Child Theme:

Before you start adding custom fields, ensure that you’re working with a child theme. Modifying the parent theme’s functions.php file directly is not recommended, as your changes could be lost during theme updates. Create a child theme if you haven’t already, and activate it.

2. Admin-Side Custom Fields:

To add custom fields for your WooCommerce products on the admin side, follow these steps:

Step 1: Open functions.php Navigate to your child theme’s directory and open the functions.php file for editing.

Step 2: Add the Custom Field Code In your functions.php file, add the code for creating custom fields. You can use WordPress action hooks like woocommerce_product_options_general_product_data to add custom fields to the product edit screen. Here’s an example of how to add a “Warranty Information” custom field:

// Display Fields
add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields');

// Add Fields to General Tab in Product Data
function woocommerce_product_custom_fields(){
    global $woocommerce, $post;
    $defaultisbn = get_post_meta($post->ID, '_isbn', true);
    
    // Output HTML code within PHP
    echo '<div class="product_custom_fields">';
    
    // Custom Product Text Field
    woocommerce_wp_text_input(array( 
        'id' => '_isbn', 
        'placeholder' => 'ISBN', 
        'label' => __('ISBN', 'woocommerce'), 
        'desc_tip' => 'true' 
    ));
    
    echo '</div>';
}

Now let’s make sure the data we add in the custom text field are saved every time we press the Update button. By hooking to “woocommerce_process_product_meta”, we can achieve the desired result:

add_action('woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save');
function woocommerce_product_custom_fields_save($post_id){
// Custom Product Text Field
$woocommerce_custom_product_text_field = ! empty( $_POST['_isbn'] ) ? sanitize_text_field( $_POST['_isbn'] ) : '';
update_post_meta($post_id, '_isbn', $woocommerce_custom_product_text_field);
}

3. Frond-end Custom Fields on product page:

Now that we have the custom field meta saved in our product, we can show it on the frond-end. The below code will display the “ISBN” custom field on the product page, right below the product’s short description:

add_action( 'woocommerce_single_product_summary', 'print_isbn_after_short_desc', 16 );
function print_isbn_after_short_desc() {
global $product;
$product_id = $product->get_id(); // The product ID
$isbnvalue = get_post_meta($product_id, '_isbn', true);
// Displaying your custom field under the title
echo '<p class="book-author product-page-isbn">ISBN: <span style="font-weight: bold; color: #7a9c59;"> ' . esc_html($isbnvalue) . '</span></p>'; 
}

The end result we get is the following:

Use Custom Fields in Woocommerce!

The possibilities for enhancing your WooCommerce product pages with custom fields are indeed limitless.We’ve explored how to add a custom text field using code, providing you with a foundation to expand your product information capabilities. However, the customization journey doesn’t end here. WooCommerce offers a wide range of field types, such as dropdowns, checkboxes, and radio buttons, allowing you to capture and present even more product-specific information.

By harnessing these tools, you can create a seamless and informative shopping experience for your customers. Whether you want to display additional product details like ISBN numbers, warranty information, or any other unique attributes, WooCommerce’s flexibility empowers you to tailor your online store to meet your exact needs. So, don’t hesitate to explore the world of custom fields in WooCommerce and unlock new dimensions of product presentation and customer engagement on your e-commerce platform. With creativity and a little bit of code, you can truly make your online store stand out.