How To Make A Shopify Style Woocommerce Product Search Toggle Free

Experience Level: Novice

Tools Required:

  1. Woocommerce
  2. Code/Text Editor
  3. FTP/ Hosting File Manager
  4. Elementor Pro

One of the latest trends in not only eCommerce websites like Woocommerce, Shopify, BigCommerce and others, is to have a very minimalist and clean navbar at the top of the page, with usually 3 or 4 minimalist icons. These usually include: Account, Wishlist, Cart, Search. It’s really up to yours or your client’s preference what you include. Personally, sometimes I think a search field is more siutable and fills out the header nicely. However, on some sites, I just want the icon and the search field to toggle in and out to save on space and aesthetics. As far as I’ve been able to find (please correct me if I’m wrong), there’s no plugin or native feature in Elementor, WordPress or Woocommerce to provide this functionality.

The Elementor Search Form Widget allows a search bar to be inserted, which searches posts, however NOT products. This is no big deal because when you install Woocommerce, it creates a native WordPress widget called Product Search, which is still accessible in the usual way within Elelmentor. One drawback is that is is missing the styling capabilty of an Elementor Widget which is easy enought to control, the old way, before we were spoilt with visual page builders.

The only part of this functionality that requires a little planning is the JQuery. There are essentially 2 ways to apply the script to your site: 1- Use a Plugin such as “Insert Headers & Footers” (nb there are lots of options)  2- Add the code to your theme’s functions.php file.

Technique 1: Add the code to your functions.php

It sounds daunting, but really a plugin can be as simple as just a single php file. The general rule is; if you are going to use the code more than once, make a plugin, rather thann constantly adding to your theme files ie functions.php

For the pupose of this functionality, it’s really just a quick addition to your functions.php file, however, if you have multiple small snippets you use regularly, it’s worth putting it into a small plugin.

First things first, you need to access your theme’s functions.php file, one of the easiest ways to access the files of your website is through youre hosting. With most hsting providers, you will navigate to the File Manager ->find our public_html folder (*it will be in your root directory unless you have multiple domains) ->wp-content->themes->your theme directory -> functions.php.

In most hosting providers, you will be able to edit the file directly in the file manager, if not download the file via FTP and edit in your favourite text editor. The code below needs to be added at the end of the file. It’s best practice to use the wp_enqueue_script function, which is used to stop the file being called multiple times and will add the scripts to inside thesection. It’s worth noting, if you would prefer to add the script to just before the , you add the $in_fototer parameter.

Starting off we use the add_action wp_enqueue_scripts hook to register the function. Following on from that we set up the function, call this whatever you like, in this example, I’ve called it wc_toggle_search. Inside the function we register and enqueue the scripts all in one line, and also specify the directory where we are going to save our file. In this example, I’ve used ThemeName/Assets/JS/. 

 

Create the following JS in a seperate file, or if you prefer, add it to an exisiting file, just remember to add the correct path in your *wc_toggle_search function.

Great work! After you have saved those files and they are uploaded back to their original position on your host, we are almost there! Believe it or not, that was the hardest part!

Technique 2: Using a plugin

This technique is far simpler and faster! However, we are always conscious of having too many plugins, and sometimes it’s fun to do things a little more manualluy, and it also reduces the opportunity for potential conflicts.

In this example I used “Insert Headers & Footers” (nb there are lots of options), once the plugin is installed, simple navigate to plugin settings and copy the JS script directly into the JS section and you’re done!

The Next Step.....

Using Elementor Pro, navigate to your header template in the theme editor, and Edit with Elementor, or wherever you want place the toggle search bar. Insert an Icon Widget and give it the CSS class name search-icon.

search-icon

search-icon-css-class

Then add in the Product Search Widget which is found under the WordPress heading in the widgets panel. As you can see, because it is in the native WordPress Widgets, it doesn’t have the Elementor styling controls, so we need to change it via CSS. Give this widget the class name dfdsearchform. 

product-search-widget

It’s worth noting here that this toggle will slide sideways, and you can either leave a gap next to the icon or have it slide over the top of your nav items, or whatever you have placed adjacent to the icon. If you would prefer that the search bar appears underneath your icon, change the JS from:

$(“.dfdsearchform”).animate({width:‘toggle’});

To:

$(“.dfdsearchform”).slideToggle();

Now we need to add the CSS, you can add this into the Customizer, into your Child Theme Styles.CSS, or into the page Custom CSS panel in Elelementor:

 

Once we add the CSS, the Search Bar will be hidden, so to access it, use the Elementor Navigator.

Add whatever styling you like via the CSS and enjoy! Thanks for reading, I hope you found it usefly, feel free to add some comments/ideas.

Leave a Reply

Your email address will not be published.