MyListing Club

Build a Marketplace With MyListing and WooCommerce Product Vendors

Building better MyListing websites. One guide at a time.

Guide Contents

Overview

The Build a Marketplace with MyListing and WooCommerce Product Vendors guide will show you how to easily create an additional revenue stream for your website.

This is done with the WooCommerce Product Vendors plugin, which allows you to instantly turn a WooCommerce powered website into a marketplace complete with multiple vendors, products, and payout settings.

At the time of this writing, WooCommerce Product Vendors is the only multi-vendor marketplace plugin that is officially supported and recommended by the MyListing team.

This solution allows vendors to sell their own products on your website and in return, you can take a commission on sales to help cover the costs of running and managing your website, while you focus your efforts on building a community.

Set Up PayPal

While you can use any WooCommerce Payment Gateway to accept payments, payouts to vendors must be done with PayPal Payouts.

PayPal Business Account

If you haven’t already done so, you’ll start by creating a PayPal business account.

Once your account is in place, you’ll want to add some funds to your account, by going to the Money section of your account.

The amount of money to add depends on factors like how many vendors you are starting with, the cost of their products, the commission rates, etc.

In short, you want to ensure you have enough funds in your account to cover the launch of your marketplace, to avoid not being able to payout.

Once your marketplace gets rolling, ideally you’ll be funneling your own commission into your PayPal account, knowing it can always be withdrawn.

PayPal Developer Account

After your PayPal business account is ready to go, you’ll need to jump over to the PayPal Developer side of things and get that set up.

  1. While logged into your PayPal account, go to the apps & credentials area.
  2. While in the Sandbox environment, click the create app button.
  3. Enter your website name (e.g.  MyListing Club) in the App Name field.
  4. Click the create app button, again.
  5. Switch the toggle from Sandbox to the Live environment.
  6. Repeat the above steps to create the Live app.

WooCommerce Product Vendors Setup

Payments

  1. Install and activate the WooCommerce Product Vendors plugin.
  2. Browse to WooCommerce > Settings > Products > Vendors.
  3. Payout Schedule > Choose your desired payout schedule. (Note: We recommend starting with a Manual Payout Schedule as your marketplace gets off the ground.).
  4. PayPal Payouts Environment > Select the Live environment.
  5. (Live) PayPal Payouts API Client ID > From the apps & credentials area of your PayPal Live environment, copy the Client ID and paste it here.
  6. (Live) PayPal Payouts API Secret > From the apps & credentials area of your PayPal Live environment, expose the Secret, then copy the Secret, and paste it here.
  7. Save changes.
  8. Repeat steps 4-7, for the Sandbox environment. (Note: Your environment should now be in Sandbox mode and ready to take test payments.).
  9. Default Commission > Optionally, choose a default commission amount, which is the amount you will pay a vendor for each sale, by default. (Note: This is optional if you will be setting a unique payout amount for each vendor.).
  10. Commission Type > Choose whether your default commission being paid out will be a percentage for a fixed amount.
  11. Save changes.

Display

What this section boils down to is whether you want to display the information and branding for each individual vendor in your marketplace.

If you want to make it appear as if everything is being sold under your own brand, you can uncheck all of the settings here, and save your changes.

Shipping

WooCommerce > Settings > Shipping > Vendors Per Product Shipping

If your marketplace sells physical products that require shipping, this section may apply to you.

Per product shipping allows you to define different shipping costs for products per vendor, based on customer location.

However, if your marketplace is strictly for digital goods, you can completely disable shipping and shipping calculations within WooCommmerce, by going to WooCommerce > Settings > General > Shipping location(s).

Vendor Registration

Vendors can be manually added by the store owner or the process can be automated by displaying a registration form on your website. 

Registration Form

When you create your page where your form will be, you can simply drop in the shortcode using the default WordPress editor and be on your way or you can use Elementor to have more flexibility with design.

We recommend using Elementor to create your Vendor registration page, otherwise the styling/formatting of the page will need to be addressed with some CSS.

Anyone that uses the registration form will automatically be added as a pending vendor, so you may want to consider where this form is placed on your website, to help prevent SPAM registrations.

  1. Create and publish a new page on your website named “Vendor Registration” or similar.
  2. Edit your page with Gutenberg or Elementor.
  3. If using Gutenberg, add a shortcode block to the page and if using Elementor, add a shortcode widget to the page.
  4. Place the [wcpv_registration] shortcode into the block or widget added in the previous step.
  5. Add links to your vendor registration page throughout your website, so prospective vendors can apply to be a part of your marketplace.

Placing the Registration Form

There are a number of ways to approach this, but with MyListing websites, we would venture to bet that website owners would prefer to hide the registration form from the front-end, either entirely or until someone has successfully logged in.

Our approach is to place the registration form in the main navigation and as part of a welcome page when new customers sign up to the website.

When placing the registration form in the main navigation, we hide that menu item from users that are not logged in and that’s because we want people to come in through our MyListing website a ‘Listing Owners’, first.

Otherwise, even users with good intentions (i.e. they want to be a Listing Owner), might first sign up as a vendor, and then be unsure of what to do next.

Hiding the Registration Form

To hide the form, we start by using the Hide Content When Logged Out code snippet and the accompanying instructions.

If you want to hide the registration from your menu, you can use the following steps.

  1.  WordPress Dashboard > Appearance > Menus.
  2. Screen Options > Tick the box for ‘CSS Classes’.
  3. Edit the menu that contains your registration form menu item or go ahead and add it.
  4. Expand the registration form menu item.
  5. Add ‘hideifloggedout’ to the ‘CSS Classes’ box.
  6. Save your menu.
  7. To test, refresh your website while you are not logged in.

Approving Vendors

As the website/store owner, you will be notified via email about any new registrations and will be able to approve vendors before they can sell within your marketplace.

After someone registers to become a vendor, they will show up as a Pending Vendor, within the Users area of WordPress.

Perform the steps below to approve (or remove) vendors.

  1. Users > Pending Vendors.
  2. Click on the User account to edit it.
  3. Change the role to Vendor Admin or you can set it to Vendor Manager if you wish for them to have fewer permissions.

Manual Registration

  1. WordPress Dashboard > Users > Add New.
  2. Fill in the desired info, set the role to ‘Vendor Admin’, and then click the ‘Add New User’ button.
  3. Products > Vendors > Add the vendor’s name.
  4. Click the ‘Add New Vendor’ button.
  5. Edit the new vendor account.
  6. Vendor Admins > Specify the user from the previous steps.
  7. PayPal Email > Enter in the PayPal email address your vendor would like to use for payouts.
  8. Time Zone > Choose the closest city (i.e. Time Zone) for the vendor, that way the sales records will properly reflect their own time zone.
  9. Click the ‘Update’ button.

Vendor Login

Depending on how the vendor logs in (back-end or front-end), they will have a slightly different route to their vendor dashboard.

Back-end Login

If they log in from the back-end, using the traditional WordPress login method, they will be taken straight to their store.

Front-end Login

If the vendor already had an account on your website that allowed front-end login access, they can also get to their store using that route, with the only difference being they will need to click on the Vendor Dashboard button to get to their store.

Vendor Dashboard Endpoint

To implement the ‘Vendor Dashboard’ endpoint shown in the previous section, you will need to create a WooCommerce Endpoint.

If you haven’t already done so, you will need to create a custom menu for your endpoints and tell WordPress to use that menu.

  1. WordPress Dashboard > Appearance > Menus.
  2. Click the ‘create a new menu’ link.
  3. Name the menu ‘WooCommerce’ or similar.
  4. Add all of your desired endpoints (‘My Account’, ‘My Listings’, etc.).
  5. Check the ‘WooCommerce Menu’ box.

To add the ‘Vendor Dashboard’ endpoint to your new WooCommerce menu, you’ll need to create a custom link.

  1. Expand ‘Custom Links’.
  2. URL > Enter ‘https://your-domain.com/wp-admin‘.
  3. Link Text > ‘Vendor Dashboard’.
  4. Click the ‘Save Menu’ button.

Vendor Dashboard Endpoint Visibility

We recommend hiding the Vendor Dashboard endpoint (i.e. menu item) from those that are not approved with the Vendor Admin or Vendor Manager roles.

This not only helps to prevent users from hitting your website’s admin URL (/wp-admin/), but it keeps the overall MyListing dashboard cleaner for non-vendors.

Hiding the Vendor Dashboard Endpoint Using a Plugin

If you want to go the plugin route, we recommend the FREE, Nav Menu Roles plugin, and the screenshot below shows how we’ve implemented this.

Hiding the Vendor Dashboard Endpoint Using a Code Snippet

For those that don’t need the other functionality, the plugin above offers, or for those that like to keep their plugin use to a minimum in general, be sure to check out our Show Content Based On Role code snippet.

Vendor Store

Once a vendor is logged in, they will be able to access their private store and have full transparency into all aspects of it, with website owners and vendors seeing the same information.

Dashboard

Much like WordPress’s WooCommerce Status dashboard view,  the vendor dashboard has a nice sales summary for multiple areas, like monthly net sales, monthly commission, product stock, and more.

Orders

As mentioned, vendors have full transparency into any orders placed on the website, for their products, knowing which were purchased, the order dates, and the commission information.

For any physical products that involve shipping, vendors can use the orders area to mark their orders as FULFILLED.

Reports

In this area, vendors can easily view and export sales reports, as well as view stock levels.

Media

In this area, vendors can add and manage their product images, without gaining access to the entire media library or libraries of other vendors.

Note: We highly recommend implementing image governance on your website, to prevent vendors from being able to upload massive image files.

Please see our Image Optimization for MyListing Websites guide, for more information.

Products

In this area, vendors can add and manage all of their products.

Any products added here are then eligible to be added to Single Listing Storefronts or Non-Listing Storefronts, and we cover both, in the next section.

How Vendors Add Products

  1. Vendor Dashboard > Products > Add New.
  2. Enter all of the product information.
  3. Click the Submit for Review button.

After the product is submitted, the website owner will get an email mentioning the vendor, their submitted product, and providing a link to the product, and this is triggered by the Product Added Notice email setting in WooCommerce.

Note: We recommend setting up a product category (or categories) in WooCommerce for your vendors to use when submitting their products, as this will help keep their products out of your website’s main store.

Make sure to properly educate your vendors as to how to add products in general, but be sure to cover assign a category.

  1. The website owner follows the product link within the email, where they can then review the product, check for any omissions such as the category assignment, and then publish the product.

Store Settings

In this area, vendors can update their information, see their commission rate, and improve their profile by adding a logo, writing a vendor introduction, providing an introduction video, etc.

PayPal Email

The store settings area is also where vendors will need to go, after creating their vendor account, to specify their PayPal email address.

Important: Vendors need to have a verified PayPal account to receive commission payments.

Support

In this area, vendors can request support from the website owner, by sending them an email.

Any emails sent from this location will go to the website’s Administration Email Address (WordPress > Settings > General), so it’s important to use an email address that will be regularly checked.

By default, the instructions aren’t very specific in this area, so we use Loco Translate to translate the WooCommerce Product Vendors plugin, adjusting the instructions (see screenshot) to provide some clarity for vendors.

Please see our How To Use Loco Translate With MyListing guide, for more information.

Styling the Vendor Dashboard

One aspect of WooCommerce Product Vendors that makes it a non-starter for some, is the fact that it doesn’t have the sexy front-end operations that other vendor plugins have.

The Admin 2020 plugin makes this less of an issue, as it brings a cleaner and more modern-looking dashboard to the vendors.

As an added bonus, the built-in menu editor can lockdown/hide menu items from particular vendor roles.

Single Listing Storefront

Since we are working with the MyListing theme, our primary focus is to allow vendors to display products within the Listings.

Listing Type Configuration

Vendor Products Field

The following steps get your Listing Type ready to allow vendors to add their products to their Listing.

  1. Listing Types > Edit Listing Type > Fields.
  2. Add the Product Multiselect field.
  3. Select the types of products the vendors are allowed to upload.
  4. In the description field, let vendors know what types of products you are allowing them to add.
  5. If you happen to be using Package Visibility, be sure to set that here to comply with the features displayed in your Listing packages.

Vendor Store Tab

The following steps get your Listing Type ready to allow vendors to display their products within their Listing.

  1. Listing Types > Edit Listing Type > Single Page > Content & Tabs.
  2. Add the Store tab.
  3. Give the tab a label (e.g. Store).
  4. For the Display products from field: dropdown, select the vendor products field you created above.
  5. Toggle on the Hide tab if there are no products setting.
  6. Click Update to save your changes.

Adding Products to Single Listings

When vendors go to add their first Listing or they are editing existing Listings, they will be able to add the products they’ve made available in their private store.

Non-Listing Storefront

Website owners might also find that it is desirable to individual vendor stores, outside of their Listings.

For vendor storefronts, we like to create a shop template with Elementor Pro, that is assigned to all Vendors using template Display Conditions.

Included in our Vendor storefront template, is the WooCommerce breadcrumb widget, which displays the name of the vendor in the breadcrumb.

We like to keep our WooCommerce pages distraction-free (and lite) by hiding the header and footer, so breadcrumbs are critical in this scenario.

Our MyCity Charlotte Shop Page template is available for purchase or FREE, for qualifying Club members.

Vendor Commission

Since we are manual paying out commissions for the purposes of this guide, we will cover that process.

Manual Payouts

  1. WordPress Dashboard > Commission.
  2. Select the unpaid commission and from the Bulk actions menu, choose Pay Commission.
  3. Click Apply.

At this stage, you should see a message about the item(s) being processed and that the paid status will be updated in a few minutes.

Once the commission payment goes through, the Commission Status will switch from UNPAID to PAID.

Email Notifications

Several emails are set up in Product Vendors for vendors and the store owner.

  • Vendor Registration (Store Owner) – An email is sent to the store owner when a vendor submits the registration form.
  • Vendor Registration (Vendor) – An email is sent to the vendor to confirm the registration form was submitted to the store owner.
  • New Order (Vendor) – An email is sent to the vendor notifying them of a new order.
  • Canceled Order (Vendor) – An email is sent to the vendor notifying them of a canceled order.
  • Vendor Approval (Vendor) – An email is sent to the vendor with their credentials when/if their registration is approved.
  • Product Added (Store Owner) – An email is sent to the store owner to review when a product is added by a vendor.
  • Order Note to Customer (Customer) – An email is sent to the customer when a vendor adds a note, e.g., Tracking number, personal thank you.