When you say “based on a selected Woocommerce variation,” exactly how is that done? Does a user click on a button? Is there a class or ID that indicates what that variation is? If it’s a button or other control that the user clicks, you can add an onclick event handler that assigns a showtable class to the table that’s supposed to be displayed.
Variations are simply presented in HTML drop-down form elements. The onclick event will work like crouchingbruin suggests, but the onchange event might be a little better.
When the drop-down selection changes, toggle the display style property of the tables from none to block or table or whatever, and back again, depending on the new selection.
Thanks for the reply, @crouchingbruin @bcworkz.
Sorry, variation isn’t based on a select dropdown because I’m using a swatch plugin. It is based of a ul li format.
Here is the code.
<ul class="variable-items-wrapper button-variable-wrapper" data-attribute_name="attribute_production-speed">
<li data-wvstooltip="Standard" class="variable-item button-variable-item button-variable-item-standard selected" title="Standard" data-value="Standard">
<span class="variable-item-span variable-item-span-button">Standard</span>
</li>
<li data-wvstooltip="Fast" class="variable-item button-variable-item button-variable-item-fast" title="Fast" data-value="Fast">
<span class="variable-item-span variable-item-span-button">Fast</span>
</li>
</ul>
Would the onchange or onclick event work here?
Not onchange, onclick still would. It would be easiest to add event listeners with jQuery. WP has its own local version you can load through wp_enqueue_script().
Thanks for your help, @bcworkz
I got it to work.
Here’s my code
<script type="text/javascript">
$(document).ready(function()
{
$('li.button-variable-item-standard').click(function(e) {
$("#lead-time-standard").show();
$("#lead-time-express").hide();
});
$('li.button-variable-item-express').click(function(e) {
$("#lead-time-express").show();
$("#lead-time-standard").hide();
});
});
</script>
It might not be the most efficient but it gets the job done.
