Premium add-on for Bricks Builder

Wishlist

Wishlist element
Wishlist element

This element is created for WooCommerce but it is also compatible with other post types. You can use it for posts or CPTs. You should get this element under the Bricks->BricksUltimate ->General Elements tab. By default, this element is disabled.

This element will work inside the query loop builder, products element, related products element, and up-sells products element.

Adding the Add to Wishlist button

Wishlist settings

#1: Here we are running the product loop builder. So, we shall add an outer container which will help to make the grid or listing layout.

#2: Now we shall put a block element inside the outer container and enable the query loop builder. You can use post, CPT, or WooCommerce product post type. In this example, WooCommerce product post type is used.

#3: Add the Add To Wishlist element inside the loop builder. Make sure that you enabled the element from the Bricks -> BricksUltimate -> General Elements tab.

#4: Setup the Add To Wishlist element. It has a lot of settings. You should adjust those settings as per your design. Here Post Type field is more important and it plays a vital role. It is a mandatory field. If you choose the wrong post type, you will get the wrong result.

Adding Wishlist Counter to Header Bar

Wishlist counter

#1: Open your Header template

#2: Add the Wishlist Counter element to your header template. Here Post Type field is more important and it plays a vital role. It is a mandatory field. If you choose the wrong post type, you will get the wrong result. It has some other extra settings like:

  • Enable / Disable counter bubble
  • Link the button with the Wishlist page
  • Change icon, icon size, color, etc.

Creating The Wishlist Page

We can make a listing page of our selected wishlist items. There is a custom query loop builder: Wishlist Items. So we can create a flexible wishlist page with the bricks editor.

Wishlist page

#1: Here we are running the wishlist items loop builder. So, we shall add an outer container which will help to make the grid or listing layout.

#2: Now we shall put a block element inside the outer container and choose the Ultimate Query ->Wishlist Items query loop builder. You should select the correct post type for the items.

#3: For pagination, you use the Ultimate -> Custom WP Query Pagination element.

Adding Delete Button to Wishlist Items

Delete wishlist item
Delete wishlist item

There is an interaction action option. So we can use the native bricks icon or button element and make the delete button with this interaction action feature.

Add element: icon, button or any other element can be used.

Interaction settings:

    1. Trigger: Click
    2. Action: Delete wishlist item
    3. Post type: Select the correct post type.
    4. Post Id: Dynamic tag {bu_post_id}
    5. Outer container selector: It is mandatory when you add the pagination element.
    6. Pagination element selector: Pagination element’s ID or unique CSS class name. The Custom WP Pagination element of BricksUltimate only works.

Note: You should put the Custom WP Pagination element outside of the outer container.

Adding Notify Template

It is the section type template. At first, you will create a section template (Bricks -> Templates -> Add New) and make the notification layout. See the Wishlist Button for WooCommerce video. After creating the template, you will go to the Add To Wishlist element. There is a notification template dropdown field. Select your correct template and save the settings.

Video Tutorials:

  1. Creating the favourite posts page for logged in user
  2. Wishlist button for WooCommerce