How to Build a Multi-Vendor eCommerce Website with Dokan and WP Page Builder (Definitive Guide)

In the world of Amazon and Alibaba, anybody would be inspired to create a multi-vendor website. You may not be Jeff Bezos or Jack Ma who made billions of bucks out of their eCommerce ventures. But you could help many people sell their products and earn a good sum, or who knows where that leads.

Either you are eying at something larger or just want to help vendors sell their products and share earnings, it all starts with an engrossing and functional multi-vendor eCommerce site.

Creating a website that draws visitors’ attention and offers essential functionalities for both vendors and buyers is a big challenge. But with the right tools in hand, it’s just a piece of cake. Today, we will create a multi-vendor eCommerce site with Dokan and WP Page Builder.

Create a Multi-vendor Site with Dokan & WP Page Builder

Before we start, you might want to know- why these two plugins in particular. The reasons might interest you more. 

Dokan- A Complete Multi-vendor eCommerce Solution

Dokan is an automated, self-managed, and super intuitive multi-vendor eCommerce solution for WordPress. No doubt, it’s one of the most popular plugins in its category serving a large number of high-performing marketplaces worldwide.

Features:

• Produces detailed store insights, reports, and statements.
• Supports multiple product types and customizable shipping rate options.
• Frontend dashboard for vendors.
• Easy coupon management to offer a discount for special sales.
• Manages orders on the go.
• And many more 

WP Page Builder- The Ultimate Website Building Tool

WP Page Builder is an advanced, feature-rich, and drag and drop enabled WordPress page builder to create any type of website easily. What’s more interesting, you can get it for free. WP Page Builder gives you access to a large number of page layouts, ready blocks, functional add-ons, library systems, and many more. No developer or designer skills needed.

Features:

• Real-time frontend site-building mechanism.
• 30+ feature-specific addons.
• Ready-to-use pre-designed blocks.
• Library to save your own designs.
• A wide variety of preloaded page layout bundles for faster site development.
• And more.

Now let’s begin creating a multi-vendor eCommerce website. For that, we will use Corlate, a free WordPress theme, Dokan, and WP Page Builder plugin.

As Dokan is based on WooCommerce, we need to install and activate the WooCommerce plugin as well. 

Requirements to Build a Multi-Vendor eCommerce Website

At first, you will need the following things –

• Domain & Hosting (paid)
• WordPress Website
• WooCommerce (Free)
• Dokan (Free)
• WP Page Builder (Free)

let's assume that you have your WordPress site up and running and you have installed WooCommerce on your store.

However, if you do not know how to install WooCommerce, you can go through this WooCommerce Tutorial.

Let's see how to create your online marketplace step by step:

Configure Your Dokan Plugin

You can install and activate the Dokan plugin just like other WordPress plugins on your website. However, you can read our full official documentation or take help from the following video tutorial to configure Dokan successfully on your website:

After installing Dokan, it requires to do some basic configuration to personalize your marketplace features and activities.

Navigate Dashboard→Dokan→Settings. Give a quick tour of this documentation to learn how to configure Dokan step by step.

Here we show the basic setting options:

Let's go forward and configure your online shop on your terms:

Set up a Product Slider

Product sliders play a significant role when it comes to presenting curated products to your site visitors. The good news is, WP Page Builder helps you create gorgeous looking product sliders quickly with its Carousel addon.

There are plenty of styling options to bring the desired look to each of your slides. You can set up slides with product image, title, subtitle, description, and price. The Carousel addon also lets you add different effects/ behaviors to your slides.

Showcase Popular Products on the Homepage

Despite having a dedicated store page for product showcasing all on a single place, a custom home page with multiple sections of sorted/handpicked products attract visitors more. This will help the customers pick products without being lost to a large number of items available on the store page.

Dokan Shortcode Addon

There are several shortcodes in the Dokan plugin to display the best selling products, top-rated items, Dokan dashboard, store listing, and more. Using those shortcodes, we’ve created a dedicated addon to display those products and other elements in a wonderful way.

The Dokan Shortcode addon we created appears below the WP Page Builder’s default addon section. Dragging it on any column of the page enables you to select any of the available shortcode options to display there.

Showcase Dokan Vendors’ Stores

Showcasing stores of registered vendors on your eCommerce site with the created Dokan Shortcode addon of WP Page Builder is so easy. The addon offers multiple shortcode options. Just place the addon on a particular place and select Store Listing in the addon’s settings and you are good to go. Store Listing lets your visitors go to a particular vendor’s store and shows all of their products on a single page.

How We Created Dokan Shortcode Addon

WP Page Builder is extendable with third-party add-ons. If the default add-ons of WP Page Builder miss out on the functionality or feature you want, then you can build your own addon and use it with WP Page Builder. This is what we did here. We, dedicatedly, developed the Dokan Shortcode addon for this tutorial purpose.

Creating Dokan Shortcode addon for WP Page Builder

Creating an add-on for WP Page Builder is very easy. Because of its rich developer documentation, any developer can create a plugin to annex an add-on to WP Page Builder. When it comes to creating an addon for Dokan, it’s way easier, as there are several useful shortcodes in Dokan multivendor plugin.

Dokan Shortcode Addon for WP Page Builder code:

Go to Github to see the gist.

get_icon()

Use this function to get the icon of the addon. WP Page Builder has 340+ custom icons for developers. Also, here you can use Font Awesome 4.

get_name()

Get the addon ID using this function. It should be without space and unique.

get_category_name()

If you want to categorize the addon then you can use this function.

get_title()

Show the name of the addon on the frontend editing panel using this function.

get_settings()

Get the settings option of the panel for the addon. Developer documentation can help you a lot here.

render()

Use this function to get the PHP output of the addon. Here, the addon renders the following settings and makes the output.

getTemplate()

This function is not used here but for the static add-ons which are not included in the query, it has an extra benefit. It is a JavaScript (Actually Lodash) template which makes your static add-ons super faster.

Finally, you need to add your addon to WP Page Builder using this “wppb_available_addons” filter.

Check out the example on GitHub

So, what do you think? Is it really hard to create a multi-vendor eCommerce site? Not at all, when you have Dokan and WP Page Builder in your hand. Get Dokan and WP Page Builder today and create your dream multi-vendor eCommerce platform easily.