Support » Fixing WordPress » Show a div ID based on a selected Woocommerce variation

  • How to show a div ID based on a selected Woocommerce variation?
    For example, if option A is selected, show table #ABC. If option B is selected, show table #DEF

    ST

Viewing 5 replies - 1 through 5 (of 5 total)
  • 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.

    Moderator bcworkz

    (@bcworkz)

    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.

    Thread Starter stan255

    (@stan255)

    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?

    Moderator bcworkz

    (@bcworkz)

    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().

    Thread Starter stan255

    (@stan255)

    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.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Show a div ID based on a selected Woocommerce variation’ is closed to new replies.