List product variations using wc_dropdown_variation_attribute_options in Woocommerce

Question

I am new to woocommerce and i am trying to display the product variations as a drop-down list in shop page. But the variations are not getting populated in the select option list. below is my code snippet.

<?php foreach ( $product->get_attributes() as $attribute_name => $options ) : ?>
                    <tr>
                        <td class="label"><label for="<?php echo sanitize_title( $attribute_name ); ?>"><?php echo wc_attribute_label( $attribute_name ); ?></label></td>
                        <td class="value">
                            <?php
                                //$selected = isset( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ? wc_clean( urldecode( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ) : $product->get_variation_default_attribute( $attribute_name );
                                //wc_dropdown_variation_attribute_options( array( 'options' => $options, 'attribute' => $attribute_name, 'product' => $product, 'selected' => $selected ) );
                                $args=array();
                                $result = wc_dropdown_variation_attribute_options($args);
                                echo end( $attribute_keys ) === $attribute_name ? apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations" href="#">' . __( 'Clear', 'woocommerce' ) . '</a>' ) : '';
                            ?>
                        </td>
                    </tr>
                <?php endforeach;?>

Answer 1

The code that you have there comes from single-product/add-to-cart/variable.php template.

But you can't use it with $product->get_attributes() in the foreach loop.

In this template, $attributes is $product->get_variation_attributes()…

So the following code will work to display the attributes dropdowns (where $product is an instance of the variable product object):

<?php
$attributes = $product->get_variation_attributes();
$attribute_keys = array_keys( $attributes );
?>

<?php foreach ( $attributes as $attribute_name => $options ) : ?>
    <tr>
        <td class="label"><label for="<?php echo sanitize_title( $attribute_name ); ?>"><?php echo wc_attribute_label( $attribute_name ); ?></label></td>
        <td class="value">
            <?php
                $selected = isset( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ? wc_clean( urldecode( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ) : $product->get_variation_default_attribute( $attribute_name );
                $args = array( 'options' => $options, 'attribute' => $attribute_name, 'product' => $product, 'selected' => $selected );
                wc_dropdown_variation_attribute_options( $args );
                echo end( $attribute_keys ) === $attribute_name ? apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations" href="#">' . __( 'Clear', 'woocommerce' ) . '</a>' ) : '';
            ?>
        </td>
    </tr>
<?php endforeach; ?>

As you can see the wc_dropdown_variation_attribute_options() function is made to display variation attribute dropdowns for the current variable product, BUT NOT a list of variations in a drop down.

---

List in a dropdown the product variations of a variable product:

To list all variation attributes in a dropdown you will use the following code (where $product is an instance of the variable product object):

$available_variations = $product->get_available_variations();

if( count($available_variations) > 0 ){

    $output = '<div class="product-variations-dropdown">
        <select id="available-variations" class="" name="available_variations">';

    $output .= '<option value="">'. __('Choose a variation') .'</option>';

    foreach( $available_variations as $variation ){
        $option_value = array();

        foreach( $variation['attributes'] as $attribute => $term_slug ){
            $taxonomy = str_replace( 'attribute_', '', $attribute );
            $attribute_name = get_taxonomy( $taxonomy )->labels->singular_name; // Attribute name
            $term_name = get_term_by( 'slug', $term_slug, $taxonomy )->name; // Attribute value term name

            $option_value[] = $attribute_name . ': '.$term_name;
        }
        $option_value = implode( ' | ', $option_value );

        $output .= '<option value="'.$variation['variation_id'].'">'.$option_value.'</option>';

    }
    $output .= '
        </select>
    </div>';

    echo $output;
}

Code is tested and works

To get an instance of the variable product object from a defined $product_id (where $product_id is the ID of a variable product) you will use:

$product = wc_get_product($product_id);