Change The Active Woocommerce Product Tab With Button Click

Hello,

I have added a custom global tab to all of our woocommerce product pages with the woocommerce booster plug-in. This tab (Titled: 'RFQ') has a form users can fill out to request more info on the product.

What I would like to do is have a button that, when clicked, makes the 'RFQ' tab the active tab on the page.

The site I'm trying to do this on is https://cncmachines.net.

Click HERE to see an example of our current product page set up with the tabs I mentioned.

Please note, we still want the description tab (Titled: 'SPECS') to be the default active tab upon page load, but when a user clicks on the 'EMAIL QUOTE' button below the price (just to the right of the product image), the 'RFQ' tab becomes active. How can I best accomplish this?

P.S. - The 'EMAIL QUOTE' button you currently see will open a pop up. I just used this as an example since this is where we want the new button that will make the 'RFQ' tab active to be located.

Thanks for any help that you can offer,

Matthew

  • Abdul Wajed
    • Staff

    Hi Matthew,

    I hope you are well today. :slight_smile:

    Let's assume your new RFQ button will be something like below with an ID of active-rfq

    <a href="#" class="button" id="active-rfq">RFQ QUOTE</a>

    If so you can use this function to achieve it:

    add_action( 'wp_footer', 'rfq_footer_scripts' );
    function rfq_footer_scripts(){
      ?>
      <script>
      jQuery(document).ready(function($){
    		$( "#active-rfq" ).click(function( event ) { // Replace the ID to match your button ID
    			event.preventDefault();
    			$(".wc-tabs li").each(function() {
    				if ( $( this ).hasClass( "active" ) ) {
    			        $( this ).removeClass( "active" );
    			    }
    			});
    			$("#tab-title-global_1").addClass("active");
    			$(".woocommerce-Tabs-panel").css("display","none");
    			$("#tab-global_1").css("display","block");
    		});
    	});
      </script>
      <?php
    }

    You can add this to your theme's functions.php file, before the closing PHP tag, or, if it's something you'll want no matter which theme you're using, you can add those codes as mu-plugins. To use mu-plugins, go to /wp-content/ and find the folder with name 'mu-plugins'. If there is no folder in that name, then create a folder, name it 'mu-plugins', create a file inside that, give any name you like and paste the code in there. You don't need to activate that plugin. Mu-plugins means must use plugins, so it will be activated automatically always. If you use mu-plugins then add a php start tag at the beginning of the code.

    Hope this helps! Please let me know if you need any further assistance. Have a nice day.

    Cheers!
    Wajed

  • Matthew
    • Recruit

    Thanks Wajed!

    This jQuery code works perfectly after I placed it in functions.php and replaced the shortcode for the popup trigger with the line of HTML you supplied.

    I also used the same line of HTML to create a second identical button at the bottom of the main content window (which is displayed under the "SPECS" tab). However, this button did not function like the one to the right of the product image. Rather it just causes the page to automatically jump to the top. After racking my brain I can't figure out why this button won't work like the button that is above the fold (to the right of the product image). Any thoughts?

    You can see the changes we made and try clicking the buttons to see the difference in function/result HERE. It's the same link I provided in my first message. Please let me know if you need any additional info and as always, thank you kindly for your help!

    Matthew

  • Predrag Dubajic
    • Support

    Hi Matthew,

    If you copy/pasted the same HTML for second button that means that you have two same IDs on the page and this can cause issues.

    So try changing the HTML of second button to something like this:
    <a href="#" class="button" id="active-rfq-second">RFQ QUOTE</a>

    And then change the script as well and change this line:
    $( "#active-rfq" ).click(function( event ) {
    To this:
    $( "#active-rfq, #active-rfq-second" ).click(function( event ) {

    Let us know if it works after that.

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.