如何在 woocommerce 产品循环中插入无限滚动

Question

我有一个自定义商店页面。我在其中根据类别显示产品。例如类别名称是 car 、 bus 、 boat etc

所以在我的自定义商店页面中我写了以下内容 html .

<div class="main-block">
 <h2>car</h2>
 <p>Description</p>
 <?php echo do_shortcode('[products limit="50" columns="4" category="car"]'); ?>    
</div>

<div class="main-block">
 <h2>Bus</h2>
 <p>Description</p>
 <?php echo do_shortcode('[products limit="50" columns="4" category="bus"]'); ?>    
</div>

<div class="main-block">
 <h2>Boat</h2>
 <p>Description</p>
 <?php echo do_shortcode('[products limit="50" columns="4" category="boat"]'); ?>   
</div>

一切正常，但问题是页面加载时间增加。所以我打算改变加载方法。不是加载每个类别的所有 50 种产品，而是首先加载 8 种产品，然后用户向下滚动然后加载其他产品，例如。

我如何为此修改代码？请帮忙。

如果有人遇到过同样的问题，请帮助解决。

Answer 1

解决此问题的快速方法是使用

https://wordpress.org/plugins/ajax-load-more/

并将 [products limit="50" columns="4" category="car"] 替换为

[ajax_load_more post_type="product" columns="4" css_classes="products" posts_per_page="4" transition="fade"  taxonomy="product_cat" taxonomy_terms="car" taxonomy_operator="IN" button_label=""]

阅读更多https://connekthq.com/plugins/ajax-load-more/docs/

或

如果您需要详细的解决方案，那么

阅读https://code.tutsplus.com/tutorials/how-to-create-infinite-scroll-pagination--wp-24873

如何在 woocommerce 产品循环中插入无限滚动

How to insert infinte scroll on woocommerce product loop

infinite-scroll

woocommerce