Pricing Process Reviews Contact

Divi Guy blog

Make the default Divi search box search WooCommerce products only

If you have a Divi/WooCommerce site and you don’t have any posts, this is perfect for you. The default Divi search will now search only your products. You can add this to the Divi theme options Integration tab in the head. Or add to a Code module in your global header. This also changes the placeholder text from “Search” to “Search Products”. For example when you click on the search icon like below.

It will show this:

Make sure you put the code inside a script tag.

jQuery(document).ready(function($){ // wait for jQuery to load
  $(".et-search-form").append(''); // dynamically add the input below the search box that tells the search that the post type to search are products.
  $(".et_pb_menu__search-form").each(function() { // now for each search box from the Divi module
  $(this).append(''); // add that input there too
  });
});
// change placeholder text on default Divi search box
window.onload = function() {
let searchinput = document.getElementsByClassName('et_pb_menu__search-input')[0];
searchinput.placeholder = "Search Products";
}

Need a hand?

Need help with your Divi website?

Book a Divi consultation and we can fix it together over Zoom, or ask for an estimate for bigger jobs.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Search

Browse

More tips

Got a question?

Ask me anything

Stuck on something in Divi or WordPress? Ask away and I will reply by email, usually within 24 hours.

Ask a Question

Tell me about your project. The more details the better.

"*" indicates required fields

Make a payment

Got an invoice?

Pay an invoice, a deposit or a tip in about a minute. Card or PayPal, secure checkout, and I never see your card number.

Make a payment