WooCommerce产品分类短代码重复输出columns-x类如何解决

解决方案 #

移除<ul>元素上多余的columns类 #

有两种可行方案，按需选择：

方案1：使用WooCommerce过滤器修改循环类（推荐，无冗余代码）

先在你调用短代码的位置添加临时标记，避免修改影响站点其他位置的产品列表：

// 调用短代码前添加临时全局标记
$GLOBALS['custom_remove_ul_columns'] = true;
echo do_shortcode('[product_category category="home-kits" per_page="3" orderby="price" order="desc" columns="9"]');
// 调用完成后清除标记
unset($GLOBALS['custom_remove_ul_columns']);

再将以下代码添加到主题functions.php文件中：

add_filter('woocommerce_product_loop_classes', 'filter_product_loop_remove_columns_class', 10, 1);
function filter_product_loop_remove_columns_class($classes) {
    // 仅当临时标记存在时移除columns类
    if (isset($GLOBALS['custom_remove_ul_columns']) && $GLOBALS['custom_remove_ul_columns']) {
        // 过滤所有以columns-开头的类名
        $classes = preg_grep('/^columns-\d+$/', $classes, PREG_GREP_INVERT);
    }
    return $classes;
}

方案2：CSS样式覆盖（简单快速，无需修改PHP逻辑）

将以下样式添加到主题自定义CSS或样式表文件中，直接重置ul的宽度规则：

.content > .woocommerce.columns-9 ul.products.columns-9 {
    width: 100% !important;
    float: none;
    margin: 0;
}

product_category短代码columns参数不生效的常见原因 #

这是WooCommerce生态里的普遍问题，多数由以下原因导致：

• 当前主题重写了WooCommerce的product-category短代码模板，或是覆盖了产品循环的列数计算逻辑，优先级高于短代码传入的参数
• 部分旧版本WooCommerce存在参数优先级bug，后台「WooCommerce - 设置 - 产品 - 显示」里设置的默认产品列数，会覆盖短代码传入的columns值
• 站点安装的第三方WooCommerce布局/产品展示插件，劫持了短代码的参数输出
  排查方法：切换到官方默认Storefront主题测试，如果短代码columns参数正常生效，说明问题出在当前主题或第三方插件，对应修改重写逻辑即可。

内容的提问来源于stack exchange，提问作者Simon Hill