[woof_mobile]

Dieser Shortcode fügt einen Container hinzu, in den der mobile Button eingefügt wird. Der mobile Button erscheint auf mobilen Geräten, um das versteckte WOOF Filterformular aufzurufen und es in einem kompakten Modus anzuzeigen, der für mobile Benutzer praktisch ist.

Sehen Sie sich die Demo auf Ihrem Mobilgerät an, um zu verstehen: https://demo.products-filter.com/

Manchmal funktioniert dieser Code aufgrund komplexer Seiten-DOM-Modelle nicht. In diesem Fall können Sie diesen Code verwenden. Fügen Sie ihn Ihrer functions.php-Datei des aktuellen WordPress-Themes hinzu:

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

Fügen Sie dann den folgenden Code in die Datei functions.php des aktuellen wp-Themes ein:

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

Oder um seine Darstellung überschaubarer zu gestalten:

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

Verwenden Sie anstelle eines Paares von Shortcodes [woof_mobile]+[woof] einen einzigen Shortcode [woof_mobile_custom].

Quelle: Ticket https://pluginus.net/support/topic/mobile-mode-doesn-t-work/