Genesis Themes and Plugins | WPStudio

Add WooCommerce product search to Genesis navigation

You are here: Home / WooCommerce / Add WooCommerce product search to Genesis navigation

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.

WooCommerce search bar Genesis

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!

You might also enjoy...

Add a custom select box to the WooCommerce checkout page
WooCommerce Sold Out badge
How to show or hide trailing zeros on prices in WooCommerce
Product gallery images on WooCommerce shop page
Change add to cart button text to product name

Reader Interactions

Comments

  1. Jacob says

    Wow, Thanks for this.
    oddly, this does not need the Premium WooCommerce Product Search Plugin to work?

    • Frank Schrijvers says

      Hi Jacob,

      No need for an extra plugin. It uses the default product search from WooCommerce.

  3. Marieke says

    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?

    • Frank Schrijvers says

      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.

  4. Erik Molenaar says

    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

    • Frank Schrijvers says

      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

  5. oscar says

    Thanks Frank,

    saving lives, I’m using the Smartline theme and it worked perfectly.

  6. Teddy says

    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

  8. Phill Volkert says

    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.