Learn how to add custom fields to WooCommerce products using PHP code. Add text fields, dropdowns, date pickers, and more — without installing any plugin.
Adding custom fields to WooCommerce products is one of the most common requirements in eCommerce development. Whether you need a "Delivery Date" field, a "Gift Message" box, or custom product options - you can do it all with pure PHP code. In this guide, I'll show you exactly how to add custom fields to WooCommerce products without using any plugin. This approach is cleaner, faster, and gives you full control.
Why Avoid Plugins for Custom Fields?
Most developers reach for plugins like ACF or WooCommerce Product Add-Ons. But here's the problem:
- Plugins add bloat and slow down your site
- Many premium plugins cost $49-$99 per year
- Plugin updates can break your customizations
- You lose control over the output HTML and CSS
- Dependency on third-party developers
With custom code, you get exactly what you need — nothing more, nothing less.
Step 1: Add a Custom Text Field to Product Edit Page
First, let's add a custom field to the product edit screen in WordPress admin. Add this code to your theme's functions.php or a custom plugin:
// Display custom field in product edit page
add_action('woocommerce_product_options_general_product_data', 'add_custom_product_field');
function add_custom_product_field() {
woocommerce_wp_text_input(array(
'id' => '_custom_product_text',
'label' => 'Custom Label',
'placeholder' => 'Enter custom text',
'desc_tip' => true,
'description' => 'This is a custom field for the product.',
));
}
// Save custom field value
add_action('woocommerce_process_product_meta', 'save_custom_product_field');
function save_custom_product_field($post_id) {
$custom_field = isset($_POST['_custom_product_text']) ? sanitize_text_field($_POST['_custom_product_text']) : '';
update_post_meta($post_id, '_custom_product_text', $custom_field);
}
This adds a text input field in the "General" tab of the product edit page.
Step 2: Display the Custom Field on the Product Page
Now let's show this field value on the frontend product page:
add_action('woocommerce_single_product_summary', 'display_custom_product_field', 25);
function display_custom_product_field() {
global $product;
$custom_value = get_post_meta($product->get_id(), '_custom_product_text', true);
if (!empty($custom_value)) {
echo '<div class="custom-product-field">';
echo '<span class="label">Custom Info: </span>';
echo '<span class="value">' . esc_html($custom_value) . '</span>';
echo '</div>';
}
}
Step 3: Add a Dropdown Select Field
Want a dropdown instead of a text field? Here's how:
add_action('woocommerce_product_options_general_product_data', 'add_custom_select_field');
function add_custom_select_field() {
woocommerce_wp_select(array(
'id' => '_product_size_chart',
'label' => 'Size Chart',
'options' => array(
'' => 'Select size chart',
'small' => 'Small Items',
'medium' => 'Medium Items',
'large' => 'Large Items',
),
));
}
Step 4: Add a Checkbox Field
add_action('woocommerce_product_options_general_product_data', 'add_custom_checkbox_field');
function add_custom_checkbox_field() {
woocommerce_wp_checkbox(array(
'id' => '_is_handmade',
'label' => 'Handmade Product',
'description' => 'Check if this product is handmade',
));
}
Step 5: Add Custom Fields to the Checkout Page
This is different from product fields. To add fields to the checkout page:
add_action('woocommerce_after_order_notes', 'add_checkout_custom_field');
function add_checkout_custom_field($checkout) {
woocommerce_form_field('delivery_date', array(
'type' => 'date',
'class' => array('form-row-wide'),
'label' => 'Preferred Delivery Date',
'required' => true,
), $checkout->get_value('delivery_date'));
}
// Save the field value
add_action('woocommerce_checkout_update_order_meta', 'save_checkout_custom_field');
function save_checkout_custom_field($order_id) {
if (!empty($_POST['delivery_date'])) {
update_post_meta($order_id, '_delivery_date', sanitize_text_field($_POST['delivery_date']));
}
}
// Display in admin order page
add_action('woocommerce_admin_order_data_after_billing_address', 'display_delivery_date_admin');
function display_delivery_date_admin($order) {
$delivery_date = get_post_meta($order->get_id(), '_delivery_date', true);
if ($delivery_date) {
echo '<p><strong>Delivery Date:</strong> ' . esc_html($delivery_date) . '</p>';
}
}
Step 6: Add Fields to a Custom Product Tab
For more complex setups, create a custom tab in the product edit page:
add_filter('woocommerce_product_data_tabs', 'add_custom_product_tab');
function add_custom_product_tab($tabs) {
$tabs['custom_tab'] = array(
'label' => 'Extra Info',
'target' => 'custom_product_tab_data',
'priority' => 60,
);
return $tabs;
}
add_action('woocommerce_product_data_panels', 'custom_product_tab_content');
function custom_product_tab_content() {
echo '<div id="custom_product_tab_data" class="panel woocommerce_options_panel">';
woocommerce_wp_text_input(array(
'id' => '_material',
'label' => 'Material',
));
woocommerce_wp_textarea_input(array(
'id' => '_care_instructions',
'label' => 'Care Instructions',
));
echo '</div>';
}
Best Practices
- Always sanitize input data using sanitize_text_field() or wp_kses_post()
- Use the underscore prefix _ for meta keys to hide them from the default Custom Fields UI
- Use desc_tip => true for tooltips instead of inline descriptions
- Always check if the value exists before displaying on the frontend
- Test with different product types (simple, variable, grouped)
Final Thoughts
Custom fields in WooCommerce give you unlimited flexibility. Once you understand the hooks (woocommerce_product_options_general_product_data, woocommerce_process_product_meta, etc.), you can add any type of field anywhere. This approach is faster, cleaner, and more maintainable than any plugin. If you need help implementing custom fields for your WooCommerce store, feel free to reach out.