How to Add a Custom Field in the General Tab of Product in Woocommerce

Introduction

In this post, we will see how we can add a custom field to the WooCommerce product edit options in the general tab on the product edit page at the admin end. This can be very useful when we want additional data with the product.

Simply, we can add a custom field according to need and perform the intended task.

Add a custom field

To add custom product fields in the WooCommerce Admin end, you’ll need to follow these steps:

Step 1: Create a child theme (optional): It’s always recommended to create a child theme before making any modifications to your WooCommerce files.

This ensures that your changes won’t be overwritten when you update the theme in the future.

If you already have a child theme, you can skip this step.

Note: You can do this same thing by adding a plugin according to your need. it is not mandatory that we can add only a child theme.

Step 2: Open your child theme’s functions.php file: If you’re using a child theme, open the functions.php file. Otherwise, open your theme’s functions.php file.

Step 3: Add custom product fields code: Insert the following code in the functions.php file to create custom product fields:

// Display custom fields in the "General" tab of the product edit page
add_action('woocommerce_product_options_general_product_data', 'add_custom_product_fields');

function add_custom_product_fields()
{
    global $product_object;

    echo '<div class="product_custom_fields">';

    // Text field
    woocommerce_wp_text_input(
        array(
            'id' => '_custom_field_text',
            'label' => __('Custom Field Text', 'woocommerce'),
            'placeholder' => '',
            'desc_tip' => 'true',
            'description' => __('Enter custom field text here.', 'woocommerce')
        )
    );

    // Select field
    woocommerce_wp_select(
        array(
            'id' => '_custom_field_select',
            'label' => __('Custom Field Select', 'woocommerce'),
            'options' => array(
                'option1' => __('Option 1', 'woocommerce'),
                'option2' => __('Option 2', 'woocommerce'),
                'option3' => __('Option 3', 'woocommerce')
            ),
            'desc_tip' => 'true',
            'description' => __('Select an option.', 'woocommerce')
        )
    );

    echo '</div>';
}

Save this custom data into the database

// Save custom fields when the product is saved
add_action('woocommerce_process_product_meta', 'save_custom_product_fields');

function save_custom_product_fields($product_id)
{
    // Save text field
    $custom_field_text = isset($_POST['_custom_field_text']) ? sanitize_text_field($_POST['_custom_field_text']) : '';
    update_post_meta($product_id, '_custom_field_text', $custom_field_text);

    // Save select field
    $custom_field_select = isset($_POST['_custom_field_select']) ? sanitize_text_field($_POST['_custom_field_select']) : '';
    update_post_meta($product_id, '_custom_field_select', $custom_field_select);
}

Added custom field of the general tab will be saved using the above code snippet as the product will be updated into the post meta database table.

After following these steps, custom fields will be shown in the product general tab. Just looking at the below image.

Conclusion

Now you can see the “Custom field” as an option and input text in the product general tab.

When editing the product page in the woo-commerce admin area.

Kindly visit the Woocommerce Addons page to see our addons and can also explore our Woocommerce Development Service.

Support

For any technical assistance, please raise a ticket or reach us by mail at support@webkul.com