【问题标题】:How to change the number of product categories per row using WooCommerce如何使用 WooCommerce 更改每行的产品类别数
【发布时间】:2016-12-20 07:14:47
【问题描述】:

我正在使用 Woocommerce 设置在初始商店页面上显示类别缩略图,然后在其中显示产品及其缩略图。

我希望初始类别页面每行显示 3 个缩略图,产品页面每行显示 5 个类别。

每行显示我使用过的 5 个产品:

add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
    function loop_columns() {
    return 5;
    }
}

这也会更改类别页面和商店页面上每行的缩略图。

有谁知道如何将类别页面更改为每行 3 个缩略图并在商店页面上每行保持 5 个产品?

【问题讨论】:

    标签: php wordpress woocommerce categories product


    【解决方案1】:

    使用WooCommerce conditionals tags,将帮助您实现这一目标。我已经更改了您的代码:

    add_filter('loop_shop_columns', 'loop_columns');
    if (!function_exists('loop_columns')) {
        function loop_columns() {
            if ( is_product_category() ) {
                return 3;
            } else { // for other archive pages and shop page
                return 5;
            }
        }
    }
    

    此代码位于您的活动子主题或主题的 function.php 文件中

    建议:有时,有必要更改一些 css 规则,以获得正确的每行显示。

    WooCommerce 条件标签用法:

    要定位商店页面存档:

    if ( is_shop() ) {
        // return the number of items by row
    }
    

    要定位产品标签档案:

    if ( is_product_tag() ) {
        // return the number of items by row
    }
    

    定位所有产品档案,除了产品类别档案(添加 ! 在开始)

    if ( !is_product_category() ) {
        // return the number of items by row
    }
    

    您还可以定义一些特定的类别标签 (请参阅相关文档)


    参考资料:

    【讨论】:

    • 改进建议:仅使用 if ( is_product_category() ) { return 3; } 其他 { 返回 5; }。这样您就不会两次使用相同的变量 (3)
    【解决方案2】:

    在我的店面子主题中。接受的答案对我不起作用。我不得不将 woocommerce/templates/loop/loop-star.php 复制到我的子主题子文件夹 /woocommerce/loop/ 并像这样修改它:

    if ( ! defined( 'ABSPATH' ) ) {
        exit;
    }
    
    // FMP20181126 - Categories are SubCategories set # of columns.
    $display_type = woocommerce_get_loop_display_mode();
    if ( 'subcategories' === $display_type || 'both' === $display_type ) {
            wc_set_loop_prop( 'columns', 3 );
    }   
    
    ?>
    
    <ul class="products columns-<?php echo esc_attr( wc_get_loop_prop( 'columns' ) ); ?>">
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2021-05-08
      • 2022-01-20
      • 1970-01-01
      • 2019-04-27
      • 1970-01-01
      • 1970-01-01
      • 2016-05-08
      相关资源
      最近更新 更多