Anchor links in a WooCommerce categories widget

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.

Vkuter Vkuter · Accepted Answer · 2020-01-21T13:30:08

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">
      <a href="http://category1">Category 1</a>
    </li>
    <li class="cat-item">
      <a href="http://category2">Category 2</a>
    </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>

Anchor links in a WooCommerce categories widget

1 Answers