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!
On a single variable product page load with more than 1 attribute, all selects but the first are disabled. As soon as you select the first attribute, the second becomes enabled, and so on. If you change your mind and null one of the selects, the following selects will get disabled once again.
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 Get tutoraspire.com FREE
* @author Tutor Aspire
* @compatible WooCommerce 5
* @donate $9 https://www.tutoraspire.com
*/
add_action( 'woocommerce_before_single_product', 'tutoraspire_disable_variable_product_selects_unless_previous_selected' );
function tutoraspire_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() )
