[woof_mobile]

Bu kısa kod, mobil düğmenin eklendiği bir kapsayıcı ekler. Mobil düğme, gizli WOOF filtre formunu çağırmak ve mobil kullanıcılar için uygun kompakt modda görüntülemek için mobil cihazlarda görünür.

Anlamak için mobil cihazınızdaki demoyu görün: https://demo.products-filter.com/

Bazen bu kod karmaşık sayfa DOM modelleri nedeniyle çalışmaz. Bu durumda, bu kodu kullanabilirsiniz. Mevcut WordPress temanızın functions.php dosyasına ekleyin:

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

Ardından mevcut wp temasının functions.php dosyasına aşağıdaki kodu ekleyin:

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

VEYA görünümünü daha yönetilebilir hale getirmek için:

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

Bir çift kısa kod [woof_mobile]+[woof] yerine, tek bir kısa kod [woof_mobile_custom] kullanın.

Kaynak: bilet https://pluginus.net/support/topic/mobile-mode-doesn-t-work/