Jquery WooCommerce Select A Product Attribute Based on Previous Selection

In WooCommerce, I have a Couple of Attributes, Style and Frame Color.

When the options Aluminum, Acrylic or Mat Only are Selected, the only color option that appears is N/A via AJAX. However, to make things easy, I don’t want the end-user to have to select N/A, I would like it to automatically select if they choose either of these options and go back if they don’t.

     <select id="pa_style" class="" name="attribute_pa_style" data-attribute_name="attribute_pa_style" data-show_option_none="yes">
<option value="">Choose an option</option><option value="mat-frame" class="attached enabled">Mat &amp; Frame</option>
<option value="mat-only" class="attached enabled">Mat only</option>
<option value="aluminum-mount" class="attached enabled">Aluminum Mount</option>
<option value="face-mount-acrylic" class="attached enabled">Face Mount Acrylic</option>

    <select id="pa_frame-color" class="" name="attribute_pa_frame-color" data-attribute_name="attribute_pa_frame-color" data-show_option_none="yes">
    <option value="">Choose an option</option><option value="black" class="attached enabled">Black</option>
    <option value="green" class="attached enabled">Green</option>
    <option value="yellow" class="attached enabled">Yellow</option></select>

Here is my JFiddle. I put in some JS as well, but it is not good.


If there is any problem with this question, please leave feedback.

Read more here: Jquery WooCommerce Select A Product Attribute Based on Previous Selection

Leave a Reply

Your email address will not be published. Required fields are marked *