Question

我在自定义主题中使用woocommerce插件。默认情况下，woocommerce每行显示4个产品，但我想根据类别中的总产品显示它。例如如果一个类别中有3个产品，则在一列中显示3个产品。如果每列有6或9个产品显示3个产品。要么如果总产品比每列显示4个产品。如果有12个产品或超过每列显示6个产品。

Answer 1

这是确保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;
}

Answer 2

您始终可以使用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);

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

2 个答案: