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

This Pro tutorial provides the steps to set up a sticky section that fades in when scrolling down and fades away when scrolled to the top.

Since the section will be built in the Bricks editor, we have full control over what elements appear inside it, including at various breakpoints.

The sticky section can be either at the top edge of the browser or at the bottom.

At top:

At bottom:

This tutorial can be implemented in any Bricks Page/template for an on-scroll sticky div and is not WooCommerce specific. That said, in this example we shall show WooCommerce product-specific data like the featured image, title, price and add to cart buttons in the sticky-on-scroll section.

Step 1

We need a way for the user to know that the current product has been added to the cart after they click the add to cart button.

Go to Bricks → Settings → WooCommerce. Toggle on Enable Bricks WooCommerce "Notice" element and save settings.

We will then be able to add a Notice element at the bottom in our sticky section.

Step 2

Edit the single WooCommerce product template with Bricks.

If you don't have one already, you could import this fully-built template and edit it with Bricks.

Make sure that a template condition is set like below:

Copy the JSON code (link below) of the sticky template from our dev site and paste it to bring in the entire Section.