Adding a custom product finder in a Woocommerce site

Hi, What I want to achieve is probably really easy for a PHP/Wordpress expert. First of all, here is the website that I am working on (subfolder for now): [login to view URL] You will see a search function beside the main menu at the top. What I want to achieve is when someone click into the search form, a custom product finder shows up. I want it to show between the menu and the main content. The product finder is already built. It is this one: [login to view URL] I guess all you have to do is include the template tag into the template file and add an on-click event (this is the part that I have no clue how to do. Thank you for your interest.