Premium add-on for Bricks Builder

Creating the gallery page with the Bricks editor

How do you make the gallery page if you have 50+ images? In this tutorial, I shall show you how you will make the gallery page with ACF(Advanced Custom Fields) plugin and Query Loop Builder of the Bricks builder.The complete process is shown in the video. Check the video below. Code for Custom Loop Note: I used the ACF in this tutorial. But you can also use Metabox or any custom field plugin.

Creating Product Gallery Slider with Nested Slider Element

In this post, I shall show you how you will create the product gallery slider with the bricks’ native nested slider element. Bricks introduced the loop builder and you can use the loop builder in the nested slider element.BricksUltimate created a custom loop builder “Product Galleries” which is fetching the WooCommerce product’s gallery images and displays at the frontend.Before making the slider, make sure that you enabled the Image Attachment element from the Bricks -> BricksUltimate -> General Elements tab.Step 1: Add the section/container/block element as a wrapperStep 2: Add…

Sync Two Nested Sliders without Any Code

Bricks added the nested slider element and you can make the fluid slider for your site. But you can’t sync the two sliders. The BricksUltimate add-on is giving this opportunity and you can sync the two nested sliders from the Bricks builder editor and you can avoid the custom coding. If you have a BricksUltimate add-on, you will install and activate it. Now open the Bricks builder editor and build the two sliders (main and thumbs) with the nested slider element. After completing the sliders, you will select the thumbs…

Creates Product Cross-sells Section with Query Loop Builder

As per request, the BricksUltimate add-on created a custom provider for the query loop builder and you can make the cross-sells products list (on a single product/ cart page) with the loop builder. Step 1: Linked Cross-sells Products with a Product At first, we shall link the cross-sells product to a product from the dashboard. 1. Login to your dashboard and add/edit a product.2. Click on the “Linked Products” tab3. Add some products in Cross-sells input box4. Save the post Step 2: Make List with Query Loop

Condition Logic for WooCommerce

Bricks 1.5.4 added a powerful feature “Condition Logic”. You can show/hide the content dynamically with it and set up your custom logic from the bricks editor. You do not need any extra code for it. BricksUltimate add-on added the custom condition for WooCommerce shop site. You will get them inside the Bricks’ conditional logic window. Right now there have a few logic. Later logic will increase and users can request the missing logic also. Current Logics: Product is in stock or notProduct is a featured productProduct is a virtual productProduct…

Creating a custom Add To Cart button layout

Someone asked me how we shall create the above Add To Cart button layout in Bricks. BricksUltimate addon implemented this layout in its’ own Add To Cart element.Step 1: You need the BricksUltimate 1.0.9 or later version.Step 2: Open the builder editor, select the Add To Cart element and enable the “Quantity Text” option Step 3: The default text is Quantity. But you can enter the custom text instead of the default text.Step 4: Adjust the default layout style like font size, color, border color, etc. All are available inside…

Show Product Filters Inside the Off-Canvas for Tablet/Mobile

Someone asked me this question how he will show the product filters inside the BricksUltimate’s Off-Canvas element for tablet/mobile(without duplicate product filters element)? In this tutorial, I am providing a simple solution for it.Step 1: Make a product listing template for shop and/or archive pages. I created the two columns layout. I put the product filters on the left side and the products on the right side. Step 2: Add the filter icon with the help of the Icon element and put it in the left side column. Hide the…

[WooCommerce + Bricks] Creates free shipping notification bar

BricksUltimate added the Free Shipping Notice element which is creating the free shipping notification bar on your WooCommerse shop site. It is coming with two inbuilt sub-elements: Free Shipping Notice and Free Shipping Bar. You can also display the custom message with the Bricks element and avoid those two sub-elements. Activate Free Shipping Notice Login to your dashboard, go to Bricks -> BricksUltimate -> Misc Tab page and activate the Free Shipping Notice feature. After this, you will open the bricks builder editor. You get two elements under Free Shipping…

Mini Cart automatically pops out after a product is added to the cart

Bricks builder has a native element for the mini cart feature. In this tutorial, I am showing you how the mini cart box pops out automatically after adding a product to the cart. Login to your Dashboard and go to Bricks -> Settings -> Custom Code tab. Enter the following JS code in the Body (footer) scripts textbox. Or you can create a separate JS file, put the code into the JS file and save it in the child theme folder. Then you will enqueue this JS file with wp_enqueue_scripts…

Add the term’s latest post featured image to the background

You make a terms list with the terms query loop builder and want to add the featured image of the latest post to the container background. In this tutorial, I shall show how you will fetch the featured image of the latest post of a term and add it to the container background.

Search Tutorials

Request TutorialsFeatures Request