This Pro tutorial provides the steps to set up and use My Favorites in Bricks Builder.
Step 1
Install and activate My Favorites plugin. There are no settings to be configured for this plugin.
Step 2
To add the favorite heart button, edit your Template with Bricks and add this shortcode via a Shortcode element:
[ccc_my_favorite_select_button]
That will output an empty heart icon that gets filled when the user clicks on it to indicate that it has been added to the user's favorites.
Step 3
If you have a profile page in your site for each logged-in user and wish to show a link to the favorites page – /favorites (to be created in the next step), add this shortcode:
[ccc_my_favorite_list_menu]
Step 4
Create a Page called Favorites.
We are going to cover 2 ways in which the logged-in user's favorites can be shown.
- Plugin shortcode
- Query Loop
Plugin shortcode
Advantage:
- Favorited items can be unfavorited using the - icon. The plugin uses AJAX to remove any unfavorited item from the DOM.
Disadvantage:
- Not possible/easy to modify the HTML output.
Edit Favorites Page with Bricks and add this shortcode:
[ccc_my_favorite_list_results]
At Bricks → Settings → Custom code → Custom CSS, add
.post-ccc_favorite .title-post {
font-size: 1.2em;
margin-top: 0.5em;
}
which results in, for example:
Query Loop
Advantage:
- Total control of the HTML output. We can decide what data should be shown for each post.
Disadvantage:
- There will be no AJAX way to delete the unfavorited item. The heart icon will toggle between unfilled and filled states when any item is unfavorited/favorited and the item (like post/page) will remain on the page.
![[WooCommerce] Up-Sells and Cross-Sells Query Loop in Bricks](https://brickslabs.com/wp-content/uploads/2022/12/product-up-sells-bricks-query-loop-editor-768x347.jpg)