What Are Custom Fields?

Custom fields are additional data fields that you can add to your WooCommerce products to display additional information. In addition, these fields can store extra product information. This includes details like manufacturer info, product reviews, additional SKU data, or any other custom data.

Furthermore, these fields allow you to gather additional information from the customer. For example, if you own a fabric store, you might want customers to choose how the fabric should be packaged, either on a roll or flat folded.

In the same way, another example could be letting the customer enter a message to be printed onto the product. By adding custom fields, you can enhance the functionality of your store and improve the user experience by providing more detailed product information or options.

Custom Fields vs Product Attributes: Key Differences

At first glance, you might think there’s no need for custom fields. After all, product information can be displayed using the built-in WooCommerce product attribute functionality.y

However, custom fields and product attributes serve different purposes. Attributes are for variations, while custom fields handle unique data.

Understanding Product Attributes in WooCommerce

Attributes ( also called Taxonomies) are used to group products similarly to categories. This helps shoppers filter products easily based on specific attributes.

WooCommerce includes two default taxonomies: product categories and tags. Moreover, attributes let you create unlimited custom taxonomies. This helps in grouping and filtering products more effectively.

Examples of Use:

  • Size: Small, Medium, Large
  • Color: Red, Blue, Green
  • Material: Cotton, Polyester, Leather

Primary Functions:

  1. Product Variations: Attributes can be used to create variations of a product. For example, a T-shirt may be available in different sizes and colors.
  2. Filtering and Sorting: Customers can filter products by attributes in your store’s sidebar or on category pages. Similarly, users can filter products by selecting only “Blue” or “Large” items.
  3. Structured Data: Attributes help in organizing your products better and providing structured data, which can enhance your store’s SEO.

What Are Custom Fields and Their Uses

In simple terms, custom fields (also called post meta) let you store extra product data. They’re helpful when standard WooCommerce fields aren’t enough.

Examples of Use:

  • SKU (Stock Keeping Unit):  Stock Keeping Unit is a unique identifier used for each product.
  • Manufacturer: Information about the product’s manufacturer.
  • Release Date: Date when the product was launched.

Primary Functions:

  1. Additional Information: Custom fields allow you to add any extra data to your product that doesn’t fit into the standard WooCommerce fields.
  2. Personalized Content: They enable you to display personalized content on product pages, like custom messages or specifications.
  3. Advanced Customization: In terms of customization, developers often use custom fields for advanced features. These include connecting third-party services or showing dynamic content..

Benefits of Adding Custom Fields to Your WooCommerce Store

  1. Enhanced Product Information: Provide more detailed product descriptions and specifications.
  2. Improved Customer Experience: Allow customers to input specific information for personalized products.
  3. Better Inventory Management: Include additional internal data to streamline your operations.
  4. SEO Benefits: Add keyword-rich information to boost your product pages’ search engine rankings.

Methods to Add Custom Fields to WooCommerce Products

There are several ways to add custom fields to your WooCommerce products. Ultimately, the method you choose depends on your goal. It also depends on what kind of functionality you expect from the custom field. For example,  do you want the customer to enter custom information? Or are you just using the field to display extra product details?

Adding Custom Fields Without User Interaction (Display-Only)

Method 1: Using Advanced Custom Fields Plugin

Plugins can offer a user-friendly way to extend WooCommerce functionality without needing to code.

Recommended Plugin: Advanced Custom Fields (ACF).

This plugin is probably the best plugin available for this task and makes adding custom fields to products a simple process.

  1. Install and Activate ACF:
    • Navigate to Plugins > Add New and search for “Advanced Custom Fields.”
    • Install and activate the plugin.
  2. Create a Custom Field Group:
    • Go to Custom Fields > Add New.
    • Create a new field group and add fields as needed. For example, you can add a text field labeled “Product SKU.” You could also use a textarea for “Custom Notes.”
  3. Configure Field Group Location:
    • Under the “Location” settings, set rules to show these fields on the product edit page. For instance, display them if “Post Type” is equal to “Product.”
  4. Add Custom Fields to Products:

    • Once you edit a product, you’ll see the new custom fields in the product data section. Fill them in and save the product.

You can find more information on the great ACF documentation available here

Display the Custom Field on the product page.

After creating the custom field using the ACF plugin, you will need to add some code to display it on your store’s front-end product page. Here’s an example of a code snippet you can use:

add_action('woocommerce_single_product_summary', 'storepro_custom_sku_field', 6);

function storepro_custom_sku_field() {

if (get_field(‘product_sku’)) {
?>
<div class=”sp-sku”>SKU: <?php echo get_field(‘product_sku’); ?></div>
<?php
}
}

Let’s explain the code above.

Firstly we created a function called storepro_custom_sku_field. However, you can name the function whatever you prefer. Then, hook it to the single product page at position 6.

add_action( 'woocommerce_single_product_summary', 'storepro_custom_sku_field', 6 );

Why position 6? To understand this it would be a good idea to check out the awesome post on the Business Bloomer site which explains how WooCommerce organises the single product page. But essentially the WooCommerce product title is displayed in position 5 by default, so by choosing position 6 we will display the custom field after the title.
The rest of the code simply checks if the SKU field exists and outputs it in a div.

function storepro_custom_sku_field() {

if (get_field(‘product_sku’)) {
?>
<div class=”sp-sku”>SKU: <?php echo get_field(‘product_sku’); ?></div>
<?php
}
}

We have added a class called 'sp-sku', so you can style it.

Method 2: Adding Custom Fields with Code

For those with technical expertise, adding custom code can offer the most flexibility.

  1. Add Code to functions.php:
    • Access your theme’s functions.php file through Appearance > Theme Editor, or use an FTP client.
Add Custom Fields to Product Page:


// Add a custom field to the product edit page
add_action('woocommerce_product_options_general_product_data', 'add_custom_fields');

function add_custom_fields() {
woocommerce_wp_text_input(array(
‘id’ => ‘_custom_product_field’,
‘label’ => __(‘Custom Product Field’, ‘woocommerce’),
‘desc_tip’ => ‘true’,
‘description’ => __(‘Enter the custom value here.’, ‘woocommerce’),
‘type’ => ‘text’
));
}
}


// Save the custom field value
add_action('woocommerce_process_product_meta', 'save_custom_fields');

function save_custom_fields($post_id) {
$custom_field_value = isset($_POST[‘_custom_product_field’]) ? sanitize_text_field($_POST[‘_custom_product_field’]) : ”;
update_post_meta($post_id, ‘_custom_product_field’, $custom_field_value);
}

Display Custom Fields on WooCommerce Product Pages

Now we need to add some code to display the custom field we created using the code above.

// Display the custom field value on the front end
add_action('woocommerce_single_product_summary', 'display_custom_fields', 25);


function display_custom_fields() {
global $post;
$custom_field_value = get_post_meta($post->ID, '_custom_product_field', true);
if (!empty($custom_field_value)) {
echo '<p>' . __('Custom Product Field: ', 'woocommerce') . esc_html($custom_field_value) . '</p>';
}
}

Adding Custom Fields Without User Interaction (Display-Only)

From here, let’s take things a step further. We’ll now explore how to enhance the user experience. What if your scenario requires the user to enter custom information? A common example is when they need to add a gift message or request a special size. Although you could use order notes, using a custom field is a better option. It creates a smoother experience for your customers.

We are going to do this using code, there will a number of steps, but these will be explained below:

Step 1: Add the custom field to the product page


add_action('woocommerce_before_add_to_cart_button', 'custom_add_to_cart_field');


function custom_add_to_cart_field() {
echo '<div class="custom-field-wrapper">';
echo '<label for="custom_field">' . __('Custom Field:', 'woocommerce') . '</label>';
echo '<input type="text" id="custom_field" name="custom_field" />';
echo '</div>';
}

Firstly, we add an input field above the “Add to Cart” button. This is where the user will enter their custom information.

Step 2: Validate the Custom Field Input


add_filter('woocommerce_add_to_cart_validation', 'custom_validate_custom_field', 10, 3);


function custom_validate_custom_field($passed, $product_id, $quantity) {
if (empty($_POST['custom_field'])) {
wc_add_notice(__('Please enter a value into the custom field.', 'woocommerce'), 'error');
return false;
}
return $passed;
}

Next, in step 2, we’ll validate the custom field input. This ensures users fill out the field before adding the product to the cart.

Step 3: Save the Custom Field Value to the Cart


add_filter('woocommerce_add_cart_item_data', 'custom_save_custom_field_to_cart', 10, 2);


function custom_save_custom_field_to_cart($cart_item_data, $product_id) {
if (!empty($_POST['custom_field'])) {
$cart_item_data['custom_field'] = sanitize_text_field($_POST['custom_field']);
}
return $cart_item_data;
}

Now on step 3 we save the custom field value to the cart, the custom field value is saved as part of the cart item data.

Step 4: Display the Custom Field Value in the Cart and Checkout Pages


add_filter('woocommerce_get_item_data', 'custom_display_custom_field_in_cart', 10, 2);


function custom_display_custom_field_in_cart($item_data, $cart_item) {
if (isset($cart_item['custom_field'])) {
$item_data[] = array(
'key' => __('Custom Field', 'woocommerce'),
'value' => wc_clean($cart_item['custom_field']),
);
}
return $item_data;
}

In step 4, make sure to display the custom field value in the cart and checkout pages. This lets the user see their input clearly.

Step 5: Save the Custom Field Value to the Order Meta


add_action('woocommerce_checkout_create_order_line_item', 'custom_save_custom_field_to_order', 10, 4);


function custom_save_custom_field_to_order($item, $cart_item_key, $values, $order) {
if (isset($values['custom_field'])) {
$item->add_meta_data(__('Custom Field', 'woocommerce'), $values['custom_field'], true);
}
}

At this point, we’re almost there! In step 5, the custom field value is saved when the user completes the checkout process.

Step 6: Display the Custom Field Value in the Admin Order Details


add_action('woocommerce_admin_order_data_after_order_details', 'custom_display_custom_field_in_admin_order');


function custom_display_custom_field_in_admin_order($order) {
foreach ($order->get_items() as $item_id => $item) {
if ($custom_field = $item->get_meta('Custom Field')) {
echo '<p><strong>' . __('Custom Field', 'woocommerce') . ':</strong> ' . $custom_field . '</p>';
}
}
}

The final step, the custom field value is displayed in the order details within the WooCommerce admin area.

By using the code in this 6-step process, you can collect custom input from users on the product page. This data stays visible throughout the order process for both the customer and the store admin.

Summary

You can see from the above that custom fields are a very powerful feature of WooCommerce. We have only given a very brief introduction and examples of using Woocommerce custom fields. Custom fields can be used to modify the standard features of WooCommerce to facilitate your unique offerings and give the best user experience to your customers.