Product Search Field

The HTML produced for a Product Search Field, its equivalent [woocommerce_product_search] shortcode or the API function is shown below.

When you want to review an instance of the Product Search Field, you can observe the according HTML in your browser’s Web Inspector. The field’s code will usually be embedded within a widget container or similar, depending on what has been used to place an instance of it on a page. Depending on the instance that is generated, there can be slight differences in element IDs.

<div id="product-search-0" class="product-search floating">
    <div class="product-search-form">
        <form id="product-search-form-0" class="product-search-form show-submit-button" action="http://example.com/" method="get">
            ::before
            <input id="product-search-field-0" name="s" type="text" class="product-search-field" placeholder="Search products …" autocomplete="off">
            <input type="hidden" name="post_type" value="product">
            <input type="hidden" name="title" value="1">
            <input type="hidden" name="excerpt" value="1">
            <input type="hidden" name="content" value="1">
            <input type="hidden" name="categories" value="1">
            <input type="hidden" name="attributes" value="1">
            <input type="hidden" name="tags" value="1">
            <input type="hidden" name="sku" value="1">
            <input type="hidden" name="orderby" value="date-DESC">
            <input type="hidden" name="ixwps" value="1">
            <span title="Clear" class="product-search-field-clear" style="display:none"></span> 
            <button type="submit">Search</button>
        </form>
    </div>
    <div id="product-search-results-0" class="product-search-results">
        <div id="product-search-results-content-0" class="product-search-results-content" style="display: none;"></div>
    </div>
</div>

It is worth noting that the following IDs might differ depending on your page configuration:

• product-search-0, product-search-form-0, product-search-field-0, product-search-results-0

This is also true if you have several instances of the field, for example, a second field would likely have these instead:

• product-search-1, product-search-form-1, product-search-field-1, product-search-results-1

So, if you are going to copy and apply a CSS rule from this guide, please verify that the element IDs or classes match.

Below, we are going to cover the following examples:

• Adding a border to the Product Search Field
• Styling the Search Icon
• Changing the Search Icon
• Styling the Results
• Adding a border to the Results Container
• Styling the Add-To-Cart Buttons
• Styling the Clear Icon

This example focuses on adding a border to the Product Search Field. For example let’s add a teal border of size 2px to the Product Search Field.

The HTML elements of interest could be any of the outer containers or the input field itself …

As we can see, the corresponding IDs are …

Alternatively, the elements could be targeted based on their CSS classes:

• div.product-search or div.product-search-form
• .product-search .product-search-form .product-search-field

Here is the CSS rule used in this example to style the outer container …

This example focuses on modifying the Product Search Field icon’s color. For instance, if you wanted to change the search icon to a red color, here’s what you could do …

The CSS rule that we have used to style it is very simple:

#product-search-form-0::before {
    color: #ff0000;
}

In this example, we focus on completely changing the default search icon for the Product Search Field. WooCommerce Product Search uses FontAwesome icons and we will use an alternative one from its set.

For example, assume we wanted to change the default search icon to a teal 18p search-plus icon, we would have to get the Unicode for this icon: \f00e

Notice the use of the backward slash before the Unicode value itself. This is because it is required in order to render on the browser. Here’s a link to FontAwesome’s Cheatsheet with lots of icons.

The HTML element of interest is the ::before pseudo-element found within the form. To target it, we can use the form’s ID.

This is the CSS rule we have used to change the search icon in this example:

#product-search-form-0::before {
    content: "\f00e";
    font-size: 18px;
    color: teal;
    margin: -4px -7px;
}

Of course, the line of CSS to change the icon itself is done with content: "\f00e"; while the other CSS properties, simply change the color, font size and margin.

In this section we consider you intend to style the results displayed for searches with the Product Search Field. As you might know, the results are displayed in a dropdown below the field.

Here is an illustrated example of the HTML produced for a search, this will give you an idea of the structures and container logic used. We will give a few examples of how you can work with the structures further below.

In this example we will be adding a 2px blue border to the search results container.

The HTML element of interest is the container that surrounds the results, so let’s apply a CSS rule that adds a blue border to it:

• ID we are interested in:

      #product-search-results-content-0

  CSS used:

      #product-search-results-content-0 {
          border: solid 2px blue;
      }

In this example we explore styling the add to cart button by giving it red background color and a white text.

HTML elements of interest:

<div id="product-search-0" class="product-search floating">
...
<a ... class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>

ID and classes we are interested in:

CSS used:

#product-search-0 .wps_add_to_cart .add_to_cart_button {
    background-color: red;
    color: white;
}

In this example we explore a commonly applied customization, changing the appearance of the icon that is used to clear the search field. In this case, we will make it a bit bigger and red.

• HTML elements of interest:

      <div id="product-search-0" class="product-search floating"> 
      <span title="Clear" class="product-search-field-clear" style=""></span>

• ID and class we are interested in:

      #product-search-0 , for ID 
      .product-search-field-clear for class

  CSS used:

      #product-search-0 .product-search-field-clear {
          font-size: 30px;
          color: red;
      }

In the above, we have seen several examples of how we can style elements related to the Product Search Field provided by the extension

We recommend to use a child theme with an appropriate stylesheet to implement the CSS rules. The section Set up and use a child theme in the documentation can help you get started with that

Alternatively, the extension also provides a handy way of including those customizations using an inline stylesheet feature, see the CSS section for details.

In the example below, we illustrate how you would go about applying a 2px red border and a red icon search icon to your search field.

The examples and screenshots in this guide are derived from a setup using the Storefront theme.

The browser used in the guide is Mozilla Firefox. However, it is worth nothing that the instructions here would also apply on your stores with different themes and browsers.