Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Woocommerce – UseTwo Separate Select Field Values for a Conditional Statement

I’m trying to show/hide the cart button depending on 2 separate select field values.

My logic is this:
Display the cart button if selectId #pa_custom-engraving = 'no' OR if selectId #pa-color != 'custom-print'. Otherwise I want to hide the cart.

This is what I have so far which works unless you continue to toggle the select fields they cancel each other out. How can I combine this into proper ‘OR’ conditional statement?

JS

document.getElementById('pa_custom-engraving').addEventListener('change', function () {
    var style = this.value == 'no' ? 'block' : 'none';
    document.getElementsByClassName('woocommerce-variation-add-to-cart')[0].style.display = style;
});

document.getElementById('pa_color').addEventListener('change', function () {
    var pstyle = this.value !== 'custom-print' ? 'block' : 'none';
    document.getElementsByClassName('woocommerce-variation-add-to-cart')[0].style.display = pstyle;
});

HTML

<select id="pa_custom-engraving">
 <option value="">Choose an option</option>
 <option value="no">No</option>
 <option value="yes">Yes</option>
</select>   

<select id="pa_color">
 <option value="">Choose an option</option>
 <option value="black">Black</option>
 <option value="white">White</option>
 <option value="custom-print">Custom Print</option>
</select>
Tags:

2

Answers


  1. 0

    Add the same listener to both selects. On change, look at both select values, and apply the conditions separated by ||:

    const cartButton = document.querySelector('.woocommerce-variation-add-to-cart');
const selects = ['#pa_custom-engraving', '#pa_color'].map(c => document.querySelector(c));
for (const select of selects) {
  select.addEventListener('change', () => {
    const displayStyle= selects[0].value === 'no' || selects[1].value !== 'custom-print'
      ? 'block'
      : 'none';
    cartButton.style.display = displayStyle;
  });
}
    Login or Signup to reply.
  2. 0

    You can take the all selected value in an array and check if the array includes/not include the value you want to match:

    var sel = Array.from(document.querySelectorAll('#pa_custom-engraving, #pa_color'));
sel.forEach(function(el){
  el.addEventListener('change', function () {
    var val = sel.map(i => i.value);
    var style = val.includes('no') || !val.includes('custom-print') ? 'block' : 'none';
    document.getElementsByClassName('woocommerce-variation-add-to-cart')[0].style.display = style;
  });
});
    <select id="pa_custom-engraving">
 <option value="">Choose an option</option>
 <option value="no">No</option>
 <option value="yes">Yes</option>
</select>   

<select id="pa_color">
 <option value="">Choose an option</option>
 <option value="black">Black</option>
 <option value="white">White</option>
 <option value="custom-print">Custom Print</option>
</select>
<button class="woocommerce-variation-add-to-cart">woocommerce-variation-add-to-cart</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search