如何使用Swiper JS实现WooCommerce商品详情页产品图库轮播效果

现有代码问题 #

• HTML结构不完整：<figure>标签未闭合，静态测试用的Slide占位内容未删除，产品图片遍历逻辑放在了Swiper容器外部，还存在无对应起始标签的</ul>、冗余</div>标签
• 资源重复加载：如果已经全局引入过Swiper的JS、CSS资源，不需要在模板文件中重复引入Swiper JS，避免版本冲突
• 变量未定义：代码中直接使用了未声明的$slider_classes、$rtl变量，会触发PHP警告
• 产品图片未绑定到Swiper结构：遍历出来的产品图没有插入到swiper-slide容器内，无法在轮播中正常渲染

修正后完整product-thumbnails.php代码 #

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

global $post, $product;

$attachment_ids = $product->get_gallery_attachment_ids();
// 把主图也加入到图库轮播里，如果不需要可以删除下面3行
$main_image_id = $product->get_image_id();
if ($main_image_id && !in_array($main_image_id, $attachment_ids)) {
    array_unshift($attachment_ids, $main_image_id);
}

if ( $attachment_ids ) {
    ?>
    <figure class="woocommerce-product-gallery__wrapper">
        <!-- Swiper 结构 -->
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <?php
                foreach ( $attachment_ids as $attachment_id ) {
                    $image_link = wp_get_attachment_url( $attachment_id );
                    if ( ! $image_link )
                        continue;
                    $image_title = esc_attr( get_the_title( $attachment_id ) );
                    $image = wp_get_attachment_image( 
                        $attachment_id, 
                        apply_filters( 'single_product_small_thumbnail_size', 'shop_single' ), 
                        0, 
                        [
                            'title' => $image_title,
                            'alt'   => $image_title
                        ]
                    );
                    // 把图片包裹在swiper-slide容器内
                    echo '<div class="swiper-slide">' . $image . '</div>';
                }
                ?>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>
        </div>
    </figure>
    <!-- Swiper 初始化代码，建议放到主题全局JS文件中，不需要写在模板里 -->
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var swiper = new Swiper(".mySwiper", {
            pagination: {
                el: ".swiper-pagination",
                type: "progressbar",
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            // 按需添加配置，比如循环轮播：loop: true, 自动播放：autoplay: {delay: 3000}
        });
    });
    </script>
    <?php
}

注意事项 #

• 请确认你的主题已经全局引入了Swiper的CSS文件，否则轮播样式会异常
• 上述代码默认把商品主图也加入到轮播序列中，如果不需要可以删除标注的对应代码行
• Swiper初始化代码建议放到主题的全局JS文件中，不要内嵌在模板里，性能更优
• 如果需要保留WooCommerce自带的图片放大镜、灯箱功能，可以在Swiper的slideChange回调中重新触发对应功能的初始化即可

内容的提问来源于stack exchange，提问作者Mr. Punk Online