DynamicPress includes a full server-side wishlist system. Items are stored in a dedicated database table per user – they persist across sessions and devices. The wishlist panel slides in from the side as a drawer, similar to the mini cart.
| 📝 Note: The wishlist requires users to be logged in. Clicking an add-to-wishlist button while logged out returns an error response. Wishlist data is stored in the wp_dp_wishlist_products table created automatically on plugin activation. |
How the Wishlist Panel is Injected #
The wishlist drawer HTML is added in the page footer on every frontend page when WooCommerce is active:
| <!– Automatically injected in footer: –> <div class=”add-to-wishlist-dynamicpress”> <div class=”wishlist__header”> <div class=”wishlist__title”>Wishlist</div> <div class=”wishlist__close add-to-wishlist-dynamicpress-close-btn”> <i class=”fa-solid fa-xmark”></i> </div> </div> <div id=”wishlist-items-dynamicpress” class=”wishlist__items”></div> <div class=”wishlist__footer”> <div class=”wishlist__total-label”>Total Amount</div> <div id=”wishlist-total-amount” class=”wishlist__price”></div> <a href=”/shop” class=”wishlist__checkout …”>Explore All</a> </div> </div> |
Opening the Wishlist Panel #
Any element with the class show-wishlist-dynamicpress opens the wishlist drawer when clicked. The JavaScript uses event delegation so the trigger element can be anywhere in the DOM, including inside Bricks query loops.
In Bricks Builder: #
- Add a Button, Icon, or Div element.
- In the CSS Classes field, add: show-wishlist-dynamicpress
- On click, the JS fetches the user’s wishlist from the server and populates the panel before opening it.
| <!– Open wishlist drawer: –> <button class=”show-wishlist-dynamicpress”>My Wishlist</button> <!– With a heart icon: –> <div class=”show-wishlist-dynamicpress header-icon”> <i class=”fa-regular fa-heart”></i> <span>Wishlist</span> </div> |
Closing the Wishlist Panel #
The close button inside the panel uses the class add-to-wishlist-dynamicpress-close-btn and is part of the injected HTML. It removes the open class from .add-to-wishlist-dynamicpress to hide the panel.
| <!– If you want to add a custom close trigger anywhere: –><button class=”add-to-wishlist-dynamicpress-close-btn”>Close Wishlist</button> |
Add to Wishlist Button #
To allow users to save a product to their wishlist, add a button with the class urban-add-to-wishlist and a data-product_id attribute set to the WooCommerce product ID.
| Attribute / Class | What It Does |
| class | Must include urban-add-to-wishlist |
| data-product_id | The WooCommerce product ID (integer) |
| <!– Add to wishlist button: –> <button class=”urban-add-to-wishlist” data-product_id=”42″> <svg>…</svg> Save to Wishlist </button> <!– In a Bricks product loop using dynamic data: –> <button class=”urban-add-to-wishlist” data-product_id=”{post_id}”> <i class=”fa-regular fa-heart”></i> </button> |
When the button is clicked:
- The SVG/icon inside the button is hidden. A .loader spinner is injected next to it.
- An AJAX POST is sent to wp-admin/admin-ajax.php with action=add_to_wishlist and the product_id.
- On success: the spinner is removed, the icon is restored, and the wishlist panel opens automatically showing the updated wishlist.
- If the user is not logged in: an error alert fires ‘Please log in to add items to your wishlist.’
- If the item is already in the wishlist: an error alert fires ‘This item is already in your wishlist.’
| 💡 Tip: Place the add-to-wishlist button inside a Bricks Query Loop on a product archive or loop template. Use {post_id} as the data-product_id value via a Bricks dynamic data binding. |
Wishlist Panel – Internal Class Reference #
| Class / ID | Purpose |
| .add-to-wishlist-dynamicpress | Outer wishlist drawer (gets class ‘open’ when visible) |
| .wishlist__item | Single wishlist item row |
| .wishlist__item-image | Product image |
| .wishlist__item-title a | Product name link |
| .wishlist__attributes | Short product description (first 80 chars) |
| .wishlist__price.wishlist-item-price | Formatted product price |
| .add-to-wishlist-dynamicpress-delete-item | Remove from wishlist button — needs data-product-id |
| .wishlist_add_to_cart | View Product button – links directly to the product page |
| #wishlist-items-dynamicpress | Container where wishlist item HTML is injected via AJAX |
| #wishlist-total-amount | Combined price total – updated after every remove action |
| .add-to-wishlist-dynamicpress-close-btn | Any element with this class closes the panel |
| .show-wishlist-dynamicpress | Any element with this class opens and refreshes the panel |
| .urban-add-to-wishlist | Any element with this class triggers add-to-wishlist (needs data-product_id) |
Remove from Wishlist (Inside the Panel) #
The remove button is rendered inside each wishlist item row by the server-side template. It uses event delegation so it works reliably even after the panel HTML is refreshed:
| <!– Remove button structure inside wishlist item: –> <div class=”wishlist-dynamicpress-delete-item add-to-wishlist-dynamicpress-delete-item” data-product-id=”42″> <i class=”fa-regular fa-trash-can”></i> </div> |
After successful removal, the item row is removed from the DOM and #wishlist-total-amount is updated with the new total.
Full Flow Summary #
| Action | Result |
| User clicks .show-wishlist-dynamicpress | Panel fetches items from server and opens |
| User clicks .urban-add-to-wishlist | Product added to DB; panel opens and refreshes |
| User clicks .add-to-wishlist-dynamicpress-delete-item | Product removed from DB; item removed from DOM; total updated |
| User clicks .wishlist_add_to_cart | Links to product page (redirect to single product) |
| User clicks .add-to-wishlist-dynamicpress-close-btn | Panel closes |
