Add custom dimension fields to each variation settings for variable products
With the 2 hooked functions below you will get exactly what you are expecting like in your mock:
// Add variation custom "dimentions" fieldsadd_action( 'woocommerce_variation_options_dimensions','add_variation_options_built_dimensions', 10, 3 );function add_variation_options_built_dimensions( $loop, $variation_data, $variation ){ $variation_built_lenght = get_post_meta($variation->ID,"_built_lenght", true ); if( ! $variation_built_lenght ) $variation_built_lenght = ""; $variation_built_width = get_post_meta($variation->ID,"_built_width", true ); if( ! $variation_built_width ) $variation_built_width = ""; $variation_built_height = get_post_meta($variation->ID,"_built_height", true ); if( ! $variation_built_height ) $variation_built_height = ""; ?> <p class="form-field form-row dimensions_field built_dimensions hide_if_variation_virtual form-row-last"> <label for="product_built_length"><?php // translators: %s: dimension unit printf( __( 'Built dimensions (L×W×H) (%s)', 'woocommerce' ), get_option( 'woocommerce_dimension_unit' ) ); ?></label> <?php echo wc_help_tip( __( 'Built length x width x height in decimal form', 'woocommerce' ) ); ?> <span class="wrap"> <input id="product_built_length" placeholder="<?php esc_attr_e( 'Built length', 'woocommerce' ); ?>" class="input-text wc_input_decimal" size="6" type="text" name="built_lenght_<?php echo $loop; ?>" value="<?php echo esc_attr( $variation_built_lenght ); ?>" /> <input placeholder="<?php esc_attr_e( 'Built width', 'woocommerce' ); ?>" class="input-text wc_input_decimal" size="6" type="text" name="built_width_<?php echo $loop; ?>" value="<?php echo esc_attr( $variation_built_width ); ?>" /> <input placeholder="<?php esc_attr_e( 'Built height', 'woocommerce' ); ?>" class="input-text wc_input_decimal last" size="6" type="text" name="built_height_<?php echo $loop; ?>" value="<?php echo esc_attr( $variation_built_height ); ?>" /> </span> </p> <?php} //Save variation custom "dimentions" fieldsadd_action( 'woocommerce_save_product_variation','save_variation_options_built_dimensions', 10 ,2 );function save_variation_options_built_dimensions( $variation_id, $loop ){ $built_lenght = $_POST["built_lenght_$loop"]; if(!empty($built_lenght)) update_post_meta( $variation_id, '_built_lenght', sanitize_text_field($built_lenght) ); $built_width = $_POST["built_width_$loop"]; if(!empty($built_width)) update_post_meta( $variation_id, '_built_width', sanitize_text_field($built_width) ); $built_height = $_POST["built_height_$loop"]; if(!empty($built_height)) update_post_meta( $variation_id, '_built_height', sanitize_text_field($built_height) );}
Code goes in function.php file of your active child theme (or theme) or also in any plugin file.
This code is tested and works for WooCommerce 2.6.x and 3+.
You will get this: