[WooCommerce] How to replace ‘Choose an option” with Attribute name in variation select menu?

In WooCommerce, the product attributes used for variations will display as a select menu in product page. For example, if I had created an attribute named ‘Size’ and used it for variation, then a ‘Size’ select menu will appear in the product page containing attribute values (or configured terms) as options for a customer to choose from (like ‘Size’ select menu would have values such as “S, M, L, XL etc…”). The variation select menu will also have “Choose an option” as the first item, which (I felt) should have been as “Choose size” for size variation and “Choose color” for a color variation. It also makes sense, as the customer is going to choose size and color of the product.

If you are wondering how to replace “Choose an option” with corresponding attribute/variation name, then here’s how you can do that.

Fortunately, thomasfw@Stackoverflow had a solution to my problem – a big thanks to him.

1. Override ‘variable.php‘ file by copying it from ‘woocommerce/single-product/add-to-cart/variable.php‘ to your theme directory. For example; #your_theme_location/woocommerce/single-product/add-to-cart/variable.php. Well, you might need to take help from this link.

2. Once done, edit variable.php and lookout for the code as the one shown below (In woocommerce version 2.4.6, the below code was starting at line 31 and ends at line 41):

<?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 ) ] ) ? $_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 ) );
 ?>
 </td>
 </tr>
 <?php endforeach;?>

replace it with the below code:

<?php 
$variations_arr = array();
foreach ( $attributes as $attribute_name => $options ) : 
    ob_start(); ?>
    <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( $_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 ) );
            echo end( $attribute_keys ) === $attribute_name ? '<a class="reset_variations" href="#">' . __( 'Clear selection', 'woocommerce' ) . '</a>' : ''; ?>
        </td>
    </tr>
    <?php $variations_ob = ob_get_clean();
    $variations_arr[wc_attribute_label($attribute_name)] = $variations_ob;
endforeach;

foreach ($variations_arr as $name => $ob) {
    echo str_ireplace('choose an option', 'Choose '.$name, $ob );
} ?>

Once done, save ‘variable.php‘ file and refresh your product page to see ‘Choose an option” replaced with ‘Choose <attribute_name>’.  That’s it!