One of the most common usability issues in WooCommerce shops is the way filters are displayed — especially on mobile devices. By default, filters are placed in a sidebar, which often drops below the product grid in responsive views. This layout significantly reduces the visibility and usability of the filters:

• Users need to scroll all the way down the page to access filters
• Many may never realize filters are even available
• The filtering process becomes slow and frustrating
• Your shop ends up looking less professional

This is not just a minor UX issue — poor filtering experience can lead to lower conversions, reduced engagement, and ultimately lost sales.

The ShopMaker PRO solution: Filter popup

ShopMaker PRO offers a much more refined and user-friendly filtering experience. Instead of using a static sidebar, you can enable a popup-based filter system. This allows your users to toggle the filter panel only when they need it, keeping the focus on products and improving the layout for both desktop and mobile users.

This feature is available via the Shop Products widget.

Why is this layout essential for a professional shop?

• ✅ Better UX on mobile — users no longer need to scroll down to find filters
• ✅ Cleaner product grid — more space for highlighting products
• ✅ Increased conversions — users can find what they want faster
• ✅ Modern design — looks and feels like high-end ecommerce platforms
• ✅ Highly flexible — users can show/hide filters as needed

How to enable the filter popup layout

🔹 Option 1: Use a pre-built template (Recommended)

1. Go to ShopMaker → Import Templates
2. Choose a template with the popup filters layout
3. Import the template
4. Assign it as your Shop page template via ShopMaker → WooCommerce Templates

That’s it! You now have a professional, responsive, popup-based filtering system.

🔹 Option 2: Build the layout manually

1. Create or edit the template for the Shop page using Elementor
2. Add the Shop Products widget
3. Add the Shop Filters widget directly below the Shop Products widget
4. Make sure both widgets are set to 100% width, and placed inside a container set to a vertical direction.
   You can do this by selecting the parent container and setting:
   • Layout → Direction: Vertical
   • Align Items: Stretch
   • Ensure no additional columns or sections interfere with the layout
5. In the Shop Products widget:
   • Go to the Content tab → Filters Link
   • Enable the toggle Show Filters Link
6. In the Shop Filters widget:
   • Go to Advanced → Responsive
   • Use the responsive visibility settings to hide the widget on desktop or other breakpoints if needed

Tips

• The popup layout works especially well on mobile devices, where screen space is limited. By showing a clean “Show Filters” link above the product grid, users can access filters only when needed — without cluttering the layout. This improves navigation and usability on all devices.
• Consider adding a funnel icon next to the “Show Filters” link to improve discoverability
• Always test across breakpoints to ensure the popup filters behave as expected