How To Add Custom Field In Variation Woocommerce

As someone who specializes in web development and has extensive experience working with WooCommerce, I have frequently encountered the need to incorporate custom fields into product variations. Custom fields serve as an excellent means of including extra information or choices for your WooCommerce products, and their addition can significantly improve your online store’s functionality and user experience.

In this article, I’ll guide you through the steps to add a custom field to product variations in WooCommerce. We’ll dive deep into the code and explore the necessary hooks and filters to achieve this customization.

Step 1: Create the Custom Field

The first step is to define and create our custom field. We’ll need to hook into the woocommerce_product_after_variable_attributes action, which allows us to add our own fields within the variation settings.

Let’s say we want to add a “Color” option to our product variations. We can create a custom field like this:

function custom_variation_field( $loop, $variation_data, $variation ) {
    woocommerce_wp_text_input( array(
        'id'          => "custom_color[{$loop}]",
        'label'       => __( 'Color', 'woocommerce' ),
        'placeholder' => __( 'Enter color', 'woocommerce' ),
        'class'       => 'short',
    ) );
}
add_action( 'woocommerce_product_after_variable_attributes', 'custom_variation_field', 10, 3 );

In the above code, we use the woocommerce_wp_text_input() function to create a text input field. You can modify this based on the type of field you want to add. Don’t forget to update the id, label, placeholder, and class values to match your custom field requirements.

Step 2: Save the Custom Field

Now that we’ve added the custom field to the variation settings, we need to save its value when a variation is saved or updated. We’ll use the woocommerce_save_product_variation and woocommerce_update_product_variation actions to accomplish this.

Here’s an example of how to save the custom field value:

function save_custom_variation_field( $variation_id, $i ) {
    $color = $_POST['custom_color'][$i];
    if ( ! empty( $color ) ) {
        update_post_meta( $variation_id, 'custom_color', sanitize_text_field( $color ) );
    }
}
add_action( 'woocommerce_save_product_variation', 'save_custom_variation_field', 10, 2 );
add_action( 'woocommerce_update_product_variation', 'save_custom_variation_field', 10, 2 );

In the above code, we retrieve the value of the custom field from the $_POST array and save it as a post meta using the update_post_meta() function. Don’t forget to replace custom_color with the appropriate meta key for your custom field.

Step 3: Display the Custom Field in Product Pages

Now that we’ve added and saved the custom field, let’s display its value on the product pages. We’ll use the woocommerce_variation_option_name filter to modify the variation option label.

Here’s an example of how to display the custom field value:

function display_custom_variation_field( $term_name, $term, $taxonomy ) {
    $variation_id = absint( str_replace( 'attribute_', '', $term_name ) );
    $color = get_post_meta( $variation_id, 'custom_color', true );
    if ( ! empty( $color ) ) {
        echo ' - ' . esc_html( $color );
    }
}
add_filter( 'woocommerce_variation_option_name', 'display_custom_variation_field', 10, 3 );

In the above code, we retrieve the variation ID from the $term_name, then retrieve the value of the custom field using the get_post_meta() function. Finally, we echo the custom field value after the variation option label using the esc_html() function to sanitize the output.

Conclusion

Adding custom fields to product variations in WooCommerce allows you to provide additional information or options to your customers. By following the steps outlined in this article, you can customize your online store and enhance the user experience.

Remember to always test your code in a development environment before implementing it on your live site. And, as always, make sure to back up your site before making any changes to ensure you can easily revert back if needed.