如何配置WooCommerce单产品滑块钩子仅桌面启用、移动端禁用？

WooCommerce没有自带后台设置实现这个需求，你可以通过以下代码方案实现：

方案1：结合PHP设备判断（近似实现） #

利用wp_is_mobile()函数识别设备类型，在移动端禁用对应功能，桌面端保留原有逻辑：

控制Flexslider仅在桌面启用 #

add_filter( 'woocommerce_single_product_flexslider_enabled', 'control_flexslider_by_device' );
function control_flexslider_by_device( $enabled ) {
    // 移动端禁用Flexslider，桌面端保持默认设置
    return wp_is_mobile() ? false : $enabled;
}

控制Photoswipe仅在桌面启用 #

add_filter( 'woocommerce_single_product_photoswipe_options', 'control_photoswipe_by_device' );
function control_photoswipe_by_device( $options ) {
    // 移动端返回空数组禁用Photoswipe，桌面端保留原有配置
    return wp_is_mobile() ? [] : $options;
}

方案2：精确匹配768px断点（前端动态控制） #

如果需要严格按照768px的屏幕宽度判断，PHP无法直接获取前端屏幕尺寸，需结合JavaScript动态处理：

禁用移动端Flexslider #

将以下代码添加到主题的functions.php文件中：

add_action( 'wp_footer', 'disable_flexslider_on_mobile' );
function disable_flexslider_on_mobile() {
    ?>
    <script>
        function checkScreenSize() {
            const flexSliderWrap = document.querySelector('.woocommerce-product-gallery__wrapper');
            if (!flexSliderWrap) return;

            if (window.innerWidth < 768) {
                // 移除Flexslider标识类并销毁实例
                flexSliderWrap.classList.remove('flexslider');
                flexSliderWrap.classList.add('no-flexslider');
                if (window.jQuery && jQuery(flexSliderWrap).data('flexslider')) {
                    jQuery(flexSliderWrap).flexslider('destroy');
                }
            } else {
                // 桌面端重新初始化Flexslider
                if (!flexSliderWrap.classList.contains('flexslider') && window.jQuery) {
                    flexSliderWrap.classList.add('flexslider');
                    jQuery(flexSliderWrap).flexslider({
                        animation: 'slide',
                        controlNav: 'thumbnails',
                        directionNav: false,
                        smoothHeight: false,
                        slideshow: false,
                        after: function() {
                            jQuery(document.body).trigger('woocommerce_slider_loaded');
                        }
                    });
                }
            }
        }

        // 页面加载和窗口 resize 时执行判断
        window.addEventListener('load', checkScreenSize);
        window.addEventListener('resize', checkScreenSize);
    </script>
    <?php
}

禁用移动端Photoswipe #

同样添加到主题的functions.php文件中：

add_action( 'wp_enqueue_scripts', 'control_photoswipe_loading' );
function control_photoswipe_loading() {
    // 先取消默认加载的Photoswipe资源
    wp_dequeue_script( 'photoswipe' );
    wp_dequeue_script( 'photoswipe-ui-default' );
    wp_dequeue_style( 'photoswipe' );
    wp_dequeue_style( 'photoswipe-default-skin' );

    // 动态判断屏幕宽度，仅桌面端加载资源
    ?>
    <script>
        function loadPhotoswipeIfNeeded() {
            if (window.innerWidth >= 768) {
                const head = document.querySelector('head');
                const wcAssetUrl = '<?php echo esc_url( WC()->plugin_url() ); ?>/assets';

                // 加载样式文件
                const cssLinks = [
                    wcAssetUrl + '/css/photoswipe/photoswipe.css',
                    wcAssetUrl + '/css/photoswipe/default-skin/default-skin.css'
                ];
                cssLinks.forEach(url => {
                    const link = document.createElement('link');
                    link.rel = 'stylesheet';
                    link.href = url;
                    head.appendChild(link);
                });

                // 加载脚本并初始化
                const script1 = document.createElement('script');
                script1.src = wcAssetUrl + '/js/photoswipe/photoswipe.min.js';
                head.appendChild(script1);

                const script2 = document.createElement('script');
                script2.src = wcAssetUrl + '/js/photoswipe/photoswipe-ui-default.min.js';
                script2.onload = () => {
                    if (window.wc_product_photoswipe) window.wc_product_photoswipe();
                };
                head.appendChild(script2);
            }
        }

        window.addEventListener('load', loadPhotoswipeIfNeeded);
        window.addEventListener('resize', loadPhotoswipeIfNeeded);
    </script>
    <?php
}

说明：方案1基于用户代理判断设备，可能将宽屏平板判定为移动端；方案2严格按照768px断点动态调整，更贴合你的需求。

内容的提问来源于stack exchange，提问作者kein-404