How to Create a Wishlist Page Using Elementor Pro

Creating a Wishlist in Elementor is a powerful way to enhance the shopping experience on your WooCommerce website. A wishlist allows customers to save products for future purchase, making it easier for them to return and complete their orders later. With Elementor Pro, you can design a fully customized and user-friendly Wishlist page that not only looks great but also integrates seamlessly with your store’s branding. Whether you’re looking to improve user engagement, boost sales, or simply offer more convenience to your visitors, setting up a wishlist page is a smart move — and Elementor makes it easier than ever.

Create a Wishlist in Elementor Pro-Step By Step Guide

Prerequisites

Before you start:

• WordPress installed with WooCommerce
• Elementor Pro installed and activated
• A Wishlist plugin like YITH WooCommerce Wishlist (free or premium) or TI WooCommerce Wishlist

STEP-BY-STEP GUIDE

Step 1: Install a Wishlist Plugin

Choose either YITH or TI WooCommerce Wishlist plugin.

For YITH WooCommerce Wishlist:

1. Go to Plugins > Add New
2. Search for “YITH WooCommerce Wishlist”
3. Install and activate the plugin

Step 2: Configure Wishlist Plugin Settings

1. Go to YITH > Wishlist in the WordPress dashboard
2. Customize:
   • Wishlist page (can set to auto-create one or choose a custom page)
   • Button styles, table layout, etc.
3. Save settings

Step 3: Create a Wishlist Page in WordPress

If the plugin didn’t auto-create one:

1. Go to Pages > Add New
2. Name it “Wishlist”
3. Paste the shortcode from the plugin (e.g., for YITH: [yith_wcwl_wishlist])
4. Publish the page

Step 4: Customize Wishlist Page with Elementor Pro

1. Go to Pages > All Pages
2. Hover over your “Wishlist” page and click Edit with Elementor
3. Drag in Shortcode widget
4. Paste [yith_wcwl_wishlist] into the widget
5. Style the section:
   • Add padding, background, headings, etc.
   • Customize colors and typography to match your brand
6. Optionally, add additional elements:
   • Heading (“My Wishlist”)
   • Button to return to Shop
   • Login prompt for non-logged-in users

Step 5: Add “Add to Wishlist” Button to Products

The wishlist plugin should auto-add a button, but you can verify:

1. Go to YITH > Wishlist > Add to Wishlist Options
2. Enable the button on product loops/single product pages
3. Choose icon style, text, and position

Step 6: Add Wishlist Page to Navigation Menu

1. Go to Appearance > Menus
2. Add the “Wishlist” page to your menu
3. Save menu

Optional: Advanced Customization with Elementor Pro (Theme Builder)

If you’re using Elementor Pro’s Theme Builder, you can:

1. Customize Single Product Template to include a dynamic wishlist button
   • Use HTML/Shortcode widget for [yith_wcwl_add_to_wishlist]
2. Use conditions to display custom layouts for wishlist items
3. Add dynamic sections for user-specific content (e.g., login required)

Final Checklist

Additional Tips

• User Accounts: Encourage users to create accounts so they can save their wishlists across sessions.
• Email Notifications: Consider setting up email notifications to alert users when items in their wishlist go on sale or are back in stock.
• Promote the Wishlist: Highlight the wishlist feature on your homepage or product pages to increase user engagement.

Conclusion

n conclusion, creating a Wishlist page using Elementor Pro is a simple yet impactful way to improve your WooCommerce store’s user experience and boost customer retention. By integrating a wishlist feature with Elementor’s powerful design tools, you can build a visually appealing and fully functional page that aligns perfectly with your brand. Whether you’re using a plugin like YITH, JetCompareWishlist, or The Plus Addons, the flexibility of Elementor Pro ensures you can customize every aspect to meet your site’s unique needs. Start building your wishlist in Elementor today and give your customers a more personalized and convenient shopping journey.

Step-by-Step Wishlist Implementation Workflow

Integrating a wishlist into your WooCommerce store boosts customer retention, reduces cart abandonment, and provides invaluable data on which products generate the highest buyer interest. Follow this professional workflow to configure and style your wishlist:

1. Selecting the Ideal Wishlist Integration

While Elementor Pro manages front-end layout rendering, you need a lightweight backend engine to store user wishlist cookies and database records. The top options include:

• TI WooCommerce Wishlist: Outstanding Elementor compatibility, built-in Elementor widgets, guest wishlist support via cookies, and automated promotional email triggers.
• YITH WooCommerce Wishlist: The industry standard with extensive customization options, custom icon pickers, and multi-wishlist capabilities.
• MC WooCommerce Wishlist: Modern fast lightweight option designed specifically for fast Core Web Vitals.

2. Adding Wishlist Buttons to Single Product & Archive Templates

Once your chosen plugin is active, insert the wishlist trigger across your store:

1. Single Product Template: Open Templates → Theme Builder → Single Product. Drag the Wishlist Button widget directly adjacent to the “Add to Cart” button inside a horizontal flex container.
2. Shop Archive / Loop Item: If using Elementor Pro Loop Builder, place a compact heart icon button in the top-right corner of the product card image container using absolute positioning.

3. Designing the Dedicated Wishlist Page

Create a dedicated page at /wishlist/ and open it in Elementor:

• Table Styling: Match table borders, row hover highlights, and font weights to your brand design system tokens.
• Direct “Add to Cart” Actions: Ensure each wishlist item has an instant “Add to Cart” button so customers can transfer saved items into their active checkout immediately.
• Social Sharing: Enable social sharing links (WhatsApp, Pinterest, Facebook) so users can share their gift wishlists with friends and family.

Wishlist Troubleshooting & Optimization Table

Need custom WooCommerce feature development, high-converting checkout funnels, or Elementor Pro architecture? Explore our professional WooCommerce development services at CV World.

Frequently Asked Questions