Themes

Here we provide several examples in the form of child themes – these can be used as-is or adapted. Although we add more of these from time to time, creating them is the responsibility of the web or theme developer and not part of our support for the extension.

Theme Customization

↑ Back to top

• Customization

This section of the documentation is aimed at developers who are familiar with WordPress theme customizations and who know their way around HTML and CSS. There, we present several examples and explain underlying structures to help you customize your WooCommerce Product Search by adding custom styles.

Storefront

↑ Back to top

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.

The Divi Builder

↑ Back to top

All the facilities of the search engine can also be used with the Divi theme and its Divi Builder, only the context attributes require a workaround. Divi’s visual builder does some processing on the contents inside the blocks which is not compatible with the context attributes of the [woocommerce_product_filter_products] and the [woocommerce_product_filter_context] shortcodes. But you can still use them – the blocks in the builder are in fact shortcodes and they can be combined with the extension’s shortcodes to build your pages. Here is an example that is used to build a custom shop section with a search field, a price filter, and a product category filter. The products are limited to those that belong to a hypothetical Fashion product category – the shortcode on the first line establishes that context:

[woocommerce_product_filter_context taxonomy="product_cat" term="Fashion"]
[et_pb_section]
[et_pb_row]
[et_pb_column type="1_3"]
[et_pb_text]
[woocommerce_product_filter]
[woocommerce_product_filter_price]
[woocommerce_product_filter_category style="dropdown"]
[/et_pb_text]
[/et_pb_column]
[et_pb_column type="2_3"]
[et_pb_text]
[woocommerce_product_filter_products]
[/et_pb_text]
[/et_pb_column]
[/et_pb_row]
[/et_pb_section]

Use the plain text editor instead of the Divi Builder and paste the example above into the page content.

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.

Porto

↑ Back to top

We provide a child theme for Porto that integrates with WooCommerce Product Search’s live search facilities. The child theme can be used directly or you can adopt the function porto_child_wps_search_form( $form ) it implements for the porto_search_form filter hook in your own child theme for Porto. The child theme is free and available at the Porto Child WPS repository.

Shopkeeper

↑ Back to top

The search field for the Shopkeeper Theme should be enabled by default. However, if that’s not the case, this setting can be changed under Customizer > Header > Header Elements > Search with the Search Icon toggle. Additionally, Predictive Search is set as this theme’s standard product search when the above option is enabled. This means that in order to use the live search provided by WooCommerce Product Search, it is necessary to toggle the Predictive Search setting under Customize > Header > Search to off. To enable the use of the extension’s live search facilities within the custom Shop Sidebar provided by Shopkeeper theme, we have created a child theme called Shopkeeper Child WPS. It can be used directly or taken as a basis to extend your own Shopkeeper child theme. To assure that live search in the header can display its results below the search field, you should add these rules to your child theme’s style.css:

.off-canvas-wrapper .site-search {
    min-height: 100%;
}
.off-canvas-wrapper .site-search > .row {
    overflow: visible !important;
}

This will allow the search to fill the screen and display its results appropriately.

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 any of the Widgets to a sidebar or use blocks.