Angelo Marra shared a use case and some custom code to help you connect Dokan with JetEngine – these two plugins can be a perfect combo for a multi-vendor marketplace. Read the use case and welcome to share yours on Crocoblock’s Facebook or Discord communities!
About Me
My name is Angelo Marra, I’m 45 years old, and I come from Italy. I’ve been involved in web projects for over 20 years, dedicating the last 15 exclusively to WordPress.
I have built every type of website with WordPress, including institutional sites, eCommerce platforms, and web applications. I’m especially passionate about projects that involve managing dynamic content and data, and for this type of work, the Crocoblock suite is unmatched.
Luxury Car Marketplace Using JetEngine and Dokan
One of my most interesting projects is a luxury car marketplace that uses a lot of front-end features for users, including private areas for vendors and ad creation. For this project, I integrated the following:
- JetEngine features like Profile Builder, Query Builder, and Map Listing;
- ad insertion forms using JetFormBuilder, synchronized with a European database to automatically download car data;
- JetSmartFilters for filtering listings, along with other useful functionalities.
Key challenges
When Dokan creates the “vendor” role, the seller’s information (store name, address, banner, etc.) is not saved as standard WordPress fields (like post title or content). Instead, it’s stored in a specific user metadata structure managed by Dokan.
This posed a problem for easily accessing data within custom layouts. Therefore, I developed a script that retrieves the WooCommerce product object from the current context and extracts the missing vendor information. This data can then be used, for example, to display the vendor’s name in a product listing or on the single product page.
Results
The available information is exposed via shortcodes:
- Store Name [dokan_store_name]
- Address [dokan_store_address]
- Shop Description [dokan_store_description]
- Store Logo [dokan_store_logo]
- Store Banner [dokan_store_banner]
- Store Link [dokan_store_link]
These shortcodes, when used within a product loop, on a single product page, or on a store page, automatically provide the relevant product and vendor information. They can also be used by directly inserting the desired vendor’s ID (e.g., [dokan_store_name id=”123″]).
The snippet also provides a small template using the [vendor_badge] shortcode, which displays a card featuring the vendor’s banner, logo, and name.
The following CSS can be used to style the vendor badge/card for a professional, responsive look:
/* Main full-width container */
.vendor-box {
display: block;
width: 100%;
text-decoration: none;
border-radius: 4px;
overflow: hidden;
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
margin-bottom: 20px; /* space between boxes */
}
/* Banner as background, full width */
.vendor-banner {
position: relative;
padding:60px 20px 160px;
background-size: cover;
background-position: center;
overflow: hidden;
border-radius:10px;
}
/* Semi-transparent overlay for readable text */
.vendor-banner::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.35);
pointer-events: none;
}
/* Circular logo above the banner */
.vendor-logo {
width: 70px;
height: 70px;
border-radius: 50% !important;
border: 1px solid #fff !important;
position: absolute;
top: 20px;
left: 20px;
z-index: 3;
background-color: #fff; /* white background */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Vendor name bottom left */
.vendor-name {
position: absolute;
bottom: 10px;
left: 20px;
margin: 0;
color: #fff;
font-size: 20px;
font-weight: 500;
z-index: 2;
text-shadow: 0 2px 6px rgba(0,0,0,0.5);
font-family: var(--e-global-typography-text-font-family), Sans-serif;
}
/* Ensures the entire box is clickable */
.vendor-box a {
display: block;
width: 100%;
height: 100%;
color: inherit;
text-decoration: none;
}
/* Responsive: reduces logo and text on mobile */
@media (max-width: 768px) {
.vendor-logo {
width: 60px;
height: 60px;
}
.vendor-name {
font-size: 1.1rem;
left: 15px;
bottom: 8px;
}
.vendor-banner {
padding:60px 20px 100px;
}
}
selector .jet-listing-dynamic-field__inline-wrap {
display: block !important;
width: 100% !important;
max-width: 100% !important;
}By using the shortcode as a listing template in a JetEngine User Query set to the “vendor” role, you can display a comprehensive list of all site vendors.
A Dokan vendor can be active or inactive. To show only active vendors, add this to the Query’s settings:
Meta query
- Meta field: dokan_enable_selling
- Compare: equals
- Value: yes
Instead of Conclusion
The main challenge of this project was creating a script that works correctly across various WordPress/WooCommerce contexts while maintaining compatibility with a third-party plugin (Dokan). JetEngine’s customizable Queries, Dynamic Fields, and Listings were crucial for the project’s successful completion.
