Display specific data from selected product variation in Woocommerce

Question

I'm attempting to display the selected product variation description on my single product page after add to cart button on variable product pages.

Below is the code I've implemented, but it does not appear to be working:

add_action( 'woocommerce_after_add_to_cart_form', 'description_below_add_cart', 11 );

function description_below_add_cart() {
    global $post;
    $terms = wp_get_post_terms( $post->ID, 'product_cat' );
    foreach ( $terms as $term ) $categories[] = $term->slug;

if ( in_array( 'cookware', $categories ) ) {
        global $product;
        $weight = $product->get_weight();
        $dimensions = wc_format_dimensions($product->get_dimensions(false));
            echo '<div class="short-description">' . $item['product']->get_description() .'</div>';
    }
}

Here is a product page from the site.

How can I display specific data (the variation description) from selected product variation in Woocommerce after add to cart button for variable products?

LoicTheAztec LoicTheAztec · Accepted Answer · 2020-11-10T02:33:52

Updated: Your current code can be simplified a bit regarding the product categories part. I have added some code to display the variation description for the selected product variation from variable product pages.

Here is the way to display the selected product variations description (requires some JQuery):

add_action( 'woocommerce_after_add_to_cart_form', 'description_below_add_cart', 11 );
function description_below_add_cart() {
    global $product;

    $terms_slugs  = wp_get_post_terms( $product->get_id(), 'product_cat', array('fields' => 'slugs') ); // Get the terms  slugs

    // Only for 'cookware' product category
    if ( in_array( 'cookware', $terms_slugs ) ) {
        $weight     = $product->get_weight();
        $weight     = ! empty($weight) ? wc_format_weight($weight) : '';
        
        $dimensions = $product->get_dimensions(false);
        $dimensions = ! empty($dimensions) ? wc_format_dimensions($dimensions) : '';

        // For variable products
        if ( $product->is_type('variable') ) {
            // Display the selected variation description
            echo '<div class="selected-variation-description"></div>';
            ?>
            <script type="text/javascript">
            jQuery( function($){
                // On select variation display variation description
                $('form.variations_form').on('show_variation', function( event, data ){
                    $('div.selected-variation-description').html(data.variation_description);
                    console.log(data.variation_description);
                });
                // On unselect variation remove variation description
                $('form.variations_form').on('hide_variation', function(){
                    $('div.selected-variation-description').html('');
                });
            });
            </script>
            <?php
        }
    }
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.

Display specific data from selected product variation in Woocommerce

1 Answers