To optimize the search form for mobile devices, navigate to Elevated › Product Search › Settings › Basic Settings. Set Layout to Icon on mobile, adjust the Mobile breakpoint to match your theme, and reduce Max Form Width to fit narrow containers. Click Save Settings.
Navigate to Elevated › Product Search › Settings.
Look for the Basic Settings section on the left side of the page. Click Basic Settings to expand it.
Look for the Layout option.
Click the Layout dropdown and select Icon on mobile. This collapses the search input into a search icon on smaller screens. When tapped, the icon opens an off-canvas panel containing the full search form.
Look for the Mobile breakpoint below the Layout field.
Enter the screen width in pixels where the layout switch should occur. The default value is 900 pixels. When the browser width falls below this value, the search form collapses into the icon layout.
If your theme switches to a mobile menu at a specific breakpoint, set the mobile breakpoint to the same value to ensure the search form and navigation transition together.
Look for the Max Form Width at the top of the Basic Settings section.
Set a value that fits your container without overflowing. For narrow headers or sidebar placements, use a smaller value such as 300 pixels. For full-width header areas, a larger value, such as 595 pixels, works better.
Click Save Settings.
Visit your site on a mobile device or resize your browser window to test the transition at the breakpoint you configured.
WooCommerce product search is important across all device sizes. On desktop screens, a full-width input field with a visible placeholder is convenient. On mobile screens, that same field competes for limited header space and can push navigation elements out of place.
The Icon on mobile layout solves this by hiding the input field behind a search icon until the customer needs it. This preserves the header layout while keeping search one tap away. The off-canvas panel provides enough space for the full search form, results dropdown, and product preview without being constrained by the header container.
The Mobile breakpoint controls when the switch happens. Setting this value to match your theme’s responsive breakpoint creates a consistent experience.
Max Form Width prevents the input from stretching beyond its container on any screen size. Even on desktop, a search form inside a narrow sidebar needs a constrained width to avoid breaking the layout. On mobile, the max width ensures the input does not overflow the viewport before the icon layout takes effect.
The search form overflows the header on mobile
Reduce Max Form Width in Basic Settings to a value that fits your mobile header. Alternatively, switch Layout to Icon on mobile to hide the input until tapped.
The mobile layout does not trigger at the expected screen size
Verify the Mobile breakpoint value matches your theme’s responsive breakpoint. Common values are 768 pixels or 992 pixels. Check your theme documentation if you are unsure.
The off-canvas panel does not open when tapping the icon
Clear your browser cache and test again. If the issue persists, check for JavaScript conflicts from other plugins that may prevent the click event from firing.
Results dropdown is cut off on mobile
The off-canvas panel should provide sufficient space. If results are still clipped, check your theme’s CSS for overflow: hidden rules on header or container elements.
