The Divi theme, along with WooCommerce, is a popular combination for creating visually stunning and high-converting e-commerce websites. However, as your site grows, it can become more challenging for your visitors to find the content or products that they are looking for.

Divi’s search module is a great tool to help users navigate your website, but by default, it only searches through posts and pages. For that reason, finding specific WooCommerce products using Divi theme’s default search module can be challenging and that is why this custom Divi code snippet is extremely useful and almost necessary if you are running a WooCommerce + Divi e-commerce website!

With just a few steps, you can allow the Divi search module to not only allow for your visitors to find the content they are looking for within posts and pages, but WooCommerce products as well – based on their name, description or  tag name! This can be a major time-saver for your visitors, allowing them to quickly find the products they’re looking for and ultimately increasing sales in your WooCommerce store.

Let’s get started!

WooCommerce Product Tags

Let’s start by explaining what product tags are, and why it’s worth enabling search by tags.

Product tags are a useful feature in WooCommerce that allow you to categorize and organize your products based on keywords or labels. WooCommerce product Tags are essentially descriptive terms that help you group products together based on shared characteristics. For example, if you sell clothing on your website, you might create product tags that reflect your products such as the type of material, the designer or the style.

In technical terms, a product_tag in WooCommerce is a custom taxonomy that is specific to products. Taxonomies are a way of grouping content together, and they’re used extensively in WordPress.

Enabling search by tags can greatly improve the user experience on your website and help to increase conversions and revenue. By default, WooCommerce’s search functionality only searches through product names and descriptions. However, if you enable search by tags, users can quickly and easily find products based on specific tags or keywords.

For example, if a user is looking for a particular style of shirt, they can simply enter the corresponding tag in the search bar, and all the products containing that particular tag will be displayed. This can save time and make the shopping experience more efficient and intuitive for your customers.

Implement The Code

In this section we’ll walk you through the process of implementing this Divi code snippet on your site,

1. Make sure you have the Divi theme and WooCommerce installed and configured on your website.
2. Add the Divi search module to your page. Go to the page where you want to add the search bar and click on “Enable Visual Builder”. Then, click on the “+” icon to add a new module and search for “search” in the search bar. Select the “Search” module from the list of options. Click on the green “Save” button at the bottom of the module settings to save your changes.
3. Now enable search for product tags by adding this PHP Divi code snippet to your site.  PHP code can be added to the functions.php file within your custom child theme (learn how to create your child theme).

/* Search Product Tags */
add_filter('posts_search', 'wpz_add_product_tags_to_search', 10, 2);
function wpz_add_product_tags_to_search($searchSql, $query = false) {

if ( is_admin() || ! is_a( $query, 'WP_Query' ) || ! $query->is_search ) {
return $searchSql;
}
    if ($searchSql && isset( $_GET['et_pb_searchform_submit'] )) {

        global $wpdb;
        $searchSql = preg_replace(
            '/ (AND|OR) \\('.preg_quote($wpdb->posts).'\\.post_content (NOT )?LIKE \'(.+)\'\\)/U',
            '$0 $1 $2 EXISTS( SELECT 1 FROM '.$wpdb->term_relationships.' JOIN '.$wpdb->term_taxonomy.' USING (term_taxonomy_id) JOIN '.$wpdb->terms.' USING (term_id) WHERE object_id='.$wpdb->posts.'.ID AND taxonomy="product_tag" AND name LIKE \'$3\')',
            $searchSql
        );
    }
    return $searchSql;
}

add_action( 'wp_loaded', 'wpz_remove_default_search' );
function wpz_remove_default_search() {
    remove_action( 'pre_get_posts', 'et_pb_custom_search' );
    add_action( 'pre_get_posts', 'wpz_custom_search' );
}

function wpz_custom_search( $query = false ) {
    if ( is_admin() || ! is_a( $query, 'WP_Query' ) || ! $query->is_search ) {
        return;
    }
    if ( isset( $_GET['et_pb_searchform_submit'] ) ) {
        $postTypes = array();

        if ( ! isset($_GET['et_pb_include_posts'] ) && ! isset( $_GET['et_pb_include_pages'] ) ) {
            $postTypes = array( 'post' );
        }
        if ( isset( $_GET['et_pb_include_pages'] ) ) {
            $postTypes = array( 'page' );
        }
        if ( isset( $_GET['et_pb_include_posts'] ) ) {
            $postTypes[] = 'post';
        }
        /* BEGIN Add custom post types */
        $postTypes[] = 'product';
        /* END Add custom post types */
        $query->set( 'post_type', $postTypes );
        if ( ! empty( $_GET['et_pb_search_cat'] ) ) {
            $categories_array = explode( ',', $_GET['et_pb_search_cat'] );
            $query->set( 'category__not_in', $categories_array );
        }
        if ( isset( $_GET['et-posts-count'] ) ) {
            $query->set( 'posts_per_page', (int) $_GET['et-posts-count'] );
        }
    }
}

You can now preview your page to see the search bar in action, searching through products on your website!

No Code Option: Use Divi Shop Builder

If you prefer working with Divi modules rather than PHP code, our plugin Divi Shop Builder is the perfect solution for you and will implement this solution with the click of a button – it’s already included in your membership if you are a WP Zone annual or lifetime member, or you can purchase it here.

Does this snippet (still) work?

Please let us know in the comments if everything worked as expected.
If you think this code was helpful, we will be happy to receive a comment!

___

License: This snippet contains code from the Divi Theme, copyright https://elegantthemes.com, modified by WP Zone, April 13, 2023. Licensed under the GNU General Public License, no warranty; click here for details.