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 are not a developer but would like to find one to help with customization, please select a WooExpert or Developer for assistance.
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.
- If your theme is not compatible with WooCommerce Product Search, please contact the theme developers and ask them to update the theme and make it compatible.
- If the theme’s developers are not able to make the theme compatible, we recommend to switch to a compatible theme such as those based on Storefront.
- If your theme provides built-in search functions (“AJAX”, “predictive”, …) these should be turned off to assure that they do not conflict with the search engine. These functions belong to the realm of the search engine provided with WooCommerce Product Search, they should not be implemented by themes, as they can severely degrade the site’s performance and create conflicts.
Theme Customization
↑ Back to topStorefront
↑ Back to topAs 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 topTemplate Customization
↑ Back to topfunctions.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 topsearch.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 topThe Divi Builder
↑ Back to top[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- 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.
products
class appended and the product should have the product
class appended.
Porto
↑ Back to topporto_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.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.