编辑极简WooCommerce主题：将产品标题移至图片上方

核心问题解答：product-image.php并非必须修改的文件 #

这个文件仅负责渲染产品图片区域，产品标题的默认输出逻辑不在其中——标题通常由product-summary.php或产品页面主模板（如single-product.php）控制。是否需要修改它，取决于你选择的布局调整方式。

具体解决方法（两种实用思路） #

方法1：通过WooCommerce钩子调整（推荐，无需修改模板文件）

这种方式无需改动核心模板，通过钩子将标题移至图片上方，同时隐藏原位置的标题：

1. 打开子主题的functions.php文件（务必使用子主题，避免主题更新丢失修改）
2. 添加以下代码：

// 在产品图片区域前输出标题
add_action( 'woocommerce_before_single_product_summary', 'move_product_title_above_image', 5 );
function move_product_title_above_image() {
    the_title( '<h1 class="product_title entry-title">', '</h1>' );
}

// 移除原来在摘要区的标题
add_action( 'woocommerce_single_product_summary', 'remove_default_product_title', 1 );
function remove_default_product_title() {
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
}

3. 保存后刷新产品页面，标题就会出现在图片上方。

方法2：修改模板文件（适合深度自定义布局场景）

如果主题自定义了产品页面结构，钩子方式不生效，可以直接调整模板：

• 找到主题下的woocommerce/single-product.php文件（若没有，复制WooCommerce默认的single-product.php到子主题的woocommerce文件夹）
• 找到输出产品标题的代码（通常是the_title( '<h1 class="product_title entry-title">', '</h1>' );），将其从.summary区域移至.woocommerce-product-gallery区域的前方
• 保存修改后刷新页面即可。

关于之前CSS不生效的说明 #

你之前添加的CSS无效，大概率是因为标题和图片的DOM顺序未调整——单纯下移图片只会改变图片位置，标题仍停留在原区域（比如右侧）。调整完DOM顺序后，可再用CSS微调样式，参考示例：

.product_title {
    margin-bottom: 20px;
    text-align: center; /* 匹配skims的居中标题样式 */
}
.woocommerce-product-gallery {
    width: 100%; /* 若之前是左右布局，改为全屏宽度 */
}

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