WooCommerce类别小部件中的锚点链接

德米特里

我使用的代码在存档页面/ shop的每个类别下显示产品:

第1类

产品1产品2产品3

2类

产品1产品2产品3

这是我的代码:

<?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; ?>

我还使用标准的小部件来显示WooCommerce类别。据我了解,文件是它的责任-woocommerce /包括/小部件/ class-wc-widget-product-categories.php。

如何修改此文件(functions.php代码)以添加锚链接?例如,在类别菜单中,我选择“类别2”,然后页面及其产品向下移动到“类别2”。

我只是找不到现成的解决方案,所以请您寻求帮助。我希望这段代码对其他用户有用。

Vkuter

你需要与A HREF添加一些JavaScript,并添加“数据链接”属性类别项在你的代码

<h2 class="category-title" data-link="<?php echo get_term_link( (int) $category->term_id, 'product_cat' ); ?>"><?php echo $category->name; ?></h2>

我创建了一个片段来演示:

$('.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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

获取类别小部件的Wordpress侧栏中的类别链接

来自分类Dev

隐藏woocommerce类别小部件中的子类别

来自分类Dev

woocommerce产品类别窗口小部件禁用父类别链接

来自分类Dev

获取侧边栏小部件,该小部件小部件显示Woocommerce中相同类别的产品

来自分类Dev

Woocommerce:产品类别小部件

来自分类Dev

Phtml中的Magento类别小部件

来自分类Dev

Phtml中的Magento类别小部件

来自分类Dev

在我的WooCommerce相关产品小部件中排除特定类别

来自分类Dev

Woocommerce-更改小部件以包括类别

来自分类Dev

WooCommerce Storefront 主题中的类别小部件不起作用

来自分类Dev

链接到框架中的锚点

来自分类Dev

如何在侧边栏小部件中修改和设置WooCommerce产品类别计数NUMBER的样式

来自分类Dev

锚点布局以在屏幕上的相对位置显示许多小部件

来自分类Dev

遍历类别 - wordpress 小部件

来自分类Dev

不同WooCommerce类别中的相同链接

来自分类Dev

从类别小部件中排除类别

来自分类Dev

链接到Rails App中页面上的锚点

来自分类Dev

在R Shiny中设置相对链接/锚点

来自分类Dev

如何在React中偏移链接和锚点?

来自分类Dev

Markdown链接到Sphinx中的reStructuredText锚点

来自分类Dev

在 Tkinter 中的文本小部件中添加文本链接

来自分类Dev

链接未引用锚点

来自分类Dev

如何在超链接中嵌入GWT小部件?

来自分类Dev

Google窗口小部件链接

来自分类Dev

WordPress的类别小部件下拉子弹

来自分类Dev

小部件类别WordPress,更改显示数量

来自分类Dev

小部件中的SurfaceView

来自分类Dev

小部件中的UITableView

来自分类Dev

小部件中的UITableView