Enrich Your WordPress Knowledge Regularly
Extend your WooCommerce-Dokan multi-vendor My Account Page with WP User Frontend and Elementor
Table of Contents
Getting Started
Working with WooCommerce is always thrilling and when it’s extended with the Dokan then it’s sometimes overwhelming. I know for a non-techy user, managing your vast multi-vendor store without any grip is tough 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 on these certain things.
- 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.
- 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.
- 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 😀
- 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)
- 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 more about WooCommerce cause if you are a Dokan user then you may already used to and know that without WooCommerce Dokan is noting.
Dokan is a WooCommerce dependent Multi-Vendor plugin which using it’s core features and let you built a multi-seller shop. Where your sellers can manage their shop/stores seamlessly from the Front-end side. So as a market-owner you no need to let your vendors access into the site back-end panel.
My Account Page
This is where from your site users will get register themselves to use your online store. Please note that this page is belongs to WooCommerce not Dokan. Dokan just extended this page/template design and integrate it’s essential action/hooks so that the Custom as well Vendors can use this page for sign up.
After installing WooCommerce and Dokan Lite/Free plugin you will see the My Account page view like this
Play Video
As you can see on the video. By default, Dokan is extended the default design of the WooCommerce My Account page and attached Become a Vendor button to let the user sign up as a Seller. This is where our Role to play! 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 simply awesome in the niche of front-end user posts and profile management, no matter what’s the User Role is! Well then, what’s the role of the WPUF here on the basis of the Dokan Vendor sign-up. As you may already know that WPUF has already integration with the Dokan where it will let the Seller register through it’s pre-defined registration template.
Heads Up:
I hope you remember that on the My Account Page there are two slot for registration purpose. So we have to create two user registration form:
Setup Vendor Registration Form
Select Dokan Vendor Registration Template => Role over on the form builder => Insert your desire Profile Fields and Custom Fields and save the form. Few things for your preferences:
- If you want to let your vendors setup their Store Essential settings after submit the form then 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
Select Dokan Vendor Registration Template => Role over on the form builder => Insert your desire profile fields & custom fields.
Once done with the form creation copy the registration type form short-code and paste on your page. Or leave it if you don’t want to published the form and want to use this on your WooCommerce My Account page.
Elementor Process
All right, so now is the final polishing with the form publishing and acquire our expected output with the help of Elementor Page Builder. I’m not going to be more descriptive about Elementor here as I just need it to finalize the My Account page design rather than this is not compulsery to use.
Steps to follow accordingly:
- Firstly, configure the WooCommerce My Account page setting as like this. So that the default Account Creation from on the My Account page got obsolete and we can implement our own created WPUF form there.
- Edit the My Account page (which contain the shortcode [woocommerce_my_account]) with Elementor
- Remove the default section
- Drag & drop a widget like Accoridon (you can also use widget like Tab, Toggle). But I feel comfortable with Accordion.
- I need three of the accordion item as follows:
- One for- Render the default WC My Account content. This is have the shortcode [woocommerce_my_account]
- One for- Vendor registration. This will have your Vendor Registration form “Registration” type shortcode.
- One for- Customer registration. This will have your Customer Registration form “Registration” type shortcode.
Excellent! here is the final appearance.
Now, save/update the page.
Once done with above, visit as logged-out user and you will see the form is showing nicely over the frontend. However, to make the registration form accordion as invisible fro 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 dilemma?
No worries, I made a tutorial on the above description. Click on the below to watch it out. Make sure you watched it to the end to get the whole process of the above action.
Last but not in list
If you want to get the latest news from weDevs products and want to start any discussion on regards their product then you can join in these Facebook page or groups
Ring the bell!
Yosh! ( Off-topic: I am a fan of Luffy-One Piece Anime character. So I think you can relate why I write Yosh here) 😀
So we are all done for today. Uff, for me this was a long article :/ to write and now feels like released the air of a balloon (haha).
One thing I must say, Elementor is a Jene of Aladin you just need to open up your six science of designing skill. Then you will get the original taste of its limitless possibilities 🙂
This is all for today. See you in the next article till then stay safe & stay happy tada!
