Wordpress
How to auto link to WooCommerce product tabs from short description
How to remove JavaScript to reply to comments in WordPress if you don't need it
How to add a custom message when paying in WooCommerce according to the selected country
How to fix critical WordPress error
How to turn off the default animation on Divi image galleries
Do you 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?
The magic code
add_action( 'woocommerce_single_product_summary', 'ayudawp_scroll_tabs_productos', 21 );
function ayudawp_scroll_tabs_productos() {
global $post, $product;
if ( $post->post_content ) {
echo '<p><a class="ir-a-la-tab" href="#tab-description">' . __( 'Ver más', 'woocommerce' ) . ' →</a></p>';
}
if ( $product && ( $product->has_attributes() || apply_filters( 'wc_product_enable_dimensions_display', $product->has_weight() || $product->has_dimensions() ) ) ) {
echo '<p><a class="ir-a-la-tab" href="#tab-additional_information">' . __( 'Información adicional', 'woocommerce' ) . ' →</a></p>';
}
if ( comments_open() ) {
echo '<p><a class="ir-a-la-tab" href="#tab-reviews">' . __( 'Ver valoraciones', 'woocommerce' ) . ' →</a></p<
}
if ( $post->post_content ) { echo '<p><a class="ir-a-la-tab" href="#tab-personalizada">' . __( 'Instrucciones', 'woocommerce' ) . ' →</a></p>'; }
?>
<script>
jQuery(document).ready(function($){
$('a.ir-a-la-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
}
Where do I put the code?
As usual, you can add the code to different sites:
- At the end of the functions.php file of the active theme.
- Creating a plugin just for this functionality.
- In your customization plugin or mu plugin.
Save the changes and the code will work.
What does the 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 different tabs after the content of your short description of the product.
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.
What's more, if you have any additional tabs, right click on them in your browser, and then click on the "Inspect" link and it will show you the class of the tab (# tab-foo), and you can add another link to that too tab, 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 automatically appear on the product page, which lead directly to the corresponding tabs.
Date update on 2021-02-16. Date published on 2021-02-16. Category: Computer class Author: Oscar olg Fuente: ayudawp