Extend your WooCommerce-Dokan multi-vendor My Account Page with WP User Frontend and Elementor

Working with WooCommerce is always thrilling, and when it’s extended with the Dokan, it’s sometimes overwhelming. I know for a non-techy user, managing your vast multi-vendor store without any grip is challenging enough.

So in this article, the discussion is all about How you can extend your Dokan Multi-vendor site’s Login/Registration page with the help of WP User Frontend and Elementor. 

Before Starting

Before going further, I would like to draw your attention to these particular things.

1. You are Dokan Free or Pro user.
   • Note, Dokan pro is not mandatory but highly recommend for professional users. Who are serious about building a professional Multi-vendor store. In my site I will use Dokan Free & Pro both.
2. You are WP User Frontend Free & Pro user.
   • Make sure you have both of the WPUF Free and Pro plugin is installed and activated. Cause you may know the WPUF doesn’t allow to let the user work with the Registration/Profile building. It’s required to have any of the WPUF Pro Package.
3. You have Elementor Free Plugin version installed and activated.
   • Elementor Pro is not required but if you have already Pro version installed then it’s your plus point. Later on, I will show you why Pro version will be handy 😀
4. Not mandatory but highly recommended. You are using latest version of:
   • WordPress Latest
   • WooCommerce Latest
   • Dokan Free (Latest Version) & Pro (Latest Version)
   • WP User Frontend Free (Latest Version)& Pro (Latest Version)
5. Last but not on least. I will use the latest Dokan official compatible theme Dokani
   • This theme is recently released by the weDevs team which is still on the Lab-Mode. So please be requested to skip any minor sensitization/markup issues, if you are facing.

WooCommerce

I’m not going to elaborate about WooCommerce because if you are a Dokan user, you already know about WooCommerce. You can download and find more descriptions here.

Dokan is a WooCommerce dependent Multi-Vendor plugin that uses its core features and lets you build a multi-vendor shop. Find out all the features from here.

My Account Page

Users will register themselves (as a vendor) to use your online store from this page. Please note that this page belongs to WooCommerce, not the Dokan plugin. Dokan just extended this template and integrated its essential function to populate additional sign-up options for vendors and customers.

After installing the Dokan Lite plugin, WooCommerce my account page will appear like below:

By default, Dokan extended the default structure of the WooCommerce My Account page and attached an additional  Become a Vendor button to let the user sign up as a Seller. We will unhook the Become a Vendor button and replace our custom Vendor Registration and Customer Registration form.

WP User Frontend Pro

This plugin is superb in the niche of front-end user posts and profile management, no matter the user role. WPUF integrates with the Dokan vendor registration, and you can create a custom registration form from the existing template as below:

Heads Up:

I hope you remember that there are two slots on the My Account Page for registration purposes. So we have to create two user registration forms:

• One for Vendor Registration purpose.
• Another for Customer Registration purpose.

Setup Vendor Registration Form

Select Dokan Vendor Registration Template. You’ll find pre-populated fields for vendor registration on the form builder, and you can also use custom fields there. Apart from the auto-populated fields, adding additional custom fields won’t show over the Dokan → Vendor Dashboard area. It will only appear on the users’ profile backend area.

If you want to let your vendors set up their store basic settings after submitting the form, make sure:

• You have the Login/Registration settings configure as “Auto login after registration enable“.
• You have the associated form’s “New User Status” set as unchecked
• You have the vendor registration form notification enable with “Welcome Email“
• Well-enough to roll on to the next!

Customer Registration Form

You can create another registration form for customer sign-up purposes, like the Vendor registration form, and change the user role to the customer from the settings.

Elementor Process

All right! Now time for final polishing with the form publishing and acquiring our expected output with the help of Elementor Page Builder.

Steps to follow:

1. Firstly, configure the WooCommerce My Account page setting as like this. So that the default My Account page got obsolete and we can implement our own created WPUF form.
2. Edit the My Account page (which contain the shortcode [woocommerce_my_account]) with Elementor
3. Remove the default section
4. Drag & drop a widget like Accoridon (you can also use widget like Tab, Toggle). But I feel comfortable with Accordion.
5. I need three of the accordion item as follows:
   • Frist item for- Render the default WC My Account content. Which have the [woocommerce_my_account]shortcode
   • Second item for- Vendor registration. This will have your Vendor Registration form “Registration” type shortcode
   • Third item for- Customer registration. This will have your Customer Registration form “Registration” type shortcode.

Excellent! Here is the final output.

Save/update the page. Visit as a logged-out user, and you will see the form is showing nicely over the front-end. However, to make the registration form accordion invisible for the logged-in user. You can insert this piece of code on your Elementor → Advance CSS area or Customize → Additional CSS area.

/**
@ Hide registration form accordion for logged in user.
**/
.logged-in #elementor-tab-title-1962 /*Insert your accordion ID*/ {
    display: none;
}
.logged-in #elementor-tab-title-1963 /*Insert your accordion ID*/ {
    display: none;
}

Dilemma

Are you still in a dilemma?

No worries, I made a quick cover video on the above description. Make sure you watch it to the end to get the whole process.

Last but not in list

I showed the process by using the Elementor page builder. However, you can use any other page builder or plugin to create accordions or tabs. After which, you can use the WPUF form’s shortcodes to render your forms throughout the accordions or tabs. This is the basic idea 🙂

If you want to get the latest news from weDevs products and start discussing their product, you can join these Facebook pages or groups.

Ring the bell!

Yosh! ( Off-topic: I am a fan of Luffy-One Piece Anime character. So I think you can relate to why I write Yosh here) 😀 

One thing I must say, Elementor is a Jene of Aladin. You need to open up with your design sense to bring this to the next level! 🙂