如何仅在智能手机端将WooCommerce商品设为两列显示？

嘿，我来帮你搞定这两个问题！咱们一步步来：

一、让PHP函数仅在智能手机端生效 #

你原来的函数会全局把商品列数改成2，不管是桌面还是移动端。要让它只在移动设备生效，咱们可以用WordPress自带的wp_is_mobile()函数来判断设备类型：

add_filter( 'loop_shop_columns', 'wc_loop_shop_columns', 1, 10 );
/*
* Return a new number of maximum columns for shop archives
* @param int Original value
* @return int New number of columns
*/
function wc_loop_shop_columns( $number_columns ) {
    // 仅在移动设备上返回2列，桌面端保留原有设置
    if ( wp_is_mobile() ) {
        return 2;
    }
    return $number_columns;
}

补充说明： #

wp_is_mobile()会识别所有移动设备（包括平板），如果想更精准地只针对手机（比如屏幕宽度≤480px），PHP没办法直接判断前端屏幕宽度，这时候更推荐用CSS来控制列数（也就是下面要讲的方案），或者结合JS动态修改，但前者更简单可靠。

二、修复CSS不生效的问题 #

你在调试器里能生效，但加进自定义CSS没效果，大概率是选择器优先级不够，被WooCommerce或主题的默认样式覆盖了。咱们换个更精准的选择器试试：

@media (max-width: 480px) {
    /* 匹配WooCommerce商品列表的专属类，优先级更高 */
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        width: 48% !important; /* 用48%而不是50%，留一点间距避免换行 */
        float: left;
        margin-right: 2%; /* 添加右侧间距 */
        margin-bottom: 2em; /* 保留商品底部的间距 */
        clear: none !important; /* 清除可能存在的clear样式，避免单列 */
    }
    /* 每2个商品清除右侧间距，保证排列整齐 */
    .woocommerce ul.products li.product:nth-child(2n) {
        margin-right: 0;
    }
}

排查要点： #

• 选择器优先级：WooCommerce默认的商品样式用了.woocommerce ul.products li.product这类专属选择器，比你原来的.entry-content .products li优先级更高，所以需要用更匹配的选择器。
• 缓存问题：添加CSS后记得清除浏览器缓存（快捷键Ctrl+Shift+R），或者刷新页面时强制刷新，避免加载旧的样式文件。
• 自定义CSS位置：确保你是把代码加在了正确的地方——比如WordPress后台的「外观 > 自定义 > 额外CSS」，或者主题自带的自定义CSS面板，不要加在错误的文件里。
• 语法错误：检查前面的CSS代码有没有语法错误（比如未闭合的括号），如果前面的代码出错，后面的CSS可能不会生效。

最终建议 #

如果想更灵活控制不同屏幕尺寸的列数，其实更推荐只用CSS方案，把PHP函数删掉，直接用上面的CSS代码，这样可以精准控制不同宽度的设备（比如平板用3列，手机用2列），避免PHP判断设备的局限性。

内容的提问来源于stack exchange，提问作者Dr.MTR