Opens in a new tab
1st Jun '22
/
0 comments

WooCommerce Product Carousel in Bricks

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

Get access to all 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Fix for “Your theme (Bricks Child Theme) contains outdated copies of some WooCommerce template files.”

Fix for “Your theme (Bricks Child Theme) contains outdated copies of some WooCommerce template files.”

Updated on 18 Feb 2023 Users of current (at the time of writing this) Bricks stable version of 1.6.2 and WooCommerce 7.4.0 will likely see…
Categories:
Bricks Accordion (Nestable) Element’s Icons

Bricks Accordion (Nestable) Element’s Icons

Adding icon rotations to Bricks' Accordion (Nestable) element when opened.
Categories:
Tags:
How to add a “Sold Out” badge for out of stock products in Bricks

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…
Condition based on WooCommerce Product Attributes in Bricks

Condition based on WooCommerce Product Attributes in Bricks

How to display elements only when a specific WooCommerce product attribute is selected.
Categories:
Pro
Dynamic Horizontal Posts Accordion in Bricks

Dynamic Horizontal Posts Accordion in Bricks

Creating a horizontal accordion of featured images from posts output by Bricks' query loop.
Categories:
Tags:
Auto-Scroll to the New Open Accordion Item

Auto-Scroll to the New Open Accordion Item

How we can make sure the scroll position is always synced with the accordion when opened.
Categories:
Tags:
Pro
On Sale Products Bricks Query Loop

On Sale Products Bricks Query Loop

Looking to show only the WooCommerce products that are on sale in Bricks? Set up a query loop, enable the PHP query editor and paste:
Categories: