[woof_mobile]

Ce shortcode ajoute un conteneur dans lequel le bouton mobile est inséré. Le bouton mobile apparaît sur les appareils mobiles pour appeler le formulaire de filtre WOOF caché et l'afficher dans un mode compact pratique pour les utilisateurs mobiles.

Voir la démo sur votre appareil mobile pour comprendre : https://demo.products-filter.com/

Parfois, ce code ne fonctionne pas en raison de modèles DOM de page complexes. Dans ce cas, vous pouvez utiliser ce code. Ajoutez-le au fichier functions.php de votre thème WordPress actuel :

/**
 * Custom mobile filter shortcode for WOOF
 * Usage: [woof_mobile_custom]
 */
add_shortcode('woof_mobile_custom', 'woof_mobile_custom_shortcode');

function woof_mobile_custom_shortcode($atts) {
// Parse attributes
    $atts = shortcode_atts(array(
        'button_text' => 'Filters',
        'button_color' => '#ff6b35',
        'button_position' => 'bottom-right' // bottom-right, bottom-left, top-right, top-left
            ), $atts);

// Generate unique ID for multiple instances
    $unique_id = 'woof_mobile_' . uniqid();

// Position styles
    $position_styles = '';
    switch ($atts['button_position']) {
        case 'bottom-left':
            $position_styles = 'bottom: 20px; left: 20px;';
            break;
        case 'top-right':
            $position_styles = 'top: 20px; right: 20px;';
            break;
        case 'top-left':
            $position_styles = 'top: 20px; left: 20px;';
            break;
        default: // bottom-right
            $position_styles = 'bottom: 20px; right: 20px;';
    }

    ob_start();
    ?>
    <div class="woof_custom_mobile_wrapper" id="<?php echo esc_attr($unique_id); ?>">
        <!-- Open button -->
        <button class="woof_custom_mobile_btn" style="<?php echo esc_attr($position_styles); ?> background: <?php echo esc_attr($atts['button_color']); ?>;">
            <span class="woof_mobile_icon">☰</span>
            <span class="woof_mobile_text"><?php echo esc_html($atts['button_text']); ?></span>
        </button>

        <!-- Overlay -->
        <div class="woof_custom_mobile_overlay"></div>

        <!-- Sidebar with filter -->
        <div class="woof_custom_mobile_sidebar">
            <div class="woof_custom_mobile_header">
                <h3><?php echo esc_html($atts['button_text']); ?></h3>
                <button class="woof_custom_mobile_close">✕</button>
            </div>
            <div class="woof_custom_mobile_content">
                <?php 

$woof_params = [];

foreach ($atts as $key => $value) {
if (!in_array($key, $button_params) AND !empty($value)) {
$woof_params[] = $key . '="' . esc_attr($value) . '"';
}
}

$woof_shortcode = '[woof' . (!empty($woof_params) ? ' ' . implode(' ', $woof_params) : '') . ']';

echo do_shortcode($woof_shortcode);

 ?>
            </div>
        </div>
    </div>

    <style>
        #<?php echo esc_attr($unique_id); ?> .woof_custom_mobile_btn {
            display: none;
            position: fixed;
            z-index: 999;
            color: white;
            border: none;
            border-radius: 50px;
            padding: 12px 20px;
            font-size: 16px;
            font-weight: bold;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        #<?php echo esc_attr($unique_id); ?> .woof_custom_mobile_btn:hover {
            opacity: 0.9;
            transform: scale(1.05);
        }

        #<?php echo esc_attr($unique_id); ?> .woof_mobile_icon {
            font-size: 20px;
            margin-right: 8px;
        }

        /* Show button only on mobile */
        @media (max-width: 768px) {
            #<?php echo esc_attr($unique_id); ?> .woof_custom_mobile_btn {
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        /* Overlay background */
        #<?php echo esc_attr($unique_id); ?> .woof_custom_mobile_overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 9998;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        #<?php echo esc_attr($unique_id); ?> .woof_custom_mobile_overlay.active {
            display: block;
            opacity: 1;
        }

        /* Sidebar panel */
        #<?php echo esc_attr($unique_id); ?> .woof_custom_mobile_sidebar {
            position: fixed;
            top: 0;
            left: -100%;
            width: 85%;
            max-width: 400px;
            height: 100%;
            background: white;
            z-index: 9999;
            overflow-y: auto;
            transition: left 0.3s ease;
            box-shadow: 2px 0 10px rgba(0,0,0,0.3);
        }

        #<?php echo esc_attr($unique_id); ?> .woof_custom_mobile_sidebar.active {
            left: 0;
        }

        /* Filter header */
        #<?php echo esc_attr($unique_id); ?> .woof_custom_mobile_header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            background: #f5f5f5;
            border-bottom: 1px solid #ddd;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        #<?php echo esc_attr($unique_id); ?> .woof_custom_mobile_header h3 {
            margin: 0;
            font-size: 20px;
            font-weight: bold;
        }

        /* Close button */
        #<?php echo esc_attr($unique_id); ?> .woof_custom_mobile_close {
            background: transparent;
            border: none;
            font-size: 28px;
            cursor: pointer;
            color: #333;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.2s;
        }

        #<?php echo esc_attr($unique_id); ?> .woof_custom_mobile_close:hover {
            color: <?php echo esc_attr($atts['button_color']); ?>;
        }

        /* Filter content */
        #<?php echo esc_attr($unique_id); ?> .woof_custom_mobile_content {
            padding: 20px;
        }

        /* Hide on desktop */
        @media (min-width: 769px) {
            #<?php echo esc_attr($unique_id); ?> {
                display: none;
            }
        }

        /* Disable body scroll when filter is open */
        body.woof_mobile_filter_open {
            overflow: hidden !important;
        }
    </style>

    <script>
        jQuery(document).ready(function ($) {
            var wrapper = $('#<?php echo esc_js($unique_id); ?>');

    // Open filter
            wrapper.find('.woof_custom_mobile_btn').on('click', function () {
                wrapper.find('.woof_custom_mobile_sidebar').addClass('active');
                wrapper.find('.woof_custom_mobile_overlay').addClass('active');
                $('body').addClass('woof_mobile_filter_open');
				
				// FIX: Reinitialize Chosen/Select2 after sidebar is visible
    setTimeout(function() {
        // For Chosen
        wrapper.find('.woof_custom_mobile_content select.chosen-select').trigger('chosen:updated');
        
        // For Select2
        wrapper.find('.woof_custom_mobile_content select.select2-hidden-accessible').each(function() {
            $(this).select2('destroy').select2();
        });
        
        // Trigger WOOF redraw if needed
        if (typeof woof_current_values !== 'undefined') {
            $(document).trigger('woof_redraw_done');
        }
    }, 100);
            });

    // Close by button
            wrapper.find('.woof_custom_mobile_close').on('click', function () {
                closeFilter();
            });

    // Close by overlay click
            wrapper.find('.woof_custom_mobile_overlay').on('click', function () {
                closeFilter();
            });

    // Close function
            function closeFilter() {
                wrapper.find('.woof_custom_mobile_sidebar').removeClass('active');
                wrapper.find('.woof_custom_mobile_overlay').removeClass('active');
                $('body').removeClass('woof_mobile_filter_open');
            }

    // Close by ESC key
            $(document).on('keydown', function (e) {
                if (e.key === 'Escape' AND wrapper.find('.woof_custom_mobile_sidebar').hasClass('active')) {
                    closeFilter();
                }
            });
        });
    </script>
    <?php
    return ob_get_clean();
}

Ensuite, ajoutez le code suivant dans le fichier functions.php du thème wp actuel :

add_action('wp_footer', function() {
   echo do_shortcode('[woof_mobile_custom]');
});

OU pour le rendre plus gérable :

add_action('wp_footer', function() {
    // Don't show on specific pages
    if (is_page('privacy-policy') || is_page('contact') || is_page('about')) {
        return;
    }
    
    // Only show on WooCommerce pages
    if (!is_shop() && !is_product_category() && !is_product_tag() && !is_product_taxonomy()) {
        return;
    }
    
    // Get shop page URL
    $shop_url = wc_get_page_permalink('shop');
    
    // Display mobile filter with redirect to shop page
    echo do_shortcode('[woof_mobile_custom redirect="' . $shop_url . '"]');
});

Au lieu d'une paire de shortcodes [woof_mobile]+[woof], utilisez un seul shortcode [woof_mobile_custom].

Source: ticket https://pluginus.net/support/topic/mobile-mode-doesn-t-work/