Avada主题布局优化：实现桌面4列、移动端2列的WooCommerce产品展示

方法一：自定义CSS覆盖默认样式（通用方案） #

Avada主题默认对4列产品布局在移动端显示单列，可通过自定义CSS强制改为双列：

1. 进入WordPress后台，导航到 Avada > Options > Custom CSS
2. 粘贴以下代码：

/* 移动端WooCommerce产品双列布局 */
@media only screen and (max-width: 767px) {
    .fusion-shop-layout .fusion-product-wrapper {
        width: 50% !important;
        float: left;
        padding: 0 8px;
        box-sizing: border-box;
    }
    .fusion-shop-layout .fusion-product-wrapper:nth-child(2n+1) {
        clear: left;
    }
}

3. 保存设置后，刷新移动端页面验证效果

这段代码会在屏幕宽度≤767px时，将每个产品容器宽度设为50%，并通过nth-child规则控制每行显示2个产品，避免布局错位。!important用于强制覆盖Avada的默认样式优先级。

方法二：Avada Builder产品模块可视化设置（仅适用于Builder创建的页面） #

如果你的产品页面是用Avada Builder的Products模块搭建的：

• 编辑目标页面，找到Products模块
• 切换到Design选项卡，找到Responsive设置组
• 将Mobile Columns选项改为2，保存模块并更新页面

此方法无需代码，仅对Builder创建的页面生效，默认WooCommerce归档页（如Shop页）仍需用方法一处理。

前置检查 #

确保已在WooCommerce设置中配置产品列数为4：

• 进入 WooCommerce > 设置 > 产品 > 显示
• 将产品列数设为4并保存

内容的提问来源于stack exchange，提问作者Luca Di Ferdinando