Custom Woocommerce product variations attributes

Question

I’ve seen similar questions asked, and have tried all the solutions, but none of them seems to work for my project.

All my products have extra specifications, that needs to change when the customer choose a different variation on the product page. And I need the specifications to be displayed in the products attributes table So far, I’ve tried a couple of different things, but my code so far looks like this. I can get the extra data to save from the edit product page, but I can’t figure out how to get it to display on the product page.

Functions.php

// Add custom fields to product variation settings
add_action( 'woocommerce_product_after_variable_attributes','add_variation_options_other_dimensions', 10, 3 );
function add_variation_options_other_dimensions( $loop, $variation_data, $variation ){


    woocommerce_wp_text_input( array(
        'id' => 'diameter[' . $loop . ']',
        'class' => 'short',
        'label'       => __( 'Diameter', 'woocommerce' ),
        'desc_tip'    => 'true',
        'description' => __( 'Diameter description help.', 'woocommerce' ),
        'value'       => get_post_meta( $variation->ID, 'diameter', true )
    ) );

    woocommerce_wp_text_input( array(
        'id' => 'thickness[' . $loop . ']',
        'class' => 'short',
        'label'       => __( 'Thickness', 'woocommerce' ),
        'desc_tip'    => 'true',
        'description' => __( 'Thickness description help.', 'woocommerce' ),
        'value'       => get_post_meta( $variation->ID, 'thickness', true )
    ) );

}


// Save product variation custom fields values
add_action( 'woocommerce_save_product_variation','save_variation_options_other_dimensions', 10 ,2 );
function save_variation_options_other_dimensions( $variation_id, $i ) {

    $diameter = $_POST["diameter"][$i];
    if ( isset( $diameter ) )
        update_post_meta( $variation_id, 'diameter', esc_attr( $diameter ) );

    $thickness = $_POST["thickness"][$i];
    if ( isset( $thickness ) )
        update_post_meta( $variation_id, 'thickness', esc_attr( $thickness ) );

}

I’ve tried displaying the values in “product-attributes.php” and “additional-information.php” seeing as I want the new values to be displayed along side the original attributes.

My product-attributes-php

<?php echo get_post_meta( $product->get_id(), 'diameter', true ); ?>
<?php echo get_post_meta( $product->get_id(), 'thickness', true ); ?>

Is there anyway to display these values in either the product attribute table or right after it in the additional information tab, on the product page?

Sorry in advance if my question is dumb, it's my first time posting. And I just can't get it working

helgatheviking helgatheviking · Accepted Answer · 2019-10-29T17:19:41

I don't think the data is exactly where you requested it, but here's a general guide for adding/displaying custom variation data when the variation is selected. I've also converted to using Woo's CRUD for future-compatibility.

/**
 * Add custom fields to product variation settings
 *
 * @param string $loop
 * @param array $variation_data
 * @param WP_Post $variation
 * @return array
 */
function add_variation_options_other_dimensions( $loop, $variation_data, $variation ){

    $variation_obj = wc_get_product( $variation->ID );

    woocommerce_wp_text_input( array(
        'id' => 'diameter[' . $loop . ']',
        'class' => 'short',
        'label'       => __( 'Diameter', 'woocommerce' ),
        'desc_tip'    => 'true',
        'description' => __( 'Diameter description help.', 'woocommerce' ),
        'value'       => $variation_obj->get_meta( 'diameter', true ),
    ) );

    woocommerce_wp_text_input( array(
        'id' => 'thickness[' . $loop . ']',
        'class' => 'short',
        'label'       => __( 'Thickness', 'woocommerce' ),
        'desc_tip'    => 'true',
        'description' => __( 'Thickness description help.', 'woocommerce' ),
        'value'       => $variation_obj->get_meta( 'thickness', true ),
    ) );

}
add_action( 'woocommerce_product_after_variable_attributes','add_variation_options_other_dimensions', 10, 3 );


/**
 * Save product variation custom fields values
 *
 * @param int $variation_id
 * @param int $i
 */
function save_variation_options_other_dimensions( $variation_id, $i ) {

    $variation_obj = wc_get_product( $variation_id );

    if ( isset( $_POST["diameter"][$i] ) ) {
        $variation_obj->update_meta_data( 'diameter', wc_clean( $_POST["diameter"][$i] ) );
    }

    if ( isset( $_POST["thickness"][$i] ) ) {
        $variation_obj->update_meta_data( 'thickness', wc_clean( $_POST["thickness"][$i] ) );
    }

    $variation_obj->save();

}
add_action( 'woocommerce_save_product_variation','save_variation_options_other_dimensions', 10 ,2 );

/**
 * Add data to json encoded variation form.
 *
 * @param  array $data - this is the variation's json data
 * @param  object $product
 * @param  object $variation
 * @return array
 */
function kia_available_variation( $data, $product, $variation ){
    $kia_data['diameter']  = $variation->get_meta( 'diameter', true );
    $kia_data['thickness'] = $variation->get_meta( 'thickness', true );

    return array_merge( $data, $kia_data );

}
add_filter( 'woocommerce_available_variation', 'kia_available_variation', 10, 3 );


/**
 * Add scripts to variable products.
 */
function kia_on_found_template_for_variable_add_to_cart() {
    add_action( 'wp_print_footer_scripts', 'kia_variable_footer_scripts', 99 );
}
add_action( 'woocommerce_variable_add_to_cart', 'kia_on_found_template_for_variable_add_to_cart', 30 );


function kia_variable_footer_scripts() { ?>

    <script type="text/template" id="tmpl-variation-template-extra-data">
        <tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_diameter extra-data">
            <th class="woocommerce-product-attributes-item__label"><?php esc_html_e( 'Diameter', 'my-text-domain' );?></th>
            <td class="woocommerce-product-attributes-item__value">{{{ data.variation.diameter }}}</td>
        </tr>
        <tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_thickness extra-data">
            <th class="woocommerce-product-attributes-item__label"><?php esc_html_e( 'Thickness', 'my-text-domain' );?></th>
            <td class="woocommerce-product-attributes-item__value">{{{ data.variation.thickness }}}</td>
        </tr>
    </script>


    <script type="text/javascript">
        jQuery( document ).ready(function($) {
            $('form.cart')
                .on('found_variation', function( event, variation ) {

                    template     = wp.template( 'variation-template-extra-data' );

                    $template_html = template( {
                        variation: variation
                    } );

                    // Remove any existing rows.
                    $('#tab-additional_information').find('.woocommerce-product-attributes tr.extra-data').remove();
                    // Add new rows.
                    $('#tab-additional_information').find('.woocommerce-product-attributes tbody').append( $template_html );

                })
                .on( 'reset_data', function( event, variation ) {
                    $('#tab-additional_information').find('.woocommerce-product-attributes tr.extra-data').remove();
                });
        });
    </script>
<?php

}

Custom Woocommerce product variations attributes

1 Answers