如何通过woocommerce_product_thumbnails钩子实现点击商品缩略图返回顶部？该钩子是否已废弃？

一、关于woocommerce_product_thumbnails钩子状态 #

woocommerce_product_thumbnails钩子并未被废弃，截至WooCommerce最新版本（8.x+），它仍是官方推荐用于修改或渲染商品缩略图区域的核心钩子之一。需要注意：

• WooCommerce 3.0版本后产品图库HTML结构有调整，但该钩子的作用域和调用逻辑保持不变
• 部分自定义主题可能重写产品图库模板，此时钩子是否生效取决于主题的具体实现

二、实现点击商品备选图片返回顶部的功能 #

你可以通过子主题的functions.php添加JavaScript代码来实现需求，以下是两种可行方案：

方案1：添加内联JavaScript（适合简单场景） #

将以下代码粘贴到子主题的functions.php文件中：

add_action( 'wp_footer', 'wc_thumbnail_click_scroll_to_top' );
function wc_thumbnail_click_scroll_to_top() {
    // 仅在单个产品页面加载脚本
    if ( ! is_product() ) return;
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // 选择商品备选图片链接（若主题结构不同，需调整选择器）
        const thumbnailLinks = document.querySelectorAll('.woocommerce-product-gallery__thumbnails a');
        
        thumbnailLinks.forEach(link => {
            link.addEventListener('click', function() {
                // 平滑滚动到页面顶部
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });
        });
    });
    </script>
    <?php
}

方案2：加载外部JS文件（适合复杂脚本管理） #

1. 在子主题目录下创建js文件夹，新建product-thumbnail-scroll.js文件，写入以下内容：

document.addEventListener('DOMContentLoaded', function() {
    const thumbnailLinks = document.querySelectorAll('.woocommerce-product-gallery__thumbnails a');
    
    thumbnailLinks.forEach(link => {
        link.addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    });
});

2. 在子主题的functions.php中添加脚本注册代码：

add_action( 'wp_enqueue_scripts', 'wc_enqueue_thumbnail_scroll_script' );
function wc_enqueue_thumbnail_scroll_script() {
    if ( is_product() ) {
        wp_enqueue_script(
            'wc-thumbnail-scroll',
            get_stylesheet_directory_uri() . '/js/product-thumbnail-scroll.js',
            array(),
            wp_get_theme()->get('Version'),
            true // 在页面底部加载脚本
        );
    }
}

注意事项 #

• 如果你的主题自定义了产品图库结构，需要调整JS中的元素选择器，替换为主题实际使用的缩略图元素选择器
• 若不需要平滑滚动效果，可移除behavior: 'smooth'，直接使用window.scrollTo(0, 0)

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