Sridhar Katakam

Genesis and WordPress Tutorials

WooCommerce product search in Showcase Pro’s header

by 4 Comments

This article provides step-by-step instructions on implementing the header search from Monochrome Pro in Showcase Pro and displaying WooCommerce's default product search instead of WordPress's - covering the site header when a magnifying search icon at the right of nav menu is clicked.

Screenshots:

Homepage on page load:

After clicking on the search icon:

After scrolling down and after clicking on the search icon:

Mobile views:

Screencast:

We shall ensure that the search falls back to standard WordPress search in case WooCommerce is not active.

Step 1 - functions.php

The search icon

Let's add the search icon below the nav menu. It is not a good idea to add it as the last nav menu item because then it would not be visible at smaller widths when the nav collapses to a hamburger.

But before we do this, let's group the nav menu and the search icon in a custom div.

Add this at the end of functions.php:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

    • >