Wishlist for WooCommerce

⌘K
  1. Home
  2. /
  3. Docs
  4. /
  5. Wishlist for WooCommerce
  6. /
  7. How To
  8. /
  9. Creating a Stunning Wishl...

Creating a Stunning Wishlist Page with Elementor and Shortcodes

pasted image 0 25

Transform your WooCommerce Wishlist page into a visually appealing and user-friendly space using Elementor and custom shortcodes. With our plugin, you have the flexibility to design a wishlist page that aligns with your store’s aesthetics. Here’s a step-by-step guide on using shortcodes and Elementor to customize your wishlist page:

pasted image 0 26

 Step 1: Access WooCommerce Wishlist Shortcodes

  1. Log in to your WordPress dashboard.
  2.  Navigate to WooCommerce in the left-hand menu.
  3.  Find and click on the Wishlist tab under WooCommerce settings.
  4.  Click on the Shortcode tab to explore available shortcodes.

pasted image 0 27

Step 2: Utilize Wishlist Shortcodes

  1.  Use the `[alg_wc_wl]` shortcode to display the wishlist on your custom page designed with Elementor.
  2.  If you want to showcase the number of items in the wishlist, employ `[alg_wc_wl_counter]`. Customize it further by adjusting parameters like `ignore_excluded_items` or `template` as needed.

 Step 3: Create a “Remove All” Button

  1.  Implement `[alg_wc_wl_remove_all_btn]` shortcode to add a button that removes all products from the wishlist.
  2.  Customize the button appearance using parameters like `tag`, `remove_label`, `auto_hide`, and `show_loading` to match your design preferences.

 Step 4: Design with Elementor

  1.  Create a new page with Elementor.
  2.  Drag and drop elements onto the page to design the wishlist layout.
  3. Insert the Wishlist shortcodes within Elementor widgets or shortcode blocks to display the wishlist and the Remove All button.

 Step 5: Preview and Save

  1.  Preview your Elementor-designed wishlist page to ensure it meets your expectations.
  2.  Save the changes.

Now, your WooCommerce Wishlist page is transformed into a visually appealing space, seamlessly integrated with Elementor’s design capabilities.

How can we help?

Leave a Reply

Your email address will not be published. Required fields are marked *