CODEWITHSUNDEEP
phpwordpresswoocommerceproductproduct-variations
Jordan Little
Jordan Little

Reputation: 93

Add custom dimension fields to each variation settings for variable products

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: 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:

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.

Upvotes: 6

Views: 1500

Answers (1)

LoicTheAztec
LoicTheAztec

Reputation: 253886

Updated for better compatibility with WooCommerce custom tables.

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 the custom dimension fields values:

//Save variation custom "dimensions" fields
add_action('woocommerce_admin_process_variation_object', 'save_variation_options_built_dimensions', 10, 2);
function save_variation_options_built_dimensions($variation, $loop)
{
    $built_lenght = $_POST["built_lenght_{$loop}"];
    if (!empty($built_lenght)) {
        $variation->update_meta_data('_built_lenght', sanitize_text_field($built_lenght));
    }
        
    $built_width = $_POST["built_width_{$loop}"];
    if (!empty($built_width)) {
        $variation->update_meta_data('_built_width', sanitize_text_field($built_width));
    }
        
    $built_height = $_POST["built_height_{$loop}"];
    if (!empty($built_height)) {
        $variation->update_meta_data('_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 on WooCommerce version 3.8 and above.

You will get this:

enter image description here

Upvotes: 1

Related Questions