Themes

This section is provided for WooCommerce developers who want to deploy the advanced search facility with specific themes. You may need an advanced understanding of PHP and WordPress development. If you need help to resolve issues with a particular theme (not customizations), please contact support. If you are not a developer but would like to find one to help with customizationselect a WooExpert or Developer for assistance.

Here we provide some suggestions for adjustments with themes. If you have a question about or issues with a particular theme, please contact support.

Storefront ↑ Back to top

As of version 2.0.0, the extension will replace the standard product search form automatically and no modifications in Storefront and its child themes are required. The related settings can be adjusted in the General settings under WooCommerce > Settings > Search > General.

StoreSearch Child Theme ↑ Back to top

We have created a Storefront child theme StoreSearch which is intended to provide an integration basis for the extension. As a Storefront child theme, StoreSearch already benefits from all the WooCommerce integration features that Storefront provides.

The child theme is designed to be clear and visually appealing while highlighting certain aspects related to the search engine and its live search and live filtering facilities.

It further improves the representation in mobile view where the live search field is rendering its search results using an overlay. This solves the issue where live search is enabled but the search results are not visible below the search field in mobile view.

You can see this child theme in action on the Demo site for the extension.

Template Customization ↑ Back to top

If you would like to replace Storefront‘s product search with the search facility provided by WooCommerce Product Search and are using at least version 2.0.0 of the extension, the standard product search field will be replaced automatically. The related settings can be adjusted in the General settings under WooCommerce > Settings > Search > General. If you prefer to disable this option or are using a previous version, you can add the following code that uses its API to your theme’s functions.php.

/**
 * This function replaces Storefront's product search function.
 * It will render the WooCommerce Product Search widget instead of
 * the default widget when the extension is enabled.
 */
function storefront_product_search() {
  if ( function_exists('storefront_is_woocommerce_activated' ) ) {
    if ( storefront_is_woocommerce_activated() ) { ?>
      <div class="site-search">
      <?php
      if ( function_exists( 'woocommerce_product_search' ) ) {
        echo woocommerce_product_search();
      } else {
        the_widget( 'WC_Widget_Product_Search', 'title=' );
      }
      ?>
      </div>
    <?php
    }
  }
}

You can also download this Storefront Child Theme which contains the adjustment and reuse it.

Avada ↑ Back to top

In general, the WooCommerce Product Search extension will replace the standard product search field with its live Product Search Field automatically if the theme uses the appropriate API function to render the search field and the replacement option is activated.

The Avada theme further provides its own search form templates which cannot be replaced automatically. To be able to use the live search with these, these forms need to be adjusted. We have created this child theme Avada Child WPS that integrates with the extension’s live search facilities. It can be used directly or taken as a basis to extend your own Avada child theme.

The child theme includes adjusted templates search.php and searchform.php and templates/wc-product-search-form.php which  are used with the functions defined in its functions.php. The child theme’s style.css provides some recommended CSS rules to visually integrate the facilities with Avada.

With the adjusted templates, the settings from the standard search form replacement under WooCommerce > Settings > Search > General are used if the automatic replacement is enabled.

Divi ↑ Back to top

The WooCommerce Product Search extension will replace the standard product search field with its live Product Search Field automatically if the theme uses the appropriate API function to render the search field and the replacement option is activated.

The Divi theme provides a search facility in the header which needs to be adjusted to fully integrate with the extension.

We have created this Divi child theme Divi Child WPS which adds full-screen Live Search triggered from Divi’s header search icon.  It can be used directly or taken as a basis to extend your own Divi child theme.

Beaver Builder Theme ↑ Back to top

Beaver Builder and Ultimate Addons for Beaver Builder instructions to modify products and product CSS classes.

  • Go to Beaver Builder > Themer Layouts.
  • Edit the Shop page with Beaver Builder, not the usual Edit. It will open the Live Editor.
  • In the Live Editor hover over the products container and click on the wrench icon.
  • On the popup window under General, click on the link Edit Custom Post Layout and on the first line add product in the class tag.
  • Then, go to navigation, click on the three dots in the navigation bar and click on Advanced. Scroll down in section HTML ELEMENT and make sure that products (without a leading dot ) is set in Class field.
  • Click on Save.
  • Click on Done in top right corner of the browser window and then Publish.

After refreshing the page, the products container should have the products class appended and the product should have the product class appended.

Other Themes ↑ Back to top

The WooCommerce Product Search extension will replace the standard product search field with its live Product Search Field automatically if the theme uses the appropriate API function to render the search field and the replacement option is activated.

For cases where the automatic replacement is not possible, the extension provides its own API which can easily be used in templates. Please refer to the API documentation page for an example. Of course you can simply add the Product Search Field widget to a sidebar.

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top