Anchor links in a WooCommerce categories widget - wordpress

Question

I use a code that displays products under each category on the archive page /shop:
Category 1
product 1 product 2 product 3
Category 2
product 1 product 2 product 3
Here is my code:
<?php
foreach( get_terms( array( 'taxonomy' => 'product_cat' ) ) as $category ) :
$products_loop = new WP_Query( array(
'post_type' => 'product',
'showposts' => -1,
'tax_query' => array_merge( array(
'relation' => 'AND',
array(
'taxonomy' => 'product_cat',
'terms' => array( $category->term_id ),
'field' => 'term_id'
)
), WC()->query->get_tax_query() ),
'meta_query' => array_merge( array(
// You can optionally add extra meta queries here
), WC()->query->get_meta_query() )
) );
?>
<h2 class="category-title"><?php echo $category->name; ?></h2>
<?php
while ( $products_loop->have_posts() ) {
$products_loop->the_post();
/**
* woocommerce_shop_loop hook.
*
* #hooked WC_Structured_Data::generate_product_data() - 10
*/
do_action( 'woocommerce_shop_loop' );
wc_get_template_part( 'content', 'product' );
}
wp_reset_postdata(); ?>
<?php endforeach; ?>
I also use a standard widget to display WooCommerce categories. As I understand it, the file is responsible for it - woocommerce / includes / widget / class-wc-widget-product-categories.php.
How can I modify this file (code for functions.php) to add anchor links? For example, in the categories menu, I select Category 2 and the page moves down to Category 2 with its products.
I just can’t find a ready-made solution, so I ask you for help. I hope this code will be useful to other users.

Answer 1

You need to add some javascript and add "data-link" attribute with a href for category term in your code
<h2 class="category-title" data-link="<?php echo get_term_link( (int) $category->term_id, 'product_cat' ); ?>"><?php echo $category->name; ?></h2>
I created a snippet to demonstrate:
$('.product-categories .cat-item > a').on('click', function(e) {
e.preventDefault();
var href = $(this).attr('href');
$('html, body').animate({
scrollTop: $("[data-link='" + href + "']").offset().top
}, 1000);
});
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}
.category-wrapper {
height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left">
<ul class="product-categories">
<li class="cat-item">
Category 1
</li>
<li class="cat-item">
Category 2
</li>
</ul>
</div>
<div class="right">
<div class="category-wrapper">
<h2 class="category-title" data-link="http://category1">Category 1</h2>
</div>
<div class="category-wrapper">
<h2 class="category-title" data-link="http://category2">Category 2</h2>
</div>
</div>