How to Include Custom Fields in WooCommerce Products: A Comprehensive Guide

If you want to improve your WooCommerce product pages by adding custom fields, you’re in the right spot. Whether your goal is to showcase extra product info, collect unique inputs from shoppers, or give your store a distinctive edge, custom fields are a smart solution.

That said, implementing them can be tricky. You’ll need a good grasp of PHP and the WooCommerce framework. Mistakes during implementation can cause functionality issues or even expose your site to security threats.

If the technical aspects feel too daunting, Softdiscover can help. Our WooCommerce development experts will set up your custom fields with precision, ensuring your site stays secure and high-performing.

But if you’re ready to dive in and build it yourself, stick around. This guide will walk you through the entire process of adding custom fields to your WooCommerce store!

Steps to add custom fields to the WooCommerce product metabox

You can insert custom fields into the WooCommerce product metabox using WordPress hooks and functions. Follow this simple walkthrough to get started:

Step 1. Create a function to add custom fields

Use the woocommerce_product_options_general_product_data action hook to insert your custom fields into the General tab of the product editor. You can either add this to your child theme’s functions.php file or create a custom plugin so the code remains separate from your theme.

To build a custom plugin, navigate to the wp-content/plugins directory and create a new PHP file—name it something like custom-product-fields.php.

Add the following plugin header at the top of your PHP file so WordPress can recognize it as a valid plugin:

?php
/*
Plugin Name: SAU/CAL Custom Product Fields
Description: Adds a custom text input field to WooCommerce product edit page.
Version: 1.0
Author: Your Name
*/

Next, insert the code to create your input field (we’ll show you how below) and save the file. It will now appear under your list of plugins—just activate it.

For this tutorial, we’ll use the functions.php method, but the code works either way:

function softdiscover_add_custom_fields_to_general_tab() {
	// Create a custom text field
	woocommerce_wp_text_input(
		array(
			'id'          => '_softdiscover_custom_field_id',
			'label'       => esc_html__( 'Your new custom Field', 'softdiscover-custom-code' ),
			'placeholder' => esc_html__( 'Enter a value', 'softdiscover-custom-code' ),
			'desc_tip'    => true,
			'description' => esc_html__( 'This is a custom field description.', 'softdiscover-custom-code' ),
		)
	);
}
add_action( 'woocommerce_product_options_general_product_data', 'softdiscover_add_custom_fields_to_general_tab' );

Explanation of the code:

• add_action() links your function to a specific WooCommerce admin hook.
• woocommerce_product_options_general_product_data is triggered when WooCommerce loads the General product settings.
• softdiscover_add_custom_fields_to_general_tab is the callback that adds your custom input.
• woocommerce_wp_text_input() generates a standard text input with helpful options like:
• id: Unique identifier for the input field.
• label: Text label displayed in the admin UI.
• placeholder: Placeholder hint inside the field.
• desc_tip: Enables a tooltip on hover for guidance.
• description: Description text shown in the tooltip or under the field.

This is the result of the code:

Here’s how to add a checkbox field instead:

function softdiscover_add_custom_checkbox_to_general_tab() {
	// Create a custom checkbox
	woocommerce_wp_checkbox(
		array(
			'id'          => '_softdiscover_custom_checkbox_id',
			'label'       => esc_html__( 'Your new custom checkbox field', 'softdiscover-custom-code' ),
			'description' => esc_html__( 'Check this box if the product has special features.', 'softdiscover-custom-code' ),
			'desc_tip'    => true,
		)
	);
}
add_action( 'woocommerce_product_options_general_product_data', 'softdiscover_add_custom_checkbox_to_general_tab' );

Code breakdown:

• This function is also hooked into woocommerce_product_options_general_product_data using a new function name.
• woocommerce_wp_checkbox creates the checkbox field and works similarly to the text input function.

Here’s how the checkbox appears:

Step 2. Save the custom field data

Once you’ve finished editing a product, you’ll want to make sure the custom field data is saved properly. To do this, use the woocommerce_process_product_meta action hook. This ensures that your custom values are stored and can be accessed later, whether on the frontend or backend.

Add the following snippet to your theme’s functions.php file:

function softdiscover_save_custom_fields_data( $post_id ) {
	$custom_field_value = isset( $_POST['_softdiscover_custom_field_id'] ) ? wc_clean( wp_unslash( $_POST['_softdiscover_custom_field_id'] ) ) : ''; // phpcs:ignore WordPress.Security.NonceVerification.Missing
	update_post_meta( $post_id, '_softdiscover_custom_field_id', $custom_field_value );

	$custom_checkbox_value = isset( $_POST['_softdiscover_custom_checkbox_id'] ) ? 'yes' : 'no'; // phpcs:ignore WordPress.Security.NonceVerification.Missing
	update_post_meta( $post_id, '_softdiscover_custom_checkbox_id', $custom_checkbox_value );
}
add_action( 'woocommerce_process_product_meta', 'softdiscover_save_custom_fields_data' );

What this code does:

• woocommerce_process_product_meta runs when WooCommerce saves product data in the admin panel.
• $post_id is the product ID, passed automatically to your function when the hook is triggered.
• isset( $_POST['_softdiscover_custom_field_id'] ) checks if the custom field exists in the form submission. If so, it’s sanitized and stored; otherwise, an empty value is used.
• update_post_meta() saves your field value to the WordPress database using the field ID as the meta key.
• The same logic is applied to the checkbox, storing either yes or no depending on its state.

Step 3. Display custom field data on the front-end (optionally)

If you’d like your custom field data to appear on the product page, you can use a WooCommerce hook like woocommerce_product_additional_information to output the content.

function softdiscover_custom_field_display_additional_info( $product ) {
	$product_id         = $product->get_id();
	$custom_field_value = get_post_meta( $product_id, '_softdiscover_custom_field_id', true );

	if ( ! empty( $custom_field_value ) ) {
		echo '<table class="woocommerce-product-attributes shop_attributes">';
		echo '<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_custom-field">';
		echo '<th class="woocommerce-product-attributes-item__label">Your custom input field</th>';
		echo '<td class="woocommerce-product-attributes-item__value">' . esc_html( $custom_field_value ) . '</td>';
		echo '</tr>';
		echo '</table>';
	}
}
add_action( 'woocommerce_product_additional_information', 'softdiscover_custom_field_display_additional_info' );

Explanation:

• woocommerce_product_additional_information is triggered when WooCommerce renders the “Additional Information” tab.
• $product->get_id() fetches the product’s ID.
• If the custom field has a value, an HTML table is displayed following WooCommerce’s attribute styling.
• Use esc_html() to securely output the data and prevent malicious scripts.
• To display checkbox values, this function should be extended accordingly.

Here’s how it looks on the front end:

Extra expert tips for further customization

Apply conditional logic: You can limit when and where your custom fields appear—for instance, only for certain product types or categories—by adding conditions in your functions.

Use various field types: Don’t stop at text inputs—WooCommerce supports other options like checkboxes and dropdowns. Try woocommerce_wp_checkbox or woocommerce_wp_select to create more dynamic field types.

Follow best practices for security: Always sanitize, validate, and escape any data you handle. This protects your site from issues like XSS vulnerabilities.

With the techniques above, you’re well on your way to enhancing WooCommerce products with safe, effective custom fields.

Work with Softdiscover to add custom product fields to your store

While it’s possible to add custom input fields on your own if you know how to code, it’s important to consider the risks of doing it incorrectly.

Customizing your WooCommerce store without the necessary expertise can cause serious issues. It’s not just about avoiding crashes—it’s about maintaining long-term stability and site security.

– Laranginha, Softdiscover WooCommerce Developer

Working with Softdiscover brings numerous perks, including:

Time efficiency:

Avoid spending hours fixing bugs or struggling with code—let experts do the work faster.

Expert implementation:

Custom fields are integrated cleanly and professionally, without interfering with your store’s functionality.

Ongoing support:

Get professional maintenance and development services to keep your store running at its best.

Ready to upgrade your WooCommerce store with professionally crafted custom fields? Contact the Softdiscover team today and let us help you unlock your store’s full potential.