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, the complete multi-vendor eCommerce solution

how to build a multi vendor ecommerce website

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 option.
  • 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

how to build a multi vendor ecommerce website

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 the access to a large number of page layouts, ready blocks, functional add-ons, library system, and many more. No developer or designer skills needed.

Features:

  • Real-time frontend site building mechanism.
  • 30+ feature-specific addons.
  • Ready-to-use predesigned 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 WooCommerce plugin as well. 

Set up a product slider

how to build a multi vendor ecommerce website

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

how to build a multi vendor ecommerce website

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

how to build a multi vendor ecommerce website

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 others 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

how to build a multi vendor ecommerce website

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 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 Dokan Shortcode addon for this tutorial purpose.

Creating Dokan Shortcode addon for WP Page Builder

Creating an addon for WP Page Builder is very easy. Because of its rich developer documentation, any developer can create a plugin to annex an addon 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 settings option of the panel for the addon. Developer documentation can help you a lot here.

render()

Use this function to get 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 addons super faster.

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

Check out the example in 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.

4 Comments

  • ردیاب خودرو

    ردیاب خودرو

    Hi, Dokan is very useful plugin but it work some slow, is there another complete plugin like Dokan?

    • Gobinda Tarafdar

      Gobinda Tarafdar

      Hi ردیاب خودرو,

      If you are using Dokan and facing the problem of slow response please create a support ticket with detail information. From there our Technical Support Team will help you accordingly.
      And thanks a lot for your valuable opinion.

  • تعمیرات مبل

    تعمیرات مبل

    Thank you for sharing this article

    • Gobinda Tarafdar

      Gobinda Tarafdar

      Welcome تعمیرات مبل,

      Please stay connected.

      Take care.

Leave a Reply

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.