Search Box

The Search Box widget helps users search across your WordPress site using a stylish and fully customizable search field. You can define post types, filter by categories, and customize the UI to match your site design.

⚙️ How to Enable the Widget

1. Go to Topper Pack → Widgets in your WordPress dashboard.
2. Locate the Search Box widget from the list.
3. Toggle the switch to Enable.

🔹 Step 1: Add the Widget

• Go to Elementor Editor.
• Search for “Search Box” in the widget panel.
• Drag and drop the Search Box widget (TP) onto your page.

🔹 Step 2: Content Tab Settings

① Select Search Style

• Choose from Style 1, 2, 3, 4 or Custom based on your design needs.
• Each style defines the visual layout of the search box and button alignment.

② Show Title

• Toggle Show Title ON if you want a heading.
• You can set the Title Text and its HTML tag (like H1, H2, H3…).

③ Placeholder

• Add the placeholder text that appears inside the search input field (e.g., “Search…”).

④ Button Style

• Choose between:
  • Icon: display a search icon.
  • Text: display a text label like “Go” or “Search”.

⑤ Icon Upload

• If using the icon button style, upload or select a search icon from the media library.

⑥ Post Type Filter

• Choose what the search query will target:
  • All, Posts, Pages, or any Custom Post Types.

⑦ Category Filter

• Toggle Show Category Filter ON to enable category filtering.
• Label the dropdown (e.g., “All Categories”).

🎨 Step 3: Style Tab Settings

🔸 General

• Button Position: Align the button left or right of the input.
• Set Padding, Margin, Border, and Box Shadow.

🔸 Title, Input, Category, Button Styling

Each section expands for full control:

• Typography
• Color
• Background
• Border Radius