The ShopWell theme offers a flexible and advanced search feature built directly into the header. This guide will walk you through customizing the search bar from the WordPress Customizer to better fit your content strategy.
To access these settings:
Go to Appearance → Customize → Header → Search
🔧 Search Bar #
Choose how the search bar appears on your site.
- Default of the theme: Uses the built-in styled search layout provided by ShopWell.
- Using a shortcode: Enter a shortcode if you’re using a third-party search plugin like Ajax Search Pro, SearchWP, etc.
🎯 Search For #
Define what type of content the search will return.
- Search for products: Focuses search results on WooCommerce products.
- Search for posts: Search for posts.
- Search everything: Returns results from both posts and products.
- Search for adaptive: Smart option that adjusts based on page type:
- WooCommerce pages → searches products
- Blog or static pages → searches posts
🔎 Search Columns #
Specify where the theme should look for matches when a user searches:
- ✅ Title
- ✅ Excerpt
- ✅ Content
Enable one or more options to broaden or narrow the scope of the search results.
🗂️ Product Categories #
Control which categories appear within the search:
- Enter specific category names separated by commas (e.g.,
Laptops, Smartphones, Accessories) - Leave the field blank to include all product categories
- Enter a number to limit the number of top categories shown
Additional Options: #
- ☑️ Show Top Categories: Displays only the top-level categories. (Does not work when specific categories are listed)
- ☑️ Show Empty Categories: Includes categories even if they have no products.
⚡ AJAX Search #
Toggle AJAX search functionality.
- ON: Search results update instantly as the user types, with no page reload.
- OFF: Traditional search with page reload on form submission.
🔥 Trending Searches #
Display commonly searched keywords to guide users.
- Add custom keywords or phrases (e.g.,
iPhone 16,Today's flash deals) - Use the Add Link button to insert more trending terms
These terms may appear below the search bar or inside the search popup (depending on header layout), encouraging popular discovery paths.
🎨 Additional Layout Settings (Header Builder Mode) #
If you’ve set the header layout to Build my own by going to
Customize ▸ Header ▸ Header Layout → Present, additional customization options become available under the Search section.
These controls let you tweak the layout, styling, and structure of the search bar in a more visual and flexible way:
🧱 Search Style #
Choose how the search appears:
- Form: A full-width search form
- Icon Only: Expand search form on search icon click.
📏 Search Form Width #
Adjust the pixel width of the search bar. Drag the slider or enter a value manually for precision control.
🧩 Search Items #
Manage what elements appear inside the search bar and their order. You can:
- Drag items to reorder them
- Click the eye icon to show/hide elements
Available items include:
- Search Field
- Search Icon
- Categories Dropdown
- Separator (a visual divider)
Tip: This gives you full control to align the search elements the way you like—left, center, or right.
🎛️ Button Settings #
- Button Display: Choose between Icon, Text or none
- Button Position: Set to appear inside or outside the search field
- Button Spacing: Enable or disable spacing between elements
🎨 Style & Skin #
- Search Skin: Select between different visual styles like Base, Raised, Smooth etc
- Position: Trending search items position choose form inside or outside search form
- Button Color / Icon Color: Pick custom colors to match your brand palette
If you have further questions or need support, feel free to contact our support team.
Happy searching with ShopWell! 🛍️🔎