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.phpThe 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.