Removing the “jump” effect clicking through the “tabs” on product pages

  • Resolved richardwilde90

    (@richardwilde90)


    4 years, 1 month ago

    Hello, I would like you to help me with removing the jump effect when clicking through the tabs on the product pages.

    My site visitors get confused when they click the tabs on the product pages as the page jumps and they loose their place when viewing the page.

    Please help!

    Thanks.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

  • Have a look at: https://gist.github.com/andrea-sdl/e3beaa8e2e3256cc4efa0f8527b627aa

    Thread Starter richardwilde90

    (@richardwilde90)

    This works perfectly in console.

    However, i am not sure where to put this code into my theme files.

    I tried putting it into functions.php but i didn’t work I am not sure if its need deferring.

    where would the best place for this code to sit?

    jQuery(“.woocommerce-tabs li a”).off(“click”);
    jQuery(“.woocommerce-tabs li a”).click(function(e){
    e.preventDefault();
    jQuery(“.woocommerce-tabs li”).removeClass(“active”);
    jQuery(this).parent().addClass(“active”);
    jQuery(“.woocommerce-Tabs-panel:visible”).hide();
    jQuery(“.woocommerce-Tabs-panel:visible”).hide();
    jQuery(jQuery(this).attr(“href”)).show();
    return false;})

    That code is jQuery. It needs to be put in a .js file. Try putting it in your themes: customscript.js for starters.

    Thread Starter richardwilde90

    (@richardwilde90)

    I found my themes customscript.js. However, this did not work when entered thjs code.

    What other options do i have please?

    Moderator bcworkz

    (@bcworkz)

    Your code may need to be wrapped with a jQuery( document ).ready() call to ensure it does not execute until the DOM has loaded. Be sure there are script tags referencing both customscript.js and the main jQuery module on all product pages.

    Thread Starter richardwilde90

    (@richardwilde90)

    do you mean like this?

    jQuery( document ).ready(

    jQuery(“.woocommerce-tabs li a”).off(“click”);
    jQuery(“.woocommerce-tabs li a”).click(function(e){
    e.preventDefault();
    jQuery(“.woocommerce-tabs li”).removeClass(“active”);
    jQuery(this).parent().addClass(“active”);
    jQuery(“.woocommerce-Tabs-panel:visible”).hide();
    jQuery(“.woocommerce-Tabs-panel:visible”).hide();
    jQuery(jQuery(this).attr(“href”)).show();
    return false;})

    )

    Thread Starter richardwilde90

    (@richardwilde90)

    This is the final working solution.

    I put it in the single-product.php file. however, it works in other javascript files. 

    <script type="text/javascript">
jQuery('document').ready(function () {
jQuery(".woocommerce-tabs li a").off("click");
jQuery(".woocommerce-tabs li a").click(function(e){
e.preventDefault(); 
jQuery(".woocommerce-tabs li").removeClass("active");
jQuery(this).parent().addClass("active");
jQuery(".woocommerce-Tabs-panel:visible").hide(); 
jQuery(".woocommerce-Tabs-panel:visible").hide(); 
jQuery(jQuery(this).attr("href")).show(); 
return false;})
});
</script>
    • This reply was modified 4 years, 1 month ago by bcworkz. Reason: code fixed
Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Removing the “jump” effect clicking through the “tabs” on product pages’ is closed to new replies.