10th Mar '26

WooCommerce Products Live Search in Bricks

Sridhar Katakam

This Pro tutorial provides the steps to set up a live search for WooCommerce products in Bricks.

Note: Bricks' live search works with any type of query, not just posts.

Step 1

Edit Header template with Bricks.

Add a Section having a query loop-enabled Block with the query type set to Products.

JSON link for copying the fully-built Section can be found below.

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Tagged:

Sridhar Katakam

Sridhar Katakam is a Bricks enthusiast. He likes helping others by researching and solving WordPress-related problems and building websites.

Get access to all 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro

Related FAQs on Product pages Based on Product Category Taxonomy in Bricks

On product pages, we show all the FAQs associated with the current WooCommerce product's product categories.

Categories: Bricks, Plugins, Pro

Tags: ACF, WooCommerce

Pro

Stock Quantity Block for WP Grid Builder

In the unofficial WP Grid Builder Facebook group a user asked: Is it possible to show stock quantity on the card? I can't find it…

Categories: Plugins, Pro

Tags: WP Grid Builder

Product Gallery Carousel in Bricks

Showing how we can replace the images of a Carousel with those set in the Product Gallery for product pages.

Categories: Bricks, Free

Tags: bricks/element/settings, Carousel, Filters, WooCommerce

Pro

Similarly Priced WooCommerce Products Bricks Query Loop

How to show products priced within a percentage of the current single product's price.

Categories: Bricks, Plugins, Pro

Tags: WooCommerce

Is WooCommerce Cart Empty Condition in Bricks

Updated on 5 Nov 2024 Looking to conditionally render an element depending on whether the user's cart is empty or not when using WooCommerce? Add…

Categories: Bricks, Free, Plugins, WordPress

Tags: Conditions, WooCommerce

Create A Customizable AJAX Add To Cart Button In Bricks Builder

In Bricks, you can simply create an Add To Cart button from a dynamic data / function {woo_add_to_cart}. This button supports AJAX as well if…

Categories: Bricks, Free, Plugins

Tags: AJAX, Conditions, WooCommerce

Pro

Top-Level Product Categories in Bricks

How to show top-level WooCommerce product categories in Bricks using a query loop.

Categories: Bricks, Pro

Tags: WooCommerce

Pro

[WooCommerce] Sticky on Scroll Add to Cart section in Bricks

Setting up a sticky section that fades in when scrolling down and fades away when scrolled to the top.

Categories: Bricks, Pro

Tags: JavaScript, sessionStorage

Pro

How to Add Support for Variable Products in Bricks WooCommerce Filters

Filtering for In Stock or Out of Stock WooCommerce products using Bricks' filters currently only works at the product level and not variation level. This…

Categories: Bricks, Plugins, Pro

Tags: WooCommerce

View All Tutorials