How to automatically link to WooCommerce product tabs from the short description.

Want to automatically link from the description to the different tabs of a WooCommerce product page easily? And open them if they are not open?

Well let’s see how to do it with PHP and JavaScript, this one:

Mr. code

/* Link to WooCommerce tabs */
add_action( 'woocommerce_single_product_summary', 'wphelp_scroll_tabs_products', 21 );
function wphelp_scroll_tabs_products() {
global $post, $product; 
// Link to description tab
if ( $post->post_content ) {
echo '<p><a class="go-to-tab" href="#tab-description">' . __( 'Read more', 'woocommerce' ) . ' &rarr;</a></p>';
}
// Link to additional info tab
if ( $product && ( $product->has_attributes() || apply_filters( 'wc_product_enable_dimensions_display', $product->has_weight() || $product->has_dimensions() ) ) ) {
echo '<p><a class="go-to-tab" href="#tab-additional_information">' . __( 'Additional information', 'woocommerce' ) . ' &rarr;</a></p>';
}
// Link to reviews tab
if ( comments_open() ) {
echo '<p><a class="go-to-tab" href="#tab-reviews">' . __( 'See reviews', 'woocommerce' ) . ' &rarr;</a></p>';
}
// Link to custom tab
if ( $post->post_content ) { echo '<p><a class="go-to-tab" href="#custom-tab">' . __( 'Instructions', 'woocommerce' ) . ' &rarr;</a></p>'; }
?>
<script>
jQuery(document).ready(function($){
$('a.go-to-tab').click(function(e){
e.preventDefault();
var tabhash = $(this).attr("href");
var tabli = 'li.' + tabhash.substring(1);
var tabpanel = '.panel' + tabhash;
$(".wc-tabs li").each(function() {
if ( $(this).hasClass("active") ) {
$(this).removeClass("active");
}
});
$(tabli).addClass("active");
$(".woocommerce-tabs .panel").css("display","none");
$(tabpanel).css("display","block");
$('html,body').animate({scrollTop:$(tabpanel).offset().top}, 750);
});
});
</script>
<?php
}Code language: PHP (php)

Where do I put Mr. code?

As usual, you can add the code to different places:

• At the end of the functions.php file of the active theme.
• Creating a plugin just for this functionality.
• In your customizations plugin or mu plugin.

Save the changes and the code will work.

What does Mr. code do?

The best thing about this code is that you don’t have to do anything in your WooCommerce products, once created it automatically adds links to the various tabs following the content of your short product description.

Each section relative to the link that will be created to the corresponding tab indicates the class of the tab (#tab-reviews, #tab-description, etc.), which are defined by WooCommerce.

Moreover, if you have any additional tabs, right click on them in your browser, and then click the “Inspect” link and it will show you the tab class (#tab-whatever), and you can add another link to that tab as well, using the model of the first tab, as you can see in the code above.

You can, of course, customize the texts that will be displayed to link to each tab.

When you have it to your liking, you will see that new links will automatically appear on the product page, leading directly to the corresponding tabs.

In addition, the tabs will open if they were closed, all with a smooth scrolling effect.

I hope you liked this trick, it adds a very interesting customization to any online store, which will make your product pages much more interactive, easy to navigate and attractive to your customers.