Adding shortcode and magnifying glass to Header Pro

[powrider686]

Hi there,
I am trying to replace the default search functionality that I have in my header, built with Pro, on taylorandtessier.com. I’d like it to look the same and add a magnifying glass that triggers a shortcode when you click on it. This is the shortcode - [woocommerce_product_search] I would like to use. I haven’t been able to figure out how to make this work.

This is the plugin I am using to add this functionality - https://docs.woocommerce.com/document/woocommerce-product-search/

How could I achieve this?

Thanks for the help!

[nabeel]

Hi @powrider686,

Thank you for reaching out to us. You probably can achieve this with Content Area Modal element using Pro header builder. Add the Content Area Modal element in your header, Inspect your element and add your shortcode under Modal Content (see screenshot)

Now head over to the toggle tab (see screenshot)

Change the graphic icon to a magnifying glass under Graphic Setup (see screenshot)

Let us know if this works.