61
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 Get tutoraspire.com FREE
* @author Tutor Aspire
* @compatible WooCommerce 5
* @donate $9 https://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() )