1st Jun '22

WooCommerce Product Carousel in Bricks

This Pro tutorial provides the steps to set up a carousel that shows WooCommerce products with the product title, price and Add to Cart button for each in Bricks.

Step 1

Edit the Page/Template where you would like to show the carousel with Bricks.

Template Export

A .json export file of the "Product Carousel" Section Template is provided near the end for your convenience. Manual steps are below.

Add a Section and inside that the built-in Carousel element.

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

Dynamic Posts Side Menu with Expandable and Collapsible Accordion Submenus in WordPress

This Pro tutorial provides the steps to show all the posts of a specified post type as menu items with accordion functionality for submenus. This…

Categories: Pro, WordPress

Tags: Accordion, Side Menu

How To Remove the Featured Image from WooCommerce Product Gallery

Product Gallery on single product pages in WordPress include the product's featured image by default. If you are looking to exclude it so only the…

Categories: Free, Plugins

Tags: 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

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

Dynamic Horizontal Posts Accordion in Bricks

Creating a horizontal accordion of featured images from posts output by Bricks' query loop.

Categories: Bricks, Pro

Tags: Accordion, CSS

Pro

Quick View Buttons for Woo Products in Bricks

This Pro tutorial provides the steps to set up quickview buttons for products in a Woo (formerly, WooCommerce) products grid using Bricks' Popups and Interactions…

Categories: Bricks, Plugins, Pro

Tags: WooCommerce

Making Bricks Nestable Accordion’s First Item Open on Desktop and Closed on Mobile

Using JS to ensure the accordion first entry is open on desktop but closed on mobile.

Categories: Bricks, Free

Tags: Accordion

How to add a “Sold Out” badge for out of stock products in Bricks

Looking to add a "Sold Out" badge for products in the Shop page for WooCommerce products that are out of stock when using Bricks' Products…

Categories: Bricks, Free, Plugins

Tags: Dynamic Data, WooCommerce

Pro

WooCommerce Products Live Search in Bricks

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…

Categories: Bricks, Plugins, Pro

Tags: WooCommerce

View All Tutorials