Skip to content

Instantly share code, notes, and snippets.

@whywilson

whywilson/Sticky Product Tabs of WooCommerce.html

Last active February 22, 2022 06:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save whywilson/e6773f34e7e8f91734714485fbeec4ec to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save whywilson/e6773f34e7e8f91734714485fbeec4ec to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. whywilson renamed this gist Feb 22, 2022. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions Sticky Product Tabs of WooCommerce → Sticky Product Tabs of WooCommerce.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    <!-- Load the script below after website loaded or in the custom product layout template. -->

    <script>
    let sticky_element = ".woocommerce-tabs ul.tabs.wc-tabs.product-tabs"
    let sticky_element_top = ".woocommerce-tabs.tabbed-content"
  2. whywilson revised this gist Feb 22, 2022. 1 changed file with 0 additions and 3 deletions.
    3 changes: 0 additions & 3 deletions Sticky Product Tabs of WooCommerce
    View file
    Original file line number Diff line number Diff line change
    @@ -31,7 +31,4 @@
    scrollTop: jQuery(sticky_element_top).offset().top - 60 - adminbar_height
    }, 600);
    }
    document.querySelectorAll(".badget-pdf").forEach((item) => {
    item.innerHTML = item.innerHTML.replace("Product ", "")
    })
    </script>
  3. whywilson renamed this gist Feb 22, 2022. 1 changed file with 0 additions and 0 deletions.
    0 HTML → Sticky Product Tabs of WooCommerce
    View file
    File renamed without changes.
  4. whywilson created this gist Feb 22, 2022.
    37 changes: 37 additions & 0 deletions HTML
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    <script>
    let sticky_element = ".woocommerce-tabs ul.tabs.wc-tabs.product-tabs"
    let sticky_element_top = ".woocommerce-tabs.tabbed-content"
    let has_adminbar = jQuery("#wpadminbar").length
    adminbar_height = has_adminbar == 1 ? jQuery("#wpadminbar").height() : 0
    window.addEventListener("scroll", function() {
    let header_height = jQuery("#masthead").height() + adminbar_height
    let product_tabs_offset_height = jQuery(sticky_element).offset().top - jQuery(document).scrollTop()
    let is_header_stuck = jQuery(".header .header-wrapper").hasClass("stuck")
    let is_product_tab_sticky = jQuery(sticky_element).hasClass("sticky-below-header")
    if (is_header_stuck && product_tabs_offset_height <= header_height) {
    if (!is_product_tab_sticky) {
    let height_to_top = header_height + "px"
    jQuery(sticky_element).addClass("sticky-below-header")
    jQuery(".sticky-below-header")[0].style.setProperty("--height-to-top", height_to_top)

    const divs = document.querySelectorAll('.sticky-below-header li a');
    divs.forEach(el => el.addEventListener('click', scrollToTab));
    }
    let body_overflow_x = document.querySelector('body').style.overflowX
    if (body_overflow_x == 'hidden' || body_overflow_x == '') {
    document.querySelector('body').style.overflowX = 'visible';
    }
    } else {
    jQuery(sticky_element).removeClass("sticky-below-header")
    }
    })

    function scrollToTab() {
    jQuery([document.documentElement, document.body]).animate({
    scrollTop: jQuery(sticky_element_top).offset().top - 60 - adminbar_height
    }, 600);
    }
    document.querySelectorAll(".badget-pdf").forEach((item) => {
    item.innerHTML = item.innerHTML.replace("Product ", "")
    })
    </script>