我使用的代码在存档页面/ 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”。
我只是找不到现成的解决方案,所以请您寻求帮助。我希望这段代码对其他用户有用。
你需要与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] 删除。
我来说两句