如何在已安装My Travel主题的WooCommerce中调换产品页元素位置

方法一：使用自定义CSS（无需修改核心文件） #

• 打开浏览器开发者工具（快捷键F12），定位产品页面的图片容器（通常类名为.images）和预订详情容器（通常类名为.summary.entry-summary），确认它们的父容器类名（比如.single-product .product）。
• 进入WordPress后台，依次点击「外观」→「自定义」→「额外CSS」，粘贴以下代码：

@media (min-width: 768px) {
  .single-product .product {
    display: flex;
    flex-direction: row-reverse;
  }
  /* 修正间距，保持原布局视觉一致性 */
  .single-product .product .images {
    margin-left: 30px;
    margin-right: 0;
  }
}

• 保存后刷新产品页面即可生效。如果类名与实际不符，替换为开发者工具中找到的真实类名即可。

方法二：修改主题模板文件（适合有开发基础的用户） #

• 先创建并激活My Travel主题的子主题，避免主题更新导致修改丢失。
• 找到主题目录下的woocommerce/single-product.php文件，复制到子主题对应目录下。
• 打开该文件，找到输出图片和预订详情的代码段，通常类似：

<div class="images">
  <?php wc_get_template_part( 'single-product/product', 'image' ); ?>
</div>
<div class="summary entry-summary">
  <?php wc_get_template_part( 'single-product/summary' ); ?>
</div>

• 将两个容器的位置互换，修改后代码如下：

<div class="summary entry-summary">
  <?php wc_get_template_part( 'single-product/summary' ); ?>
</div>
<div class="images">
  <?php wc_get_template_part( 'single-product/product', 'image' ); ?>
</div>

• 保存文件后刷新页面，即可完成位置交换。

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