WooCommerce 相关产品：行答案

【问题标题】：WooCommerce Related Products: RowsWooCommerce 相关产品：行
【发布时间】：2021-10-18 03:39:31
【问题描述】：

如何将相关产品输出显示为 4 行？

function woo_related_products_limit() {
                  global $product;
                    
                    $args['posts_per_page'] = 6;
                    return $args;
                }
                add_filter( 'woocommerce_output_related_products_args', 'jk_related_products_args', 20 );
                  function jk_related_products_args( $args ) {
                    $args['posts_per_page'] = 12; // 12 related products
                    $args['rows'] = 4; // arranged in 2 rows
                    return $args;
                }

【问题讨论】：

标签： php wordpress woocommerce

【解决方案1】：

试试这个

add_filter( 'woocommerce_output_related_products_args', 'change_number_related_products', 9999 );
function change_number_related_products( $args ) {
 $args['posts_per_page'] = 12; // # of related products
 $args['columns'] = 3; // # of columns per row
    
 return $args;
}

如果你想分成 4 行，你必须做一些 CSS。基本上，这完全取决于您要显示多少产品，与行数和列数无关。就像我在代码中添加了 12 种产品一样，默认情况下它将显示 3 列。所以一切都取决于产品的数量和很少的 CSS。我在下面添加了 3 或 4 列 CSS 代码。如果您将列数显示在上面，只需在代码中添加类，您还可以检查输出代码，我也附上了屏幕截图。你的 CSS 代码如下：

@media (min-width: 768px) {
.site-main .related.products ul.products li.product {
        width: 33.3333%;  // for 3 columns per row
}
}

@media (min-width: 768px) {
.site-main .related.products ul.products li.product {
    width: 22%; // for 4 columns per row
    float: left;
    margin-right: 4%;
}
}

根据您的要求应用此代码。让我知道它的工作。谢谢。

【讨论】：