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

Updated on September 2, 2017

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.

change choose an option woocommerce

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!

Was this article helpful?

Related Articles

Comments Leave a Comment

  1. Nevermind – for some reason it appears that even making an exact replica of the original VARIABLE.PHP file and putting in the theme folder under woocommerce/… it’s still causing this odd problem of now showing the price (at all) and not recalculating based on attributes selected,

    (Theme: Avada)

    very strange

  2. Works, but breaks the price visibility after calculation?? When you select attributes from the dropdown and it calculates (page loads) no price shows up to reflect the attributes selected – HOWEVER, if you click add to cart and go through to checkout, it shows the attributes you selected. Very puzzling??

    NOTE: If I delete the newly created variable.php file in my child theme and my site is forced to use the original variable.php file, price displays as normal after selecting attributes, so it’s this added snippet of code that’s breaking the price display.

    Can’t seem to find a workaround to change “Choose an option” text that’s up to date and current (October 2017)

Leave a Comment