Add custom dimension fields to each variation settings for variable products Add custom dimension fields to each variation settings for variable products wordpress wordpress

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&times;W&times;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:

enter image description here