G Product Search: How To Add & Style A Search Bar?

Written by the Divi Engine Documentation Team

Introduction

Follow this information to add and edit the G Product Search module. This module displays a product search bar/form.

Step 1: Add G Product Search Module

Make your way to the page where you would like to display a product search bar and select the G Product Search module.

Step 2: Edit G Product Search Module

Edit the G Product Search module in the content tab.

Step 3: Set Up A Search Results Page

There are two ways to build a custom search results page layout. The first is by using the Divi Library to create a layout before assigning it on the Body Commerce > Search Results Page. The second method is by using the Divi Theme Builder to create a layout automatically assigned to the search results. For both routes please remember to override the Divi search. The minimum requirement is to add the ARP Product Loop module. After publishing this layout, head over to Body Commerce > Search Results Page and assign your layout as well as override the Divi search.

Step 4: Set Up A No Results Layout

Add a "no results" layout to your setup by firstly creating a custom layout in the Divi Library containing an image, video, text, etc. After this is done, make your way to search results page and assign it to the ARP Product Loop module under the Custom Layout Options section.

WooCommerce Bug Fix

During one of the WooCommerce updates, a bug appeared that impacts the search results page. If your setup shows the bug then please follow THESE INSTRUCTIONS to fix it. The fix is quick and will take you no longer than 5 minutes.

More Support?

Please email us at [email protected] if you are unable to get Divi BodyCommerce working.