How to Add Search Box on Top of Page Storefront

Do you want to add a search box to a WooCommerce Storefront page? By default, the storefront theme displays the search box on the header. However, you can add a search section in widget-ready areas like the sidebar and the footer.

Table of Contents

You may want to display the search box on top of a search page if you want to remove it on the header. Visitors in your store will easily locate it, as it will be noticeable.

Storefront Add Search Box on Top of a Page

This article will show you how to add a search bar to any page on your WooCommerce store using a shortcode. For illustration purposes, I will be using the Storefront theme. This solution involves using a PHP code. This means that you need to have some basic coding knowledge to proceed.

Why Should You Add a Search Bar on Top of a Page?

The Search functionality on any site makes it easy for users to find items easily. Moreover, it helps to improve user experience on your website and boosts engagement.

I highly recommend adding a search option where uses can easily find it. It is also worth mentioning that the default search widget is limited to only widget-ready areas.

There are many plugins, which let you add the search function anywhere on your site. It is very easy to do this using code.

With that said, let’s take a look at how to add a search bar to any page in the Storefront theme.

Steps to Add the Search Function on any Page in the Storefront Theme

Here are the steps that you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to add a search function on any Storefront theme page.
Add the following code to the php file:

function njengah_display_search_form() {

            return get_search_form(false);

}

add_shortcode('display_search_form', 'njengah_display_search_form');

Alternatively, you can add a custom search form. However, you only need to add one between the two.

function shapeSpace_display_search_form() {

$search_form = '<form method="get" id="search-form-alt" action="'. esc_url(home_url('/')) .'">

<input type="text" name="s" id="s" placeholder="Search..">

</form>';

return $search_form;

}

add_shortcode('display_search_form', 'shapeSpace_display_search_form');

Once you have added the function to your theme’s functions.php file, you can display the search form on any page or post using the following shortcode:

[display_search_form]

In this example, I have added the shortcode on the Home page:
Here is the outcome:

How the Code Works

In the first snippet, the function returns the search form using get_search_form() with the echo parameter set to false to return the form rather than display it.

In the second snippet, instead of using get_search_form(), I added a custom form markup. This is useful when you want to display a variation of your theme’s default search form. Moreover, you can see that I used the home_url() for the action attribute’s value.

Conclusion

In summary, I have shared how to add the search option on any WooCommerce Storefront page. However, if you are not comfortable handling code, I recommend using a plugin or hiring a developer. You can also style the element so that it can match the design of your theme.

Editorial Staff

How to Add Search Box on Top of Page Storefront Theme

Storefront Add Search Box on Top of a Page

Why Should You Add a Search Bar on Top of a Page?

Steps to Add the Search Function on any Page in the Storefront Theme

How the Code Works

Conclusion

Similar Articles

Related