Wordpress 如何动态更改每行产品的数量-WooCommerce

我在自定义主题中使用woocommerce插件。默认情况下，每行显示4个产品，但我希望根据类别中的总产品来显示它。 例如 如果类别中有3种产品，则在一列中显示3种产品。 如果有6个或9个产品，则每列显示3个产品。或 如果共有8个产品，则每列显示4个产品。

---

如果有12个或更多产品，则每列显示6个产品

以下是确保hmtl正确的代码。但是你仍然需要修复css，但是我没有做很多主题，所以我不能真正帮助你

add_filter('loop_shop_columns', 'my_loop_shop_columns');
function my_loop_shop_columns() {
    global $wp_query;

    // calculate the amount of products visible on the current page
    $posts_on_page = min($wp_query->found_posts, $wp_query->get('posts_per_page'));

    if($posts_on_page >= 12) return 6;
    if($posts_on_page % 4 == 0) return 4;
    if($posts_on_page % 3 == 0) return 3;
    return 4;
}

---

您可以随时使用jquery重新计算您的产品。这是实现这一目标的一种方法，也是一种干净、简单的解决方案

First in functions remove the smallscreen css from woocommerce like so if needed (i prefer to remove it since i dont use it):
add_filter( 'woocommerce_enqueue_styles', 'woo_dequeue_styles' );
function woo_dequeue_styles( $enqueue_styles ) {
    // Remove the smallscreen optimisation
    unset( $enqueue_styles['woocommerce-smallscreen'] );    
    return $enqueue_styles;
}

如果没有，那么创建一个js文件，并将其列在主题中，然后添加以下代码

(function ($) {
$(document).ready(function() {
$(document).ready(productsCount);
$(window).on('resize',productsCount);

function productsCount(){
    // This is example of 4 per row so you may need to tweek those
    // First remove the first and last classes added by woocommerce
    $('ul.products li').removeClass('first last');

    //For resolutions equal or above 992px wide 4 per row
    if($(window).width() >= 992) {
        $('ul.products li:nth-child(4n+1)').addClass('first');
        $('ul.products li:nth-child(4n)').addClass('last');
    }
    //For resolutions between 991px and 768px wide 3 per row
    if($(window).width() >= 768 && $(window).width() <= 991) {
        $('ul.products li:nth-child(3n+1)').addClass('first');
        $('ul.products li:nth-child(3n)').addClass('last');
    }   
    // For resolutions between 580px and 767px wide 2 per row - it just look 
    // better in my designs so you may want to tweek this
    if($(window).width() >= 580 && $(window).width() <= 767) {
        $('ul.products li:nth-child(2n+1)').addClass('first');
        $('ul.products li:nth-child(2n)').addClass('last');
    }       
    // Here we remove any woocommerce class since we dont need them.  
    if($(window).width() <= 580) {
        $('ul.products li').removeClass('first last');
    }
}
})(jQuery);

（函数（$）{
$（文档）.ready（函数（）{
$（文档）.ready（productsCount）；
$（窗口）.on（'resize'，productsCount）；
函数productsCount（）{
//这是一个每行4个的示例，因此您可能需要检查这些
//首先删除woocommerce添加的第一个和最后一个类
$（'ul.products li'）.removeClass（'first-last'）；
//对于大于等于992px宽的分辨率，每行4个
如果（$（窗口）.width（）>=992）{
$（'ul.products li:nth child（4n+1）'）。addClass（'first'）；
$（'ul.products li:nth child（4n）'）.addClass（'last'）；
}
//对于991px和768px之间的分辨率，每行宽3
如果（$（窗口）.width（）>=768&&$（窗口）.width（）=580&&$（窗口）.width（）您好，非常感谢您的帮助。此代码运行良好，但如何根据我们的条件在单个产品li中添加css类？我不确定您想问什么。请您重新措辞好吗？您好，我可能需要在产品标签中添加自定义类名：这应该允许我的css根据NUB指定不同的块宽度列的er，例如：.custom-3-cols.products.product{width:33%}.custom-4-cols.products.product{width:25%}谢谢