Search code examples
phpwordpresswoocommercehtml-selectproduct

Remove "Choose an option" from variable product dropdowns in Woocommerce 3


I would like to remove from the dropdown of variations in WooCommerce product page following "option": WooCommerce "Select an option" issue

I found plenty of, apparently not working codes which should do the job. Probably outdated to the latest WooCommerce version.

What I tried and is partially working:

add_filter( 'woocommerce_dropdown_variation_attribute_options_args', 'my_wc_filter_dropdown_args', 10 );
function my_wc_filter_dropdown_args( $args ) {
    $args['show_option_none'] = '';
    return $args;
}

This is only working when I set some text between '', not empty. When it's added into functions.php exactly like above, it's without change and set to default text - "Select an option" like on the picture. I am not sure what's wrong here. I also tried "false" or "none" but didn't work with either option.

If anyone could help me with this I would be grateful.

I am using latest WP 4.9.6 and latest of WooCommerce (whatever version it is). Everything is updated to the latest version, even PHP (7.2).


Solution

  • The correct way to do it is to use woocommerce_dropdown_variation_attribute_options_html filter hook instead. Below the screenshot for normal variable product with default attribute dropdowns:

    enter image description here

    So there is 2 different case:

    1) Removing this html option completelly**:

    add_filter( 'woocommerce_dropdown_variation_attribute_options_html', 'filter_dropdown_option_html', 12, 2 );
    function filter_dropdown_option_html( $html, $args ) {
        $show_option_none_text = $args['show_option_none'] ? $args['show_option_none'] : __( 'Choose an option', 'woocommerce' );
        $show_option_none_html = '<option value="">' . esc_html( $show_option_none_text ) . '</option>';
    
        $html = str_replace($show_option_none_html, '', $html);
    
        return $html;
    }
    

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

    The html option is removed completely, keeping only option with product attribute values:

    enter image description here


    2) Remove only the text "Select an option" (you will have an option without label name):

    add_filter( 'woocommerce_dropdown_variation_attribute_options_html', 'filter_dropdown_option_html', 12, 2 );
    function filter_dropdown_option_html( $html, $args ) {
        $show_option_none_text = $args['show_option_none'] ? $args['show_option_none'] : __( 'Choose an option', 'woocommerce' );
        $show_option_none_text = esc_html( $show_option_none_text );
    
        $html = str_replace($show_option_none_text, '', $html);
    
        return $html;
    }
    

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

    enter image description here

    All code is tested on latest Woocommerce version 3.4.x