如何修改WordPress Kaffa子主题的WooCommerce产品页面布局？

针对你用Kaffa子主题运营WooCommerce网站的需求，把产品页「图片在上、表单在下」的布局改成「表单在左、图片在右」的分栏样式，按以下步骤操作：

1. 准备子主题模板文件 #

WordPress主题更新会覆盖父主题修改，必须在子主题内操作：

• 从WooCommerce插件的templates/single-product/目录，或Kaffa父主题的woocommerce/single-product/目录，复制以下文件到子主题对应目录（子主题无对应文件夹则新建woocommerce/single-product/）：
  • single-product.php（产品页主模板）
  • product-image.php（产品图片模块）
  • product-summary.php（产品摘要/加入购物车表单模块）

2. 修改主模板布局结构 #

打开子主题里的single-product.php，找到你提供的这段代码：

<div class="row centeres">
  <div class="col-xl-9 col-lg-12 col-xs-12">
    image & form 
  </div>
</div>

替换为分栏结构，将表单（产品摘要）放在左侧列，图片放在右侧列：

<div class="row">
  <div class="col-md-6">
    <?php wc_get_template_part( 'single-product/product', 'summary' ); ?>
  </div>
  <div class="col-md-6">
    <?php wc_get_template_part( 'single-product/product', 'image' ); ?>
  </div>
</div>

3. 适配移动端样式（可选） #

默认col-md-6在屏幕小于768px时会自动堆叠成上下布局，可在子主题的style.css里添加样式优化间距：

/* 产品页分栏间距调整 */
.single-product .row .col-md-6 {
  padding: 0 15px;
  margin-bottom: 20px;
}

/* 移动端自适应优化 */
@media (max-width: 767px) {
  .single-product .row .col-md-6 {
    width: 100%;
    padding: 0;
  }
}

4. 验证效果 #

保存所有修改后，刷新产品页确认布局是否符合预期。若未看到变化，清理网站缓存和浏览器缓存后重试。

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