如何将WooCommerce产品缩略图移至主图片上方而非下方？

嘿，这个需求确实比侧边布局的方案少有人提，但其实用正确的方法完全可以实现，还不会破坏画廊的导航功能！我给你两个靠谱的解决方案，你可以根据自己的情况选择：

方案一：用WooCommerce钩子实现（推荐，无需修改模板） #

WooCommerce本身提供了钩子来控制元素的位置，我们只需要把默认在主图下方的缩略图钩子移除，再挂载到主图上方的钩子位置即可：

步骤1：添加PHP代码到主题functions.php #

把这段代码放到你当前主题的functions.php文件里，或者自定义插件中：

// 移除默认位于主图下方的产品缩略图
remove_action( 'woocommerce_product_after_image', 'woocommerce_show_product_thumbnails', 20 );

// 将缩略图挂载到主图片的上方位置
add_action( 'woocommerce_product_before_image', 'woocommerce_show_product_thumbnails', 20 );

步骤2：调整CSS适配布局 #

默认的样式是针对下方布局设计的，所以需要加一点CSS来优化上方的显示效果，比如调整间距、排列方式：

/* 调整缩略图容器的上下间距 */
.woocommerce div.product div.images .thumbnails {
    margin-bottom: 1.5em;
    margin-top: 0;
}

/* 保持缩略图的水平排列（以3列为例） */
.woocommerce div.product div.images .thumbnails.columns-3 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
}

.woocommerce div.product div.images .thumbnails a {
    flex: 0 0 calc(33.333% - 7px);
}

这个方案的好处是完全基于官方钩子，不需要修改模板文件，兼容性更强，主题更新也不容易失效。

方案二：修改产品图片模板文件（适合自定义主题） #

如果你的主题已经自定义了WooCommerce的产品图片模板，钩子方案可能不生效，这时候可以直接修改模板文件：

步骤1：复制模板文件到主题目录 #

找到WooCommerce插件里的templates/single-product/product-image.php文件，把它复制到你当前主题的woocommerce/single-product/目录下（如果没有这个目录就新建）。

步骤2：调整代码顺序 #

打开复制后的product-image.php，找到原本的结构：

<div class="images">
    <?php
    do_action( 'woocommerce_product_image' );
    do_action( 'woocommerce_product_thumbnails' );
    ?>
</div>

把缩略图的动作调用移到主图片的上方，修改后变成：

<div class="images">
    <?php
    do_action( 'woocommerce_product_thumbnails' ); // 移到主图上方
    do_action( 'woocommerce_product_image' );
    ?>
</div>

步骤3：同样添加CSS调整样式 #

和方案一的CSS代码一样，添加到主题的自定义CSS区域或者style.css文件里，确保布局美观。

为什么之前的尝试破坏了画廊导航？ #

你之前的操作可能是直接修改了DOM结构，但没有保留WooCommerce画廊JS依赖的类名和HTML结构（比如thumbnails容器类、缩略图的链接结构）。只要我们用上面的方法，保留官方的结构和类名，画廊的点击切换功能就会正常工作。

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