Premium add-on for Bricks Builder

Adding Quantity Input Field to Bricks Mini Cart element

The bricks builder has a native side cart element (Mini Cart) for the WooCommerce site. In this tutorial, I shall show how we can add the quantity field with the ‘+’ and ‘-‘ buttons there. So the customer can easily update the cart item’s quantity from there without any page refresh. Step 1: Adding the Quantity Input FieldAdd the following PHP code to your site. You can use the Bricks Child theme’s function.php file or any 3rd party snippets plugin like WPCodex. – OR –

Sync AJAX Action with the Bricks Native Popup Builder

Bricks Builder integrated the lightbox effect with the Popup builder feature. But it has not AJAX option. If your site has a long listing page and you added the lightbox option via native popup builder, your page size is growing big and increasing the DOM size. We can avoid it with AJAX. Because AJAX is fetching the dynamic data from your server without any page refresh. Therefore, your page will load quickly. BricksUltimate, a 3rd party add-on of the bricks builder added this feature and you can easily setup the…

Show the post excerpt on the first post only

In this tutorial, I shall show how we shall hide excerpts on all except the latest post. As per the above image, I used the Query Loop builder of the Bricks and created the grid layout of the latest 3 posts. Here I used the following nested elements under the Block element(I added the single Post Query Loop builder feature in this element and built the grid layout with the CSS Grid option).1. Image Element2. Post Title Element3. Meta Data Element4. Post Excerpt Element.After completing the layout, I selected the…

Creating Off-Canvas Panel with Bricks Popup

Bricks 1.6 is introducing the interaction and popup features. With these features, you can make the off-canvas panel for your site. See the video below: [COMING SOON]

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…

Search Tutorials

Request TutorialsFeatures Request