Black Friday & Cyber Monday SUPER SALE ALL WEEK:
Grab 40% OFF on plugins
Days
Hours
Minutes
Seconds

How to Add Custom Fields For Product Variations in WooCommerce?

This customization will be useful for adding custom fields on the admin interface of product variations, enhancing your product offerings. For example, if you sell t-shirts with color variations, custom field values set by the admin will display corresponding variation messages, enriching the customer experience and product presentation.

Now, you can add special messages for each color variations, like “Bold Red” or “Soothing Blue”. So, when customers pick a color, they’ll see these special messages displayed on the product page.

Solution: Dynamically Change the Custom Field Values for Variations in WooCommerce

The code will add the custom fields for product variations on the admin side. The admin-entered value in these fields will be saved to each variation and when the customer selects the variations on the front end, the message corresponding to that selected variation will be retrieved and displayed on the single product page.

// Add Variation Settings
add_action( 'woocommerce_product_after_variable_attributes', 'ts_variation_settings_fields', 10, 3 );

// Save Variation Settings
add_action( 'woocommerce_save_product_variation', 'ts_save_variation_settings_fields', 10, 2 );

/**
 * Create new fields for variations
 */
function ts_variation_settings_fields( $loop, $variation_data, $variation ) {
    // Text Field
    woocommerce_wp_text_input(
        array(
            'id' => '_text_field[' . $variation->ID . ']',
            'label' => __( 'My Text Field', 'woocommerce' ),
            'placeholder' => 'http://',
            'desc_tip' => 'true',
            'description' => __( 'Enter the custom value here.', 'woocommerce' ),
            'value' => get_post_meta( $variation->ID, '_text_field', true )
        )
    );

    // Number Field
    woocommerce_wp_text_input(
        array(
            'id' => '_number_field[' . $variation->ID . ']',
            'label' => __( 'My Number Field', 'woocommerce' ),
            'desc_tip' => 'true',
            'description' => __( 'Enter the custom number here.', 'woocommerce' ),
            'value' => get_post_meta( $variation->ID, '_number_field', true ),
            'custom_attributes' => array(
                'step' => 'any',
                'min' => '0'
            )
        )
    );

    // Textarea
    woocommerce_wp_textarea_input(
        array(
            'id' => '_textarea[' . $variation->ID . ']',
            'label' => __( 'My Textarea', 'woocommerce' ),
            'placeholder' => '',
            'description' => __( 'Enter the custom value here.', 'woocommerce' ),
            'value' => get_post_meta( $variation->ID, '_textarea', true ),
        )
    );

    // Select
    woocommerce_wp_select(
        array(
            'id' => '_select[' . $variation->ID . ']',
            'label' => __( 'My Select Field', 'woocommerce' ),
            'description' => __( 'Choose a size.', 'woocommerce' ),
            'value' => get_post_meta( $variation->ID, '_select', true ),
            'options' => array(
                'small' => __( 'Small', 'woocommerce' ),
                'medium' => __( 'Medium', 'woocommerce' ),
                'large' => __( 'Large', 'woocommerce' ),
                'x-large' => __( 'X-Large', 'woocommerce' )
            ),
            'custom_attributes' => array(
                'data-display' => json_encode(array(
                    'Small' => __( 'Small', 'woocommerce' ),
                    'Medium' => __( 'Medium', 'woocommerce' ),
                    'Large' => __( 'Large', 'woocommerce' ),
                    'X-Large' => __( 'X-Large', 'woocommerce' )
                )),
            ),
        )
    );

    // Checkbox
    woocommerce_wp_checkbox(
        array(
            'id' => '_checkbox[' . $variation->ID . ']',
            'label' => __('Washing Type: Wet Wash', 'woocommerce' ),
            'value' => get_post_meta( $variation->ID, '_checkbox', true ),
        )
    );

    // Hidden field
    woocommerce_wp_hidden_input(
        array(
            'id' => '_hidden_field[' . $variation->ID . ']',
            'value' => 'hidden_value'
        )
    );
}

/**
 * Save new fields for variations
 */
function ts_save_variation_settings_fields( $post_id ) {
    // Text Field
    $text_field = $_POST['_text_field'][ $post_id ];
    if( ! empty( $text_field ) ) {
        update_post_meta( $post_id, '_text_field', esc_attr( $text_field ) );
    }

    // Number Field
    $number_field = $_POST['_number_field'][ $post_id ];
    if( ! empty( $number_field ) ) {
        update_post_meta( $post_id, '_number_field', esc_attr( $number_field ) );
    }

    // Textarea
    $textarea = $_POST['_textarea'][ $post_id ];
    if( ! empty( $textarea ) ) {
        update_post_meta( $post_id, '_textarea', esc_attr( $textarea ) );
    }

    // Select
    $select = $_POST['_select'][ $post_id ];
    if( ! empty( $select ) ) {
        update_post_meta( $post_id, '_select', esc_attr( $select ) );
    }

    // Checkbox
    $checkbox = isset( $_POST['_checkbox'][ $post_id ] ) ? 'Wet Wash' : 'Dry Wash';
    update_post_meta( $post_id, '_checkbox', $checkbox );

    // Hidden field
    $hidden = $_POST['_hidden_field'][ $post_id ];
    if( ! empty( $hidden ) ) {
        update_post_meta( $post_id, '_hidden_field', esc_attr( $hidden ) );
    }
}

// Add filter to load variation settings fields
add_filter( 'woocommerce_available_variation', 'ts_load_variation_settings_fields' );

/**
 * Load custom fields for variations
 */
function ts_load_variation_settings_fields( $variations ) {
    // Text Field
    $variations['text_field'] = get_post_meta( $variations['variation_id'], '_text_field', true );

    // Number Field
    $variations['number_field'] = get_post_meta( $variations['variation_id'], '_number_field', true );

    // Textarea
    $variations['textarea_field'] = get_post_meta( $variations['variation_id'], '_textarea', true );

    // Select Field
    $select_value = get_post_meta( $variations['variation_id'], '_select', true );

    // Mapping array for formatted display
    $formatted_values = array(
        'small' => __( 'Small', 'woocommerce' ),
        'medium' => __( 'Medium', 'woocommerce' ),
        'large' => __( 'Large', 'woocommerce' ),
        'x-large' => __( 'X-Large', 'woocommerce' )
    );

    // Set formatted text value based on the selected value
    $variations['select_field'] = isset( $formatted_values[$select_value] ) ? $formatted_values[$select_value] : '';

    // Checkbox Field
    $checkbox_value = get_post_meta( $variations['variation_id'], '_checkbox', true );
    $variations['checkbox_field'] = $checkbox_value === 'yes' ? 'Wet Wash' : 'Dry Wash';

    return $variations;
}

Note: To implement the frontend logic to dynamically display the custom field values you need to override the default template file of variation.php.

  • Locate the template file ‘variation.php’ found at wp-content/plugins/woocommerce/templates/single-product/add-to-cart/ and copy the file.
  • Create a path in your theme’s directory like your-theme/woocommerce/single-product/add-to-cart/.
  • Create a duplicate of variation.php file and add the following custom code below the existing div classes already present in the file.

 <div class="woocommerce-variation-custom-text-field">
        {{{ data.variation.text_field }}}
    </div>

    <div class="woocommerce-variation-custom-number-field">
        {{{ data.variation.number_field }}}
    </div>

    <div class="woocommerce-variation-custom-textarea-field">
        {{{ data.variation.textarea_field }}}
    </div>

    <div class="woocommerce-variation-custom-select-field">
        {{{ data.variation.select_field }}}
    </div>

    <div class="woocommerce-variation-custom-checkbox-field">
        {{{ data.variation.checkbox_field }}}
    </div>

Output

The custom fields are displayed within each variation on the edit product page for all variable products, as shown below.

How to Add Custom Fields For Product Variations in WooCommerce? - Tyche Softwares

When a customer selects a t-shirt color variation (e.g., “Blue”, “Red”, or “Yellow”) on the single product page, the custom field messages associated with that color is displayed dynamically below the product options.

Besides showing different messages when customers select product options, you can also display related items on the product page. This works like upselling and cross-selling. To do this, just add some custom fields in the Linked Products section of the admin settings. This way, related items will show up based on what the customer is looking at, making it easier for them to find and buy more products.

Browse more in: Code Snippets, WooCommerce How Tos, WooCommerce Tutorials

Share It:

Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x