In add-to-cart-variation.js (line 291), variations are enabled or disabled by comparing WooCommerce attribute values to what's stored in <input> elements' value="...". This means that sanitize_title() cannot be used when building <input> elements, because sanitize_title() changes a string to lowercase and removes special characters.
_This propsed change handles values the same way as WooCommerce's original dropdown (only simple html encoding with esc_attr()) - see wc_dropdown_variation_attribute_options() in \woocommerce\includes\wc-template-functions.php._
Example: Consider two "Color" variations: "Red & Green" and "Blue & Yellow".
Original WooCommerce dropdown:
<td class="value">
<select id="color" class="" name="attribute_color" data-attribute_name="attribute_color">
<option value="">Choose an option</option>
<option value="Red & Green">Red & Green</option>
<option value="Blue & Yellow">Blue & Yellow</option>
</select>
...
Radio buttons (notice the wrongfully "slugified" values):
<td class="value">
<div>
<input type="radio" name="attribute_color" value="red-green" id="color_v_Red & Green" ><label for="color_v_Red & Green">Red & Green</label>
</div>
<div>
<input type="radio" name="attribute_color" value="blue-yellow" id="color_v_Blue & Yellow" ><label for="color_v_Blue & Yellow">Blue & Yellow</label>
</div>
...
Radio buttons w/suggested fix:
<td class="value">
<div>
<input type="radio" name="attribute_color" value="Red & Green" id="color_v_Red & Green" ><label for="color_v_Red & Green">Red & Green</label>
</div>
<div>
<input type="radio" name="attribute_color" value="Blue & Yellow" id="color_v_Blue & Yellow" ><label for="color_v_Blue & Yellow">Blue & Yellow</label>
</div>
...
In
add-to-cart-variation.js
(line 291), variations are enabled or disabled by comparing WooCommerce attribute values to what's stored in<input>
elements'value="..."
. This means thatsanitize_title()
cannot be used when building<input>
elements, becausesanitize_title()
changes a string to lowercase and removes special characters._This propsed change handles values the same way as WooCommerce's original dropdown (only simple html encoding with
esc_attr()
) - seewc_dropdown_variation_attribute_options()
in\woocommerce\includes\wc-template-functions.php
._Example: Consider two "Color" variations: "Red & Green" and "Blue & Yellow".
Original WooCommerce dropdown:
Radio buttons (notice the wrongfully "slugified"
value
s):Radio buttons w/suggested fix: