So we have integrated WooCommerce into the Genesis framework and we have hooked the shopping cart to the genesis_header_right area. But what about the WooCommerce product search bar? Well, in this short tutorial we’re gonna add the WooCommerce product search to the secondary navigation. Just follow these simple steps.
Add the following code to the functions.php of your Genesis child theme.
With this code we extend the primary navigation with an extra list item. This list items contains the WooCommerce Search box.
The styling of the search box depends on your child theme. Here is just some basic CSS to help you get going.
That’s all. It is as simple as this. Enjoy the ride!
Wow, Thanks for this.
oddly, this does not need the Premium WooCommerce Product Search Plugin to work?
Hi Jacob,
No need for an extra plugin. It uses the default product search from WooCommerce.
Thanks for the tut. Also going to add ElasticPress for WooCommerce to speed up the whole process.
https://wordpress.org/plugins/elasticpress-woocommerce/
Hi Frank!
Super dit! Ik wilde alleen even checken of dit ook werkt voor mij. Op mijn webshop heb ik al een search-gedeelte in het menu (van mijn childtheme) maar als ik daarin zoek, geeft hij de resultaten weer als een soort blogs, terwijl ik liever een productpagina heb (zoals een categorie) als je snapt wat ik bedoel.
Is dat te fixen met jouw code of niet?
Hi Marieke,
Ja dat is hiermee te fixen. De zoekresultaten worden weergegeven als producten.Je kan het ‘resultaat’ bekijken door even de WooCommerce Product Search widget te activeren. Of bekijk deze URL voor een voorbeeld: http://whatawonderfulwedding.nl/?s=xl&post_type=product Let er wel op dat dit alleen zoekt in de producten en niet in de rest van je site.
Hi Frank,
Awesome code snippet. However, my main Shop Page has been set to a Page which has been customized. It does not show any Products.
This search snippet redirects to the main Shop Page. Any way to fix this so it redirects to a specific search results page?
Thanks again and keep up the good work,
All the best
Erik
Hoi Erik,
The search results are displayed on the archive-product.php template, this template is normally also used for the shop page, the category and tag pages. If you need a custom shop page I guess it’s better to create a new page template and leave the archive-product.php as it is.
Groeten, Frank
Thanks Frank,
saving lives, I’m using the Smartline theme and it worked perfectly.
I follow this tutorial, I get only $Total and #Items in numeric, I see your sample above has an “icon” wrapping the “#Items” (“0” product as above)… How do you add the icon?
Thanks
The icon in the screenshot is 100% CSS. You can also use a Font type like fontawesome or an image.
this was an awesome help. Thank you
Thanks a bunch for the tutorial, Great info. The information you shared is quite helpful for me. It is very easy and intuitive to follow these steps.
Thanks a bunch for the tutorial, Great info.
nice.
Thanks a bunch for the tutorial, Great info.
Thank You
This was really helpful. Thanks for sharing
Thanks a bunch for the tutorial, Great info.
Thank You