Add custom dimension fields to each variation settings for variable products

Question

I'm trying to add a "Built Dimensions" fields to each product variation settings.

Here's a mock of what I'm trying to accomplish:

I've followed these following tips but they aren't doing quite what I want:

• http://www.remicorson.com/mastering-woocommerce-products-custom-fields/

• Add Advanced Custom Fields to WooCommerce Product Variation

Those are adding it to one of the other data tabs. I need it per variation. Each variation has a built dimension and a shipping dimension.

Answer 1

With the 2 hooked functions below you will get exactly what you are expecting like in your mock:

// Add variation custom "dimentions" fields
add_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" fields
add_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:

---