Hide Variable Product Dropdown That Has a Unique Variation Selected by Default in Woocommerce

Hide variable product dropdown that has a unique variation selected by default in Woocommerce

IMPORTANT: The code only works when the unique variation is selected as default form value:

The following code will hide from variable products that have only one variation enabled and selected by default, the attribute dropdown and the selected variation price:

add_action( 'woocommerce_before_add_to_cart_form', 'single_unique_variation_ui', 10 );
function single_unique_variation_ui(){
    global $product;

    if( ! $product->is_type('variable') )
        return; // Only variable products

    $available_variations = $product->get_available_variations(); // Get available variations
    $default_attributes   = $product->get_default_attributes();   // Get default attributes

    // Only for a unique selected variation by default
    if( ! ( sizeof($available_variations) == 1 && sizeof($default_attributes) == 1 ) )
        return;

    // Get the unique variation
    $variation = reset($available_variations);

    // Loop through
    if( reset($variation['attributes']) == reset($default_attributes) ) :
    // Styles
    ?>
    <style>
        div.woocommerce-variation-price, table.variations { display:none; }
    </style>
    <?php
    endif;
}

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

Without the code (the normal woocommerce behavior):

With the code (that hide the attribute dropdown and the price):

It will give you the same UI than simple products

Hide specific product attribute dropdown on WooCommerce variable products

Important: A default value (term) need to be set for the product attribute you want to hide in all variations for the related variable products.

You can use the following hooked function that will check if "Brand" attribute is set on your variable product.

The code will hide the first attribute dropdown from this variable product, using an injected inline CSS style rule (so it's important that "brand" dropdown is the first one above the others):

add_action( 'woocommerce_single_product_summary', 'hide_brands_attribute_dropdown', 1 );
function hide_brands_attribute_dropdown() {
    global $product;

    if( $product->is_type('variable') && $product->get_attribute('Brand') ){
        ?>
        <style>
        table.variations tbody tr:first-of-type {display:none;}
        </style>
        <?php
    }
}

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

Related:

• Hide specific product attribute terms on WooCommerce variable product dropdown
• Hide a variation attribute value in Woocommerce variable product dropdown

Hide a variation attribute value in Woocommerce variable product dropdown

Try the following instead that will hide "choose an option" and will hide "2,5 kg" option value from product attribute dropdown on single variable product pages:

add_filter( 'woocommerce_dropdown_variation_attribute_options_args', 'filter_dropdown_variation_args', 10, 1 );
function filter_dropdown_variation_args( $args ) {
    // Dont show "Choose an option"
    $args['show_option_none'] = false;

    // Remove the option value "2,5 kg"
    foreach( $args['options'] as $key => $option ){
        if( $option === "2,5 kg" ) {
            unset($args['options'][$key]);
        }
    }
    return $args;
}

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

Remove Choose an option from variable product dropdowns in Woocommerce 3

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:

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:

---

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.

All code is tested on latest Woocommerce version 3.4.x

Hide specific variations

The following solution worked on my theme, but you're running Bootstrap so you may have issues.

We'll modify the option tag of the options you want hidden with the hidden attribute. Take the following code and add it to your theme's functions.php or a custom plugin:

Custom Code

function custom_woocommerce_dropdown_variation_attribute_options_html( $html, $args )
{
    $product = $args[ 'product' ];
    $attribute = $args[ 'attribute' ];
    $terms = wc_get_product_terms( $product->get_id(), $attribute, array( 'fields' => 'all' ) );
    $options = $args[ 'options' ];
    if ( empty( $options ) && !empty( $product ) && !empty( $attribute ) ) {
        $attributes = $product->get_variation_attributes();
        $options = $attributes[ $attribute ];
    }

    foreach ( $terms as $term ) {
        if ( in_array( $term->slug, $options ) && ***SOME CONDITION***) {
            $html = str_replace( '<option value="' . esc_attr( $term->slug ) . '" ', '<option hidden value="' . esc_attr( $term->slug ) . '" ', $html );
        }
    }
    return $html;
}
add_filter( 'woocommerce_dropdown_variation_attribute_options_html', 'custom_woocommerce_dropdown_variation_attribute_options_html', 10, 2 );

Note that some browsers don't recognise the hidden attribute. If you want full cross browser compatibility, you'll want to look at the answers at How to hide a <option> in a <select> menu with CSS?. Adding css property style="display:none" may also work with some browsers.

Advanced Custom Fields

Now, in the code above, I've written ***SOME CONDITION***. This condition needs to check whether an option should be hidden or not. To add this information we need to create a custom field for the attribute. You can do this manually, but I do it with the Advanced Custom Fields Plugin (ACF).

1. Create a product attribute in Products->Attributes. Tick yes to Enable Archives? and make it type "Select". Then add the attribute terms under Configure terms.
2. Install Advanced Custom Fields onto your WordPress.
3. Create a new field group.
4. In the field group create a rule to Show this field group if Taxonomy Term is equal to Product **your attribute**.
5. In the field group create a field with field label='hidden', Field Type='True / False' and set the other settings as you like.
6. Publish/Update field group.
7. Go back to the terms you want to hide that you created in step 1. You should have a tickbox to select whether the attribute should be hidden or not. Tick all that apply.
8. Create the variable product with variations made up from the product attributes.
9. In the custom code, remove ***SOME CONDITION*** and replace it with get_field( 'hidden', $term ) ). This is an ACF function which will get the value of the 'hidden' field for that attribute's tern.

After all that, the terms you ticked as hidden should not appear in the dropdown on the product page. In my example you can see green is missing from the dropdown.

Hide product variable price until all variation fields are selected in WooCommerce

Updated - There is already dedicated some jQuery delegated events attached to the form, that you can use to show / hide the variable product price when a variation is selected or not…

Below I use show() or hide() jQuery functions that makes things smother, but you can use the jQuery css() function instead if you prefer...

Try the following instead:

The CSS:

.woocommerce .price,
.woocommerce-page .price {
    display: none;
}

The JS (jQuery):

jQuery(function($){

    // On selected variation event
    $('form.variations_form').on('show_variation', function(event, data){
        $('.woocommerce .price').hide('fast');
        console.log('Variation Id '+data.variation_id+' is selected | Hide price');
    });

    // On unselected (or not selected) variation event
    $('form.variations_form').on('hide_variation', function(){
        $('.woocommerce .price').show('fast');
        console.log('No variation is selected | Show price');
    });
});

Tested and works.

---

IT can be implemented in a hooked function (Will not work in some cases depending on the theme customizations):

add_action( 'woocommerce_single_product_summary', 'show_hide_product_variable_price', 8 );
function show_hide_product_variable_price() {
    global $product;

    if( $product->is_type('variable') ) {
        ?>
        <style> .woocommerce .price, .woocommerce-page .price { display: none; } </style>
        <script type="text/javascript">
        jQuery(function($){

            // On selected variation event
            $('form.variations_form').on('show_variation', function(){
                $('.woocommerce .price').hide('fast');
                console.log('Variation is selected | Hide price');
            });

            // On unselected (or not selected) variation event
            $('form.variations_form').on('hide_variation', function(){
                $('.woocommerce .price').show('fast');
                console.log('No variation is selected | Show price');
            });
        });
        </script>
        <?php
    }
}

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

---

Related Topics