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.
Homepage on page load:
After clicking on the search icon:
After scrolling down and after clicking on the search icon:
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.