Get specific product attribute name and value for each WooCommerce variation of a variable product

Question

In WooCommerce, I would like to display variable products with my own custom design as a carousel of product variations. I got the code by which I can display the regular price of the product in array but I stuck in getting attribute name and value in that.

Based on "WooCommerce variable products: Display some variations values in an HTML table" answer code, here is my actual code:

 add_action( 'woocommerce_before_single_product_summary', 'custom_table_after_single_product' );

function custom_table_after_single_product(){
    global $product;

   // Only for variable products
   if( ! $product->is_type('variable')) return; 

    $available_variations = $product->get_available_variations();
            // Get product attributes
    $attributes = $product->get_attributes();

    if( count($available_variations) > 0 ){

        $output = ' <section class="boxes">
        <div class="container">
            <div class="row">
            <div class="owl-carousel packed_sections">';

            // Get product attributes


        foreach( $available_variations as $variation ){
            // Get an instance of the WC_Product_Variation object
            $product_variation = wc_get_product($variation['variation_id']);


            $sale_price = $product_variation->get_sale_price();
            if( empty( $sale_price ) ) $sale_price = __( '<em>(empty)</em>', 'woocommerce' );


            $output .= '

                <div class="col-sm-12 package_box">
                    <div class="inside">
                        <div class="number">1000</div>

                        <div class="number_text">Followers</div>
                        <div class="price"><sup>$</sup> <span>'.$product_variation->get_regular_price().'</span></div>
                        <div class="services">
                            <ul>
                                <li><i class="fa fa-video-camera"></i> Include Video Views</li>
                                <li><i class="fa fa-star"></i> High quality likes</li>
                                <li><i class="fa fa-lock"></i> no password required</li>
                                <li><i class="fa fa-clock-o"></i> order start in 60 seconds</li>
                                <li><i class="fa fa-clock-o"></i> fast deliver 10 minutes</li>
                                <li><i class="fa fa-commenting"></i> 24/7 support</li>
                            </ul>
                        </div>
                        <div class="buy"><a href="#">buy now</a></div>
                    </div>
                </div>';


        }
        echo $output;
    }

}

This code gives the correct output, but I want attribute value and name with that also here is the output screenshot:

LoicTheAztec LoicTheAztec · Accepted Answer · 2019-04-09T17:06:37

In the following code, you will be able to get your specific product attribute name and term name value. You will also get the correct price display (even when product is on sale).

You will have to define in the code, your desired product attribute slug (replacing "color" by yours).

I have also added at the end the html missing closing tags.

add_action( 'woocommerce_before_single_product_summary', 'custom_table_after_single_product' );
function custom_table_after_single_product(){
    global $product;

    // Only for variable products
    if( ! $product->is_type('variable')) return;

    // HERE below SET your product attribute slug
    $product_attribute_slug = 'color'; // <====  <====  <====  <====  <====  <====  <====

    $targeted_taxonomy      = 'pa_' . $product_attribute_slug;

    $available_variations   = $product->get_available_variations();

    if( count($available_variations) > 0 ){

        $output = ' <section class="boxes">
        <div class="container">
            <div class="row">
            <div class="owl-carousel packed_sections">';

        // Loop through variations
        foreach( $available_variations as $variation_data ){

            // 1. The variation price (handle on sale products clean display)

            if( $variation_data['display_price'] === $variation_data['display_regular_price'] ) {
                $price_to_display = wc_price( $variation_data['display_price'] );
            } else {
                $variation        = wc_get_product($variation_data['variation_id']); // Get the WC_Product_Variation Object
                $price_to_display = wc_get_price_to_display( $variation, array('price' => $variation->get_sale_price() ) );
            }

            // 2. The variation product attribute

            // Loop though product attributes for the current variation
            foreach ( $variation_data['attributes'] as $variation_attribute => $term_slug ) {
                // Get the taxonomy slug
                $taxonomy = str_replace( 'attribute_', '', $variation_attribute );

                // Get the correct product attribute term value for this variation
                if( $taxonomy === $targeted_taxonomy ) {
                    // Get the attribute value term name
                    $term_name = get_term_by( 'slug', $term_slug, $taxonomy )->name;
                }
            }

            $output .= '<div class="col-sm-12 package_box">
                <div class="inside">
                    <div class="number">' . $term_name . '</div>
                    <div class="number_text">' . wc_attribute_label( $targeted_taxonomy ) . '</div>
                    <div class="price"><sup>$</sup> <span>' . strip_tags($price_to_display) . '</span></div>
                    <div class="services">
                        <ul>
                            <li><i class="fa fa-video-camera"></i> ' . __("Include Video Views") . '</li>
                            <li><i class="fa fa-star"></i> ' . __("High quality likes") . '</li>
                            <li><i class="fa fa-lock"></i> ' . __("no password required") . '</li>
                            <li><i class="fa fa-clock-o"></i> ' . __("order start in 60 seconds") . '</li>
                            <li><i class="fa fa-clock-o"></i> ' . __("fast deliver 10 minutes") . '</li>
                            <li><i class="fa fa-commenting"></i> ' . __("24/7 support") . '</li>
                        </ul>
                    </div>
                    <div class="buy"><a href="#">' . __("buy now") . '</a></div>
                </div>
            </div>';
        }

        // Output
        echo $output . '</div>
                </div>
            </div>
        </section>';
    }
}

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

Get specific product attribute name and value for each WooCommerce variation of a variable product

1 Answers