WooCommerce: Scroll To Product Tab @ Single Product Page

by Tutor Aspire December 6, 2022

Depending on your theme, just creating an href link anchor to a product tab might or might not work i.e. it might not scroll to it as it’s currently closed.

Here comes a way to create href links that not only scroll to the tab, but also open it in case it’s closed (this will guarantee the anchor scroll to the tab). Also, a little jQuery “animate” will provide the smooth scroll and enhance UX. Hope you enjoy!

Create links to smooth scroll to any WooCommerce Product Tab

PHP Snippet: Create Custom Links to Scroll To Product Tabs @ Single Product Page

/**
 * @snippet       Scroll to tab - WooCommerce Single Product
 * @how-to        Get tutoraspire.com FREE
 * @author        Tutor Aspire
 * @compatible    WooCommerce 3.5.7
 * @donate $9     https://tutoraspire.com
 */

add_action( 'woocommerce_single_product_summary', 'tutoraspire_scroll_to_and_open_product_tab', 21 );
 
function tutoraspire_scroll_to_and_open_product_tab() {

global $post, $product;

// LINK TO SCROLL TO DESC TAB
if ( $post->post_content ) {
echo '' . __( 'Read more', 'woocommerce' ) . ' →';
}

// LINK TO SCROLL TO ADDITIONAL INFO TAB
if ( $product && ( $product->has_attributes() || apply_filters( 'wc_product_enable_dimensions_display', $product->has_weight() || $product->has_dimensions() ) ) ) {
echo '' . __( 'Additional information', 'woocommerce' ) . ' →';
}

// LINK TO SCROLL TO REVIEWS TAB
if ( comments_open() ) {
echo '' . __( 'Reviews', 'woocommerce' ) . ' →';
}

?>

Product Tabs

WooCommerce: Scroll To Product Tab @ Single Product Page

PHP Snippet: Create Custom Links to Scroll To Product Tabs @ Single Product Page

Related posts:

WooCommerce: Add Upsell Area @ Checkout Page

WooCommerce: Move & Customize Upsells @ Single Product

You may also like