Dokan Elementor

Dokan Multi Vendor Documentation

Dokan Elementor module allows the admins customize the global appearance of vendor store pages. However, this feature’s settings are only accessible by the admin.

Prerequisites

To make this feature available, you need these 4 plugins (3 of them require licenses):

  1. WooCommerce
  2. Dokan Lite
  3. Dokan Pro
  4. Elementor Free
  5. Elementor Pro
  6. Dokan Elementor Module

Note: The Elementor Pro plugin is not included in the Dokan Plugin. You need to purchase it separately.

Installation

First off, you need to install and activate both the free and paid version of the Dokan plugin.

After that, navigate to your WP Admin Dashboard > Dokan > Modules. Find Elementor and turn on the toggle button to activate this module.

this is a screenshot of Dokan Elementor

Now, navigate to WP Admin Dashboard > Templates > Add New.

this is a screenshot of Dokan elementor

After that, a pop up will appear on the screen:

this is a screenshot of Dokan Template

Now, choose the following template and give a name to the template as well:

this is a screenshot of Template

Finally, hit the “Create Template” button to get it done.

Now, you will be able to see the three default blocks for the vendor store page. To set a template hover your mouse over a template and hit the insert button and it will be all set.

this is a screenshot of Elementor Library

Please note that if you use the Dokan Elementor store theme, the default theme will not work properly.

this is a screenshot of elementor editor

In this section, you will get the following elements:

  • Store Banner: You can drag and drop these elements to any preferred area to let your vendors set their store’s banner.
  • Store Name: This block is used to change the individual vendor’s store name.
  • Profile Picture: This element is used to change the profile picture of the store owner.
  • Store Info: Use this element to let your vendor show their store’s information.
  • Social Profile: This element includes social sharing buttons like Facebook, Twitter, Linkedin, Google+, Pinterest, YouTube, Instagram, Flickr.
  • Store Tab Items: It contains the products, terms, and conditions and reviews options. You can also show or hide these items if you want.
  • Tab Contents: This element will show the store products as a tab.
  • Store Share Button: Use this button to add a share button for your vendors.
  • Support Button: Use this element to add a support button on the store page.
  • Store Live Chat Button: Allow your vendors to set a live chat button on the store page.
  • Follow Button: Use this element to add a follow button for the store page.
  • Store Vacation Message: This element will help the vendor show texts while they are on vacation.
  • Store Coupons: Using this option the vendor will be able to show the store coupons to their customers.
  • Dokan Product Store Filter: Using this widget customers can filter products right from the vendor’s store. 

How to Customize the Store Elements & Publish Them?

Just drag a store widget or element and drop it to anywhere you want with the Elementor editor. Here in this example, we have dragged the “Store Social Profile”.

this is a screenshot of Dokan Elementor

After having the elements dropped, it will come into effect like this:

this is a screenshot of Store Design

Fortunately, you will also be able to customize these elements like any other regular Elementor elements.

Here is a Dokan Elementor template after customization:

this is a screenshot of Dokan Elementor

As you can see, we have customized the default dokan elementor template and changed their position and other properties.

You can also set a profile placeholder image and a banner placeholder image for your vendors so that your vendors can upload their individual images with ease.

However, if you change the color of an area of the elements with custom css, your vendors won’t be able to change them.

When done editing, hit the ‘UPDATE‘ button:

this is a screenshot of Store Name

Next up, click on the arrow beside the ‘UPDATE’ button:

this is a screenshot of Vendor Store

Now, you will have to hit the “Save as Template” option.

this is a screenshot of Dokan Vendor Dashboard

After that, you will get a pop up in which you will have to give a name and save the template:

this is a screenshot of Library

Click on the arrow again:

this is a screenshot of Dokan Elementor

Select the “Display Condition” option:

this is a screenshot of Elementor Canvas

Next, you should see another pop up. Here select the “Single Store” option from the dropdown and hit the “Save & Close” button to finish the setup.

this is a screenshot of Single Store

Now, all of your vendors will get to view your customized elementor template from their individual store:

this is a screenshot of Dokan Store

That’s how you can use the Dokan Elementor module to customize the vendor store page.