Show variations table on product page

I have received a few requests from folks asking how to easily display the available variations of a variable product, on the product page. The following code will get you there:

$wc_vtable_options = array(
    'show_price' =>             'yes',
);
  
  
add_action('woocommerce_after_single_product_summary','re_woo_product_variations_tab_content');
  
function re_woo_product_variations_tab_content() {
  
    global $woocommerce, $product, $post, $wc_vtable_options;
    $available_variations = $product->get_available_variations();
    $attributes = $product->get_attributes();  
            ?>
            <table class="table table-striped table-hover table-bordered varations-table tablesorter">
                <thead>
                    <tr>
                    <?php foreach ( $attributes as $name => $options) :?>
                        <th>
                        <?php 
                            $attr_name = $options['name'];
                            if (0 === strpos($attr_name, 'pa_')){
                                $attr_name = $woocommerce->attribute_label($attr_name);
                            }
                            echo $attr_name;
                        ?>
                        </th>
                    <?php endforeach;?>
                    <?php 
                        if ($wc_vtable_options['show_price'] == 'yes') : ?>
                        <th>Price</th>
                    <?php endif; ?>
                    </tr>
                </thead>
  
                <tbody>
                <?php
  
                ?>
                <?php foreach ($available_variations as $prod_variation) : ?>
                    <?php
                        $post_id = $prod_variation['variation_id'];
                        $post_object = get_post($post_id);
                    ?>
  
                    <?php foreach ($prod_variation['attributes'] as $attr_name => $attr_value) : ?>
                        <td>
                        <?php
                            if (strpos($attr_name, '_pa_')){ 
                                $attr_name = substr($attr_name, 10);
                                $attr = get_term_by('slug', $attr_value, $attr_name);
                                $attr_value = $attr->name;
                            } else { 
                            }
                            echo $attr_value;
                        ?>
                        </td>
                    <?php endforeach;?>
                    <?php 
                        if ($wc_vtable_options['show_price'] == 'yes') : ?>
                        <td><?php echo get_woocommerce_currency_symbol() . get_post_meta( $post_object->ID, '_price', true); ?></td><tr>
                    <?php endif; ?>
  
                    </tr>
                <?php endforeach;?>
                </tbody>
            </table>
  
            <?php
  
}

You can add this code to your site following the instructions here:

How to add custom code to your WooCommerce/WordPress site the right way

Have any feedback? Be sure to let me know here: Contact me

Share your thoughts

Your email address will not be published. Required fields are marked *