WooCommerce is a flexible eCommerce platform powering millions of online stores. One common customization request is adding custom fields to products. While plugins can achieve this, adding custom fields without a plugin keeps your store lean, secure, and fully under your control. This guide will walk you step by step on how to do it using code.
Why Add Custom Fields Without a Plugin?
Adding custom fields directly offers several benefits:
-
Improved Performance: Fewer plugins mean faster load times.
-
Enhanced Security: Reduces the potential for plugin-related vulnerabilities.
-
Greater Control: Customize exactly how and where fields appear.
Custom fields can display additional information such as product specifications, instructions, or any other relevant data.
Steps to Add a Custom Field in WooCommerce Product Without a Plugin
Step 1: Access Your Theme’s functions.php File
-
Log in to your WordPress dashboard.
-
Navigate to Appearance > Theme Editor.
-
Find the
functions.phpfile of your active theme (or better, use a child theme to avoid losing changes after updates).
Step 2: Add a Custom Field to the Product Backend
This code snippet adds a custom field to the product edit screen:
add_action(‘woocommerce_product_options_general_product_data’, ‘add_custom_field_to_product’);
function add_custom_field_to_product() {
woocommerce_wp_text_input( array(
‘id’ => ‘custom_field_name’,
‘label’ => __(‘Custom Field Label’, ‘woocommerce’),
‘placeholder’ => ‘Enter custom value’,
‘desc_tip’ => true,
‘description’ => __(‘Enter the custom field value here.’, ‘woocommerce’),
‘type’ => ‘text’
));
}
Tip: Change 'custom_field_name' and 'Custom Field Label' to match your field’s purpose.
Step 3: Save the Custom Field Value
To save the data when a product is updated:
add_action(‘woocommerce_process_product_meta’, ‘save_custom_field’);
function save_custom_field($post_id) {
$custom_field_value = isset($_POST[‘custom_field_name’]) ? $_POST[‘custom_field_name’] : ”;
update_post_meta($post_id, ‘custom_field_name’, sanitize_text_field($custom_field_value));
}
Step 4: Display the Custom Field on the Frontend
Make the custom field visible on the product page:
add_action(‘woocommerce_single_product_summary’, ‘display_custom_field_on_product’, 25);
function display_custom_field_on_product() {
global $post;
$custom_field_value = get_post_meta($post->ID, ‘custom_field_name’, true);
if (!empty($custom_field_value)) {
echo ‘<p><strong>‘ . __(‘Custom Field:’, ‘woocommerce’) . ‘</strong> ‘ . esc_html($custom_field_value) . ‘</p>‘;
}
}
Additional Tips for Custom Fields
-
Use a Child Theme: Protects your code from being overwritten during theme updates.
-
Backup First: Always back up
functions.phpbefore making changes. -
Test in Staging: Apply changes in a test environment before going live.
-
Flexible Field Types: You can extend this method to dropdowns, checkboxes, or textareas.
Final Thoughts
Adding custom fields to WooCommerce products without a plugin gives you more flexibility and better performance. With these steps, you can enhance your product pages with tailored information that meets your business needs.
Now you can display extra details, instructions, or custom attributes without relying on third-party plugins, keeping your store fast, secure, and fully customizable.