On the single product page for a variable product, multiple dropdowns display so that users can select their desired attribute choice.
In certain cases, you’d want them to follow the exact top-to-bottom attribute order while they’re selecting a specific variation. With that I mean that you want them to select the first attribute first, then the second, then the third… basically you want to disable the “next attribute select dropdowns” unless the previous select changes to a value that is not null.
Better shown in an image than said, so here’s the GIF, and with that the PHP/jQuery snippet. Enjoy!
PHP/JS Snippet: Disable Next Attribute Dropdowns If Attribute Is Not Selected @ Variable Product Single Product Page
/**
* @snippet Toggle Attribute Selects @ Single Product
* @how-to businessbloomer.com/woocommerce-customization
* @author Rodolfo Melogli, Business Bloomer
* @compatible WooCommerce 5
* @community https://businessbloomer.com/club/
*/
add_action( 'woocommerce_before_single_product', 'bbloomer_disable_variable_product_selects_unless_previous_selected' );
function bbloomer_disable_variable_product_selects_unless_previous_selected() {
global $product;
if ( ! $product->is_type( 'variable' ) ) return; // exit if not variable
if ( count( $product->get_available_variations() ) < 2 ) return; // exit if only 1 attribute
wc_enqueue_js( "
function toggle_attributes() {
$('table.variations tbody tr').each(function(){
if ($(this).prev().find('td.value select').val()=='') {
$(this).find('td.value select').attr('disabled',true).val(''); // if previous has no value, disable and reset
} else $(this).find('td.value select').attr('disabled',false);
});
}
toggle_attributes();
$('table.variations select').change( function(){
toggle_attributes();
});
" );
}
This code works well!..Thanks man.
I have one wish if you can help.
I’m have been trying for 2 weeks now and no luck 🙂
Example: (Variable product with: SIZE(S, M, L), PRINTING TECHNIQUE (Sito, DTF), COLOR (Sito-gold, silver,…; DTF (green, blue, red).
I click on the first attribute (“SIZE”) in which I have 3 variations (S, M, L), then the second one would be “PRINTING TECHNIQUE” (this one contains 2 variations)…..When I select variation no. 2 (inside of “PRINTING TECHNIQUE”), then the next step of the 3rd attribute opens for me, where I choose a color – since the first variation of a certain technique does not support these colors.
Are you able to add to cart if you select no color? Because I don’t think so! Let me know
I love this code. Can we hide all the variable options and display: none? So only the first option will be visible, and the next option will appear once the user selects the previous option.
Thank you! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Dear author,
It seems that the plugin stopped working in the recent Woocommerce versions (I think 6.0). We would be grateful if you could check.
Thank you,
AT
Works for me, sorry! Try switching theme and disabling plugins (except Woo) temporarily, and see if the snippet works?