PowerElements adds a new element to their family. It is compatible with any post type and WooCommerce. You can use it as a wishlist functionality for the WooCommerce products. You can use the same element as a favorite button for the blog posts.
As a guest user, wishlist items are saved on the cookie. You can adjust the cookie life from your dashboard. The same cookie data will be stored in the usermeta table for the logged-in users.
It is fully adjustable from the Breakdance editor.
Wishlist Counter
We add the wishlist counter button on the site header with the Wishlist Counter element. Open your header template on the BD editor, put the Wishlist Counter element there, and select the correct post type. You can link this button to any page or sync it with the Off-Canvas element.
Note: Make sure that you are selecting the correct post type.
Add To Wishlist Button
Assuming that you create the product listing layout with the Post Loop Builder. Open the Post Loop Builder’s global block on the Breakdance editor and put the Add To Wishlist element. Select the correct “Post Type” from the drop-down and adjust the other settings as per your requirements. Save the global block and your add to wishlist button is ready for the action.
Add Notice
This notice feature will trigger when an item is added to the wishlist.
- Go to Breakdance -> Global blocks
- Create a simple block like the attached image
3. Go to the Add To Wishlist -> Add Notice section
4. Select the add to wishlist global block from the dropdown
Remove Notice
This notice feature will trigger when an item is removed from the wishlist.
- Go to Breakdance -> Global blocks
- Create a simple block like the attached image
3. Go to the Add To Wishlist -> Remove Notice section
4. Select the remove wishlist global block from the dropdown
Creating Wishlist Page
Step 1: Create a global block for the Post Loop Builder element. We shall create the individual wishlist item layout in this block.
Step 2: We shall create another global block with the Post Loop Builder element. Adjust the following items in the post loop builder
- Select the correct global block
- Click on Query -> Custom -> Edit Query button. You can also use the other query options.
- Post Type: Product(if it is woocommerce). Otherwise, you can select the correct post type
- Enter the Posts Per Page value as per your mind
- Click on the Apply Query button
- Save the block
Step 3: Create a Wishlist page, open the Breakdance editor and follow the video.
Clean All Wishlist Items
There is a Clear All button element and the user can remove all wishlist items by a single click. You can place this element on any page of your site. There is an element condition(Is Wishlist Empty) also. With this element condition, you can turn on/off this button on your site.
Note: Make sure that you are selecting the correct post type.
Add All To Cart
If you are using the WooCommerce plugin on your site, then you will get this “Add All To Cart” button element. Users can quickly add all their wishlist items to their cart with this button. You can turn on/off this button with the “Is Wishlist Empty” element condition.
Note: Make sure that you are selecting the correct post type.
How do you add the wishlist button on the shop, archive, product list, post loop builder, etc location?
Step 1: At first, you will create a global block and create the “Add To Wishlist” button layout with the “Add To Wishlist” element.
Step 2: After creating the global block, you navigate to Breakdance -> PowerElement -> Misc page. There is the Wishlist settings section. Setup the following settings:
- Breakdance Global Block
- WC Hook
- Priority
Element Condition
There is the element condition also. You can display or hide a section/content based on this element condition.