ProductX

  1. Home
  2. Docs
  3. ProductX
  4. All Blocks
  5. Product Search Block

Product Search Block

Video Guide

Here’s a video guide for you so you can have a better understanding of the advanced Product Search block of ProductX.

Step-by-Step Guide to Add and Use Product Search Block

Here’s a step-by-step guide to adding WooCommerce product search in a page and header with its customization.

Adding Product Search Block on Page

  • Install and activate the ProductX plugin for WooCommerce.
Install ProductX
Install ProductX
  • Go to your WordPress dashboard and navigate to “Pages” → “Add New” to create a new page or edit an existing page where you want to add the product search block.
Add New Page
Add New Page
  • Search for “Product Search” in the block search bar. Select the “Product Search” block from the search results, and it will be added to your page.
Adding WooCommerce Product Search Block
Adding WooCommerce Product Search Block

Customizing WooCommerce Product Search Block

Once the product search block is added to your page, click on it to reveal the block settings panel on the right side of the editor.

Search Field Layouts:

Click on the “Layout” option to choose from five different search field layouts. This allows you to select different layouts to find the best one for your website design and user experience.

Search Field Layout
Search Field Layout

Search Product List Layouts:

Use the “Product List Layout” option to select one of the three available layouts for displaying the search results.

Product List Layout
Product List Layout
  • Use the Width setting to adjust the side dimension of the search bar.
  • The column set will let you adjust how many products will get shown in the column.
  • Column Gap setting will let you adjust the gap between two or more columns.
Product Search width, column and column gap settings
Product Search width, column and column gap settings

Search Form Style:

Customize the form style settings from this setting.

Search Form Style Settings
Search Form Style Settings
  • Customize the input typography, including the input text’s size, font, height, and spacing.
  • Form Height will let you adjust the height of the search bar.
  • Form borders settings let you select 3 types of border styles and set border color.
  • Form radius and input padding let you precisely adjust the top/bottom/left/right radius and padding.
  • Input Color lets you change the color of the Input text and use the Input background to add a solid or gradient color in the text input field.

Category Style:

Modify the style of product categories displayed in the search results using the “Category Style” settings.

Category Style Settings
Category Style Settings
  • Selected Typography will let you adjust the selected text’s typography, including the input text’s size, font, height, and spacing.
  • Dropdown Typography settings do the same for the texts in the category dropdown.
  • Text color is very intuitive; it lets you change the color of the text.
  • The width setting is for adjusting the category section wideness.
  • Separator Width and Separator height can be used for category separators.

Search Icon:

Customize the appearance of the search icon using the “Search Icon” settings.

Search Icon Settings
Search Icon Settings
  • Adjust Icon Size, normal, and hover color from adjacent settings. Use the button Background Color to select a background color for the search icon.
  • Search Button Radius, Search Button Width, and Button Margin settings are used for relevant settings. You adjust the top/bottom/left/right panel separately.

More Result Button:

Modify the “More Results” button settings to enhance the user experience of exploring additional search results.

More Results Settings
More Results Settings
  • Use adjacent settings to change the typography, text, and hover color.

Dropdown Style:

Customize the style of dropdown menus in the search block using the “Dropdown Style” settings.

Dropdown Style Settings
Dropdown Style Settings
  • Adjust the Dropdown Background color, borders, radius, box shadow, item spacing (X and Y), separator color, and width with the intuitive settings.

Product Image:

Control the display of product images in the search results using the “Product Image” settings.

Product Image Settings
Product Image Settings
  • Adjust the image width, height, and radius from these settings to perfectly align the product image in your search bar.

Product Title:

Customize the appearance of product titles in the search results with the “Product Title” settings.

Product Title Settings
Product Title Settings
  • Modify typography-related settings, regular color, hover color, and search highlighted color from the product title settings.

Product Price:

Customize the color and typography settings for product prices using the “Product Price” settings.

Product Price Settings
Product Price Settings
  • Get full typography settings, and adjust the color from the intuitive settings panel.

Product Rating:

Control the color and visibility of product ratings in the search results using the “Product Rating” settings.

Product Rating Settings
Product Rating Settings
  • Enable or disable ratings with a single click. 
  • Adjust the Rating size with e slider.
  • Use the Fill Color and Empty Color settings to change adjacent rating colors.

Adding WooCommerce Product Search in the Header

1. Enable the “Saved Template” addon in the ProductX settings.

Enabling Saved Template Addon
Enabling Saved Template Addon

2. Go to “ProductX” → “Saved Template” in your WordPress dashboard. Click on “Add New Template” to create a new saved template.

Creating New Saved Template
Creating New Saved Template

3. Add the “Product Search Block” to the template and customize it as needed. Click on “Publish” to save the template.

Adding WooCommerce Product Search Block
Adding WooCommerce Product Search Block

4. Return and Copy the shortcode for the saved template from the “Saved Template” page.

Copying The Shortcode
Copying The Shortcode

5. Go to “Appearance” → “Customize” in your WordPress dashboard.

Go to Theme Customize
Go to Theme Customizer

6. Select the “Header” section to access its settings.

Theme Header Customization
Theme Header Customization

7. Locate the desired section in the header where you want to add the product search. Add an HTML element to that section.

Adding and Editing HTML in Header
Adding and Editing HTML in Header

8. Paste the shortcode in the HTML text field.

Pasting Shortcode in HTML
Pasting Shortcode in HTML

9. Click on “Publish” to save the changes.

Note: Adjust the width of the product search block from the general settings if it does not fit properly within your header section.

Advanced Settings

In the advanced tab, you will get settings for the following:

  • General
  • Responsive
  • Custom CSS
  • Advanced
Block Advanced Setting

General

You can modify class ID, z-index, margin, padding, normal & hover colors, border, box shadow, and border radius from the general settings.

Advanced General Settings

Responsive

You will have the responsiveness settings for the blocks if you want to show the block on particular devices or not.

Use the toggle bar to enable the following options:

  • Hide On Extra Large
  • Hide On Desktop
  • Hide On Tablet
  • Hide On Mobile
Advanced Responsive Settings

Custom CSS & Advanced

You can manually add your custom CSS to modify your blocks in the custom CSS field. And in the advanced field, you can add custom CSS classes.

Advanced Custom CSS settings
Was this article helpful to you? Yes No