[woof_mobile]

Questo shortcode aggiunge un contenitore a cui viene inserito il pulsante mobile. Il pulsante mobile appare sui dispositivi mobili per richiamare il modulo di filtro WOOF nascosto e visualizzarlo in modalità compatta comoda per gli utenti mobili.

Vedi la demo sul tuo dispositivo mobile per capire: https://demo.products-filter.com/

A volte questo codice non funziona a causa di complessi modelli DOM della pagina. In tal caso, puoi usare questo codice. Aggiungilo al file functions.php del tuo tema WordPress corrente:

/**
 * 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();
}

Quindi nel file functions.php del tema wp corrente aggiungi il seguente codice:

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

OPPURE per renderne più gestibile la comparsa:

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 . '"]');
});

Invece di una coppia di shortcode [woof_mobile]+[woof], usa un singolo shortcode [woof_mobile_custom].

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