Black Friday Super Sale 2024 Starts in

0Days

0Hours

0Minutes

0Seconds

WIN AN iPAD, LIFETIME MEMBERSHIP
×
how to build a Divi wishlist page

Feb 9, 2023 | Divi Resources, WooCommerce

Build a Divi Wishlist Page in 5 Steps

Build your Divi WooCommerce store and have added the wishlist functionality? And now looking for a way to display customers’ wishlist items engagedly? Well, through a custom Divi wishlist page, you can easily display those items to your customers. 

In the previous post, we discussed what a wishlist is and how a wishlist works. Check it out, if you haven’t added the wishlist button to your website.

And in this tutorial, we will show you how to create a custom WooCommerce wishlist page for Divi using the Wishlist module of Wishlist Manager. Just follow the steps one by one and when you reach the end, you’ll have your nice wishlist page.

If ready, then let’s get started!

Step 1 – Install Divi WooCommerce Extended


Wishlist Manager is an extension of the Divi WooCommerce Extended plugin, which provides you with multiple modules and extensions for a Divi WooCommerce site. Instead of using a dedicated WooCommerce wishlist plugin, you can use modules and extensions of this plugin to build a Divi and WooCommerce-powered store from scratch. Or you can implement various functionality to improve the digital store’s performance and looks. For example, using the WooCommerce Product Carousel module, you can add WooCommerce product slider – an interactive way to showcase products. Likewise, there are multiple products that make an eCommerce store amazing.

Divi WooCommerce Extended plugin

For a wishlist page design in Divi using this plugin, first, you need to get it from the Divi Extended Store. This plugin provides you with all the features like a dedicated WooCommerce wishlist plugin to design a wishlist page. The #1 Divi Author on Elegant Themes Marketplace. It’s a premium plugin, so you get different options to get it as per your requirements. 

Yet, whatever you choose, it’s the fastest method to build a Divi wishlist page with no complex process. 

installing Divi WooCommerce Extended

Once you have it, download the Zip file and go to the Plugins → Add New → Upload Plugin. Click, Choose File → select the file you’ve downloaded → Install Now. Once the plugin is installed, click Activate Plugin and move to the next step to enable the Wishlist Manager for the Divi wishlist page. 

Step 2 – Enable Divi Wishlist Manager


To build our custom wishlist WooCommerce page for Divi, first, we need to enable the Wishlist Manager extension. So, to do that, on your WordPress Dashboard, go to Settings → Divi WooCommerce Extended.

enabling wishlist manager

Then, in the settings panel, go to Wishlist Manager → and check Wishlist Manager to Enabled. As you enable the extension, you get the options to customize the wishlist button. Follow this tutorial, to learn how you can effectively use these options to add the wishlist for WooCommerce in Divi.

wishlist manager settings

Once you’ve enabled the Wishlist Manager on your Divi WooCommerce store, we can move to the next step. We’re ready to build our custom Divi wishlist page.

Step 3 – Launch Divi Builder and Add Wishlists Module


This step is where we get into the technicality of building the wishlist page. Though it’s all easy and simple. Create a new page or edit an existing one where you want to display the wishlist page. Launch Divi Visual Builder by clicking the Build On The Front End. 

Build on front end on Divi Theme Builder

Visual Builder is where you can really enjoy the possibilities of Divi to build a modern website. When the builder loads, choose BUILD FROM SCRATCH. 

Build from scratch in Divi Theme Builder

Once it’s loaded, add the following DWE Wishlists module from the module’s library.

Divi wishlist module for wishlist page

As soon as you add the module, you’ll see the products for the wishlist. 

Divi wishlist page module

If you don’t see any product for wishlist page design, then what you need to do is first open the store and add some items to the wishlist. It’s simple, go to the Store → then click on the heart icon. Refresh the wishlist page you’re designing and you’ll get the products.

This you only need to do when you don’t see any product.

Step 4 – Customize Module Settings for Wishlist Page


The settings you get first when the module is added to the page are Content. Therefore, let’s explore them first.

Customizing Content Settings of the Wishlist Page Module

In the Content tab, you get Configuration, Display, Link, and Background as the additional settings for the Wishlists module.

Divi wishlist page module

Configuration

In the configuration settings, you get the option to define how many products you want to display on the page. Plus, what should be the text when there’s no product added to the wishlist.

Divi wishlist configuration settings

In this way, you can limit the load if there are multiple products in the wishlist improving the performance of the page. The custom text for no results allows you to present the message creatively and in the fulfilling sense.

Display

The Display settings of the Wishlists module first let you enable different fields on the products. 

Display options of Divi Wishlist module

You can choose to display Price as well as Add to Cart button. Then, moving forward to the options, you get to adjust the products column up to 5. Plus, their spacing as well. 

After that, you can apply the Masonry layout to your Divi WooCommerce store by checking the Use Masonry to YES.

masonry options in Divi wishlist page

Then, the Display tab offers multiple fields to set custom text for, 

Divi Wishlist module for custom text

  • Out of Stock Label Text.
  • Simple Product Add to Cart Text.
  • Variable Product Add to Cart Text.
  • Grouped Product Add to Cart Text.
  • External Product Add to Cart Text.
  • And Out of Stock/Unpurchasable Add to Cart Text.

Link

Here, you can decide where the product page will open when the users click it, 

DWE wishlist link settings

Whether In The Same Window or In The New Tab.

Background

The final setting we’ve got in the Content tab of this Divi WooCommerce module is Background. Here you can customize the product background with Color, Gradient, and Image. 

product background in DWE wishlist

Apply changes per you need and then move to the Design tab to customize the wishlist page’s look.

Customizing Design Settings

The Design tab of the Wishlists module provides you with the following settings:, 

DWE wishlist design settings

Let’s discuss each one by one.

Title

In the Title settings of the Design tab, you get the options to apply text customizations to the product title. 

DWE wishlist title settings

You get the heading levels, text font type, weight, style, and alignment. Plus, color, size, letter spacing, and more to make the title highly readable and match your store’s look and feel.

Price

In the Price settings, you again get the text customizations. However, here you can apply them to,

DWE wishlist price settings

  • Default Price
  • Regular Price
  • And Sale Price. 

Based on your web store’s default font and text customizations, adjust the settings.

Add to Cart

Using the Add to Cart settings, you can enhance the design of your products’ add to cart button. The settings provides you with the option to apply a custom icon to the button. 

Switch Show Add to Cart Icon to YES to use a custom icon from the available icon’s library. 

Divi wishlist add to cart settings

Then, you get the option of whether the icon should be displayed on hover or by default. So, if you want to display an icon on hover, then switch Only Show Icon on Hover to YES.

wishlist icon on hover settings

Then, use other options like,

  • Add to Cart Icon Placement: to change the icon’s position to Right or Left.
  • Add to Cart Padding: to adjust padding around add to cart button.
  • Text Options: to make the add to cart button text match the website’s default look. Or enhance it.

DWE wishlist add to cart settings

After adjusting the add to cart button settings, move to the next option.

Out of Stock

Similar to the Title and Price settings, the Out of Stock settings allow you to apply text customizations to the Out of Stock text. You can change font family, weight, style, alignment, color, size, and more. 

Remove Icon

Using the Remove Icon settings, you can perform the following customizations:

Divi wishlist remove icon settings

  • Change the size of the icon using the Remove Icon Font Size option.
  • Apply different color for the Remove Icon Background.
  • And use the Remove Icon Color to apply color on the remove icon.

With these settings, you’ll be able to match remove icons with other settings of the Divi wishlist page.

Border

Using the Border settings, you can apply rounded corners to Products’ tile. 

Divi wishlist border settings

Simply define the value of how many rounded corners you want for the products.

Box Shadow

The Box Shadow settings enable you to apply shadow on the products’ tile using the Product Box Shadow option.

Divi wishlist box shadow settings

First, select the shadow, then adjust the values. 

And that’s it.

Step 5 – Place Divi Wishlist Link


We have successfully designed our beautiful and impressive Divi wishlist page. Now, what’s remaining is to place the Divi wishlist link where the customer can easily access it. In experts’ opinion, the best place is the main menu. Or you can say Header. 

The navigation will allow the customer to access the wishlist page whenever they need. So, for that, you can use the Divi Theme Builder to edit your header and insert the wishlist link. Or if you’re using the dynamic menu in your Divi header, then, it’s better to use the WordPress’s default menu option. 

On your WordPress Dashboard, go to Appearances → Menus → select the menu → Primary Menu

adding wishlist link on the page

Here, select the Divi wishlist page from the Pages tab, then click, Add to Menu

Once added to the menu, adjust it in the way you like and, once done, click Save Menu. And that’s it, we have placed the Divi wishlist link on the menu. Now, users will be able to access it easily. This is how it will be displayed.

wishlist page link on Divi menu

Conclusion


So, this is how you create a Divi wishlist page with Divi and WooCommerce using the Wishlist Manager. All the steps are easy to follow regardless of your WooCommerce or Divi experience. You get the option to adjust the number of products you want to display on the page. You get the option to apply masonry effect and also have the capabilities to apply different styling to different elements on the page. 

Overall, the Wishlist module makes it worthwhile to build and design a Divi wishlist page that resembles the quality of a modern web store. 

Therefore, get the Divi WooCommerce Extended plugin to design your own WooCommerce wishlist page in Divi. And not only the wishlist page, but you can also perform various actions using the other modules and extensions of the plugin. 

Additionally, you can use your wishlist page to collect lead information and it could be a viable option to market to your potential customers from within your website. Check out this post from Elegant Themes on the best WordPress marketing plugins.

Check out the plugin’s demo today to learn more about Divi WooCommerce Extended and how it can help you build a magnificent Divi eCommerce site. 

Posted By:
Lokesh
With the sharp acumen and logical mind, Lokesh specializes in process analysis, mapping, improvement, requirements gathering, workflow automation, and helping his clients find their place in the ever so competitive business arena.

0 Comments

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

How to Check Fonts Used on a Website (an Easy Guide)

How to Check Fonts Used on a Website (an Easy Guide)

A website should only use a maximum of three fonts for its content. Therefore, you ought to be careful about your font choice for readability. With a wide variety of fonts, you might get confused about the best to use. Luckily, there are some reliable online tools you...

Black Friday 2024 WordPress Themes and Plugins Deals

Black Friday 2024 WordPress Themes and Plugins Deals

40% sitewide discount. Freebies and much more.40% sitewide discount. Freebies and much more.Up to 73% off.Get 50% off on all new licenses.Enjoy a 50% discount for your first year on any purchase.30% off WordPress plugins and services.Up to 40% off.Up to 40% off.Up to...

Divi Extended Black Friday Sale
Divi WooCommerce Extended