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.
Type: Posts
Query → Post Type: Products
Posts Per Page: 6 (or how many ever products you want in the carousel)
Settings → Spacing (Px): 20
Items To Show: 4
FIELDS
a)
WooCommerce Product Carousel in Bricksb)
{woo_product_price}HTML Tag: P
c)
[add_to_cart id=891 show_price=false style=""]or
{woo_add_to_cart}ARROWS
Typography → Color: Select a dark color like #616161.
STYLE Tab
CSS:
root .content-wrapper {
align-items: center;
}That’s it!
Template Export
References
https://woocommerce.com/document/woocommerce-shortcodes/#section-19