如何在移动端将WooCommerce关联产品设置为2列显示

你之前的CSS只设置了单个产品项的宽度，但没给父容器（ul.products）配置flex布局的核心属性，导致产品没法自动换行到第二列。试试下面的完整代码：

@media screen and (max-width: 767px){
  /* 给父容器开启flex布局并允许自动换行 */
  .related.products ul.products {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 -5px; /* 抵消子元素的左右内边距，防止容器横向溢出 */
  }

  .related.products ul.products li.product {
    flex: 0 0 48%; /* 固定占比48%，不放大不缩小，留2%做间距 */
    width: 48%;
    margin: 0 5px 15px; /* 给产品项加左右和底部间距 */
    box-sizing: border-box; /* 确保padding、border不会撑宽元素 */
  }
}

关键调整说明： #

• 给ul.products添加display: flex和flex-wrap: wrap，让产品项在一行放不下时自动换行
• justify-content: space-between让两列产品自动均分剩余空间，避免右侧留白
• 把产品宽度设为48%（而非40%），配合左右margin，既保证两列布局，又不会挤在一起
• box-sizing: border-box确保产品的内边距和边框不会超出设定的宽度

如果Beaver Builder的样式优先级更高导致代码不生效，可以给选择器加更高优先级（比如body .related.products ul.products），必要时再给属性加!important（优先用精准选择器，尽量少用!important）。

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