如何调整WooCommerce邮件通知移除数量列后的布局

1. 直接调整表格列的宽度分配 #

打开email-order-items.php，找到订单项目表格的表头和表体行代码，给对应列添加宽度样式：

• 给产品信息列的<th>和<td>设置占比更大的宽度，比如75%
• 给价格列设置剩余宽度，同时保留右对齐属性

示例修改后的代码片段：

<!-- 表头部分 -->
<tr>
  <th class="product-name" style="width: 75%;">产品</th>
  <!-- 已注释的数量列 -->
  <th class="product-price" style="width: 25%; text-align: right;">价格</th>
</tr>

<!-- 表体项目行 -->
<tr>
  <td class="product-name" style="width: 75%;"><?php echo esc_html( $item['name'] ); ?></td>
  <td class="product-price" style="width: 25%; text-align: right;"><?php echo wc_price( $item['total'] ); ?></td>
</tr>

2. 通过全局CSS统一控制 #

如果主题或WooCommerce有专门管理邮件样式的文件（比如主题style.css或WooCommerce的emails/email-styles.php），找到对应列的类选择器，直接修改宽度和对齐规则：

.order-items .product-name {
  width: 75%;
}
.order-items .product-price {
  width: 25%;
  text-align: right;
}

3. 测试适配效果 #

修改后发送测试邮件，验证不同邮件客户端（如Gmail、Outlook）的显示效果，可根据实际情况调整百分比数值，直到布局符合预期。

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