Help with Horizontal Layout, Mobile Mode, and Header Search using [woof_front_builder]
The support doesn work on Saturdays and Sundays, so some Friday requests can be answered on Monday. If you have problems with registration ask help on contact us page pleaseIf you not got email within 24~36 business hours, firstly check your spam box, and if no any email from the support there - back to the forum and read answer here. DO NOT ANSWER ON EMAILS [noreply@pluginus.net] FROM THE FORUM!! Emails are just for your info, all answers should be published only here.
The support doesn work on Saturdays and Sundays, so some Friday requests can be answered on Monday.
Hello,
I am using your HUSKY plugin with Elementor Pro to build a filter system for my WooCommerce shop. I am using the [woof_front_builder name='************'] shortcode to display my product filter on my shop page.
I am facing three challenges and would appreciate your expert guidance:
1. Creating a Horizontal Filter Layout:
My primary goal is to create a horizontal filter bar, where all the filter sections are arranged side-by-side in 2 lines. Currently, all my filter sections are displaying vertically, one on top of the other (as shown in my attached screenshot).
Question: Could you please provide the correct procedure or setting within the [woof_front_builder] to achieve a clean, horizontal layout where all filter elements (dropdowns, price inputs, etc.) are arranged side-by-side in 2 lines only?
2. Implementing Mobile Mode for the Same Filter:
I also need to ensure the filter works well on mobile devices. I want to take the same customized filter and have it transform into a convenient"Filter" button on mobile. When a user taps this button, the filter should slide out or pop up in a compact mode. I have read about the"Mobile mode" option and the [woof_mobile] shortcode in your documentation.
Question: How do I correctly configure the [woof_front_builder] settings and where do I place the [woof_mobile] shortcode in my Elementor template so that on mobile, a button appears that opens my customized filter in a compact, user-friendly way?
3. Adding a Header Search Bar:
Finally, I want to add a product search bar to my website's main header (which is also built with Elementor). This search bar needs to integrate with HUSKY. When a user on any page (like the homepage) starts typing, it should take them to the shop page and apply the search. When they are already on the shop page, it should filter the results using AJAX.
Question: What is the best and easiest method to add a HUSKY-powered search bar to my Elementor header that provides this instant redirect and AJAX filtering functionality?
To summarize, my three main questions are:
How to create a horizontal layout with [woof_front_builder]?
How to properly set up the mobile button for that same filter?
How to add an integrated search bar to the header?
Thank you for your time and expert guidance.
Hello
Thank you for the detailed questions. Let me address each one:
1. Horizontal Layout (2 rows)
This is purely a CSS customization task. The [woof_front_builder] outputs standard HTML structure, and you need to apply CSS to arrange elements horizontally.
Basic approach:
- Use CSS Flexbox or Grid on the filter container
- Target the filter sections with custom CSS in your theme or Elementor
Example CSS (adjust selectors based on your HTML):
.woof_front_builder_container {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.woof_front_builder_container > div {
flex: 0 1 calc(50% - 10px); /* 2 columns */
}
This is standard frontend development work and outside the scope of plugin support. You may want to hire a developer familiar with CSS and Elementor.
2. Mobile Mode Button
HUSKY supports mobile mode via the [woof_mobile] shortcode. This creates a button that opens the filter in a popup/slide mode.
Documentation: https://products-filter.com/shortcode/woof_mobile
3. Header Search Bar
For a search bar in the header:
- Use HUSKY's search field shortcode https://products-filter.com/shortcode/woof_text_filter
- Place it in your Elementor header template
- Result will be like: https://demo.products-filter.com/ - see please on the header