[woof_mobile]
This shortcode adds a container to which mobile button is inserted. Mobile button appears on mobile devices to call hidden WOOF filter form and display it in compact mode convenient for mobile users.
See the demo in your mobile device to understand: https://demo.products-filter.com/
Sometimes this code doesn’t work due to complex page DOM models. In that case, you can use this code. Add it to your current WordPress theme’s functions.php file:
/**
* 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();
}
Then into file functions.php of the current wp theme add next code:
add_action('wp_footer', function() {
echo do_shortcode('[woof_mobile_custom]');
});
OR to make its appearing more manageable:
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 . '"]');
});
Instead of a pair of shortcodes [woof_mobile]+[woof], use one shortcode [woof_mobile_custom].
Source: ticket https://pluginus.net/support/topic/mobile-mode-doesn-t-work/
Troubles? Ask for Support!