MultiVendorX Styling

BuddyX Pro ships a stylesheet that makes MultiVendorX match the rest of your site. That is the whole integration. The theme does not add marketplace features, templates, or settings of its own - it takes the pages MultiVendorX already renders and repaints them with your theme colours, borders, and corner radius.

If you are looking for a marketplace integration that goes further than styling, see the Dokan, WC Vendors, or WCFM documents instead. Dokan is the only marketplace plugin with its own Customizer section in the theme; Dokan and WC Vendors also ship theme template overrides. MultiVendorX support in BuddyX Pro is styling only.

What Is MultiVendorX?

MultiVendorX (also written MVX) is a WordPress plugin that turns a WooCommerce store into a multi-vendor marketplace. Vendors register, get their own store page, and sell their own products. The plugin provides the vendor registration form, the store directory, the individual store pages, store reviews, and a set of vendor widgets.

BuddyX Pro does not change what any of those pages do. It changes how they look.

Requirements

Requirement	Version
WordPress	6.5 or later
PHP	8.0 or later
BuddyX Pro	5.1.0 or later
WooCommerce	Required by MultiVendorX
MultiVendorX	Not version-gated by the theme

BuddyX Pro 5.1.0 matters if you also run Tutor LMS. Before 5.1.0 the MultiVendorX stylesheet was enqueued under the handle buddyx-tutor, which the Tutor LMS stylesheet had already claimed. On a site running both plugins the second call was a no-op and the MultiVendorX file never loaded, so those pages rendered with plugin default styling and no theme colours. On a site running MultiVendorX without Tutor LMS the file did load, under the borrowed handle. Version 5.1.0 gave it its own handle, buddyx-multivendorx, which fixes the combination case.

The load condition also widened in 5.1.0. Before that it was class_exists( 'MVX' ) alone; it now also accepts function_exists( 'mvx_get_option' ).

Installation & Setup

There is nothing to switch on in the theme. The stylesheet loads by itself once MultiVendorX is active.

Step 1: Install WooCommerce and MultiVendorX

1. Go to Plugins > Add New
2. Search for “WooCommerce”, click Install Now, then Activate
3. Search for “MultiVendorX”, click Install Now, then Activate
4. Complete the MultiVendorX setup wizard

Step 2: Confirm the theme styling is loading

The theme checks for MultiVendorX on every front-end page load and adds its stylesheet when it finds it. To confirm:

1. Visit your store list page on the front end
2. View the page source
3. Look for multivendorx.min.css in the head

On a normal page it appears as <link rel="preload" id="buddyx-multivendorx-preload" ... as="style" onload="this.rel='stylesheet'"> rather than as a plain stylesheet tag, so search for the filename rather than for rel="stylesheet". On AMP pages preloading is off and it is a normal enqueue. If the file is there, the styling is active. If it is not, check that MultiVendorX is actually activated.

Step 3: Set your colours

Because the MultiVendorX stylesheet is built entirely from theme colour variables, you style your marketplace by styling your site. Go to Appearance > Customize > Site Skin and set your theme colour, box background, border colour, and headings colour. The vendor pages pick them up with no further work.

What The Theme Styles

The stylesheet covers five areas of MultiVendorX.

Area	What changes
Vendor registration page	The registration form box gets the theme’s box background, border colour, and global corner radius. The submit button takes the theme’s button colours and radius, including its hover state. Text, email, password, URL, and file inputs plus the textarea take the theme border colour and form radius. Section headings take the theme headings colour.
Store listing	The store container widens to fill the content area. Each vendor card gets the theme box background, border, and radius. The card grid becomes a flexible row. In MultiVendorX’s three-column store list (list-3) the cards are sized to roughly a third of the row. The store locator map filter bar takes the theme box background and border colour; the pagination takes the theme border colour only.
Single store page	The page content is constrained to 1170px and centred. The WooCommerce archive title is hidden, since the store already shows its own name. The store tab header gets the theme box background, border, and radius, and the active tab marker is painted in your theme colour. The banner area gets the theme box background.
Store reviews	Two small spacing fixes only. The reviews heading is set to 20px with a 20px gap below it, and the indent is removed from the review list.
Sidebar widgets	Sidebar widgets get a card treatment using the theme box background, border, and radius, and their lists lose default bullets and indent. These two rules target .widget.sidebar-box, not a MultiVendorX class, so they apply to every sidebar widget on the site, not only vendor ones. Inputs in the vendor quick-info form go full width. The vendor list widget gets row spacing, and the vendor product categories widget gets indented sub-lists.

Two of the MultiVendorX store designs get extra attention. The store design that carries the mvx-theme03 body class gets a bordered, rounded banner with a rounded image crop. The one that carries mvx-theme02 gets a padded, bordered banner area on screens 1024px and narrower; that border is drawn with your button border colour rather than the global border colour.

Rules that are not scoped to MultiVendorX

Three rules in the stylesheet use selectors with no MultiVendorX class in them, and the stylesheet loads on every front-end page while MultiVendorX is active. They therefore apply site-wide:

• div a and div a:hover set link and link hover colour. These match your Link Color and Link Hover settings, so in practice nothing changes, but a plugin or child theme that sets a different link colour with lower specificity will be overridden.
• .container and .container-sm are set to max-width: 100% from 640px up.
• The .widget.sidebar-box card and list rules described in the table above.

If that is a problem on your site, restrict the stylesheet to vendor pages with the filter shown in the developer section.

A known limitation on tablets

On screens 1024px wide and narrower, vendor cards in the store list render one per row, full width. The stylesheet contains a rule that would show two cards per row at that width, but a later rule in the same file overrides it. If you want a two-column tablet layout, add a rule to Appearance > Customize > Additional CSS with a width of your choosing and an !important flag, targeting #mvx-store-conatiner .mvx-store-locator-wrap ~ div.mvx-store-list-wrap .mvx-store-list.mvx-store-list-vendor.

Note the spelling of mvx-store-conatiner. That typo is in the MultiVendorX markup, not in the theme, so your CSS has to match it.

Settings

BuddyX Pro adds no Customizer settings for MultiVendorX. There is no MultiVendorX panel, section, or control anywhere in the theme, and no MultiVendorX widget area.

What controls the look of your marketplace is the theme’s general skin settings. These are the ones the MultiVendorX stylesheet reads.

Site Skin colours

Location: Appearance > Customize > Site Skin

Setting	What it affects on MultiVendorX pages	Default
Theme Color	The active store tab marker	Default: #ee4036
Box Background Color	Vendor cards, registration form box, store tab header, banner wrap, sidebar widgets	Default: #ffffff
Global Border Color	Vendor card borders, form input borders, tab header border, pagination, map filter bar	Default: #e4e3e3
Headings Color	Registration page section headings	Default: #003049

Each of these has a matching (Dark Mode) control in the same section, used when a visitor switches to dark mode.

Dark mode setting	Default
Theme Color (Dark Mode)	Default: #ff6b6b
Box Background Color (Dark Mode)	Default: #161616
Global Border Color (Dark Mode)	Default: #2a2a2a
Headings Color (Dark Mode)	Default: #f5f5f5

The MultiVendorX stylesheet has no dark mode rules of its own. It gets dark mode for free because it uses these variables rather than fixed colours.

Button colours

Location: Appearance > Customize > Site Skin

The registration form’s submit button uses your site button settings.

Setting	Default
Button Background Color	Default: #ee4036
Button Background Hover Color	Default: #f83939
Button Text Color	Default: #ffffff
Button Text Hover Color	Default: #ffffff
Button Border Color	Default: #ee4036
Button Border Hover Color	Default: #f83939

Corner radius

Location: Appearance > Customize > General > Site Layout

Setting	What it affects on MultiVendorX pages	Default
Global Border Radius	Vendor cards, registration form box, store tab header, sidebar widget cards	Default: 8px
Buttons Border Radius	The registration submit button	Default: 6px
Form Border Radius	Registration form inputs and textarea	Default: 6px

Link colours

Location: Appearance > Customize > Site Skin

Setting	Default
Link Color	Default: #003049
Link Hover	Default: #ee4036

Use Cases

A handmade goods marketplace

You run a marketplace for independent makers and you have already picked a warm brand colour in Site Skin. Activating MultiVendorX gives you a store directory that arrives in plugin default styling, which will not match your homepage. The theme stylesheet closes that gap: vendor cards pick up your box background and border colour, and the store tabs pick up your brand colour on the active tab. You do not configure anything.

A community site that adds a vendor section

You are running a BuddyX Pro community and you want members to be able to sell. Members already recognise your card styling from the activity stream and member directory. Because the MultiVendorX stylesheet uses the same box background and border variables as the rest of the theme, vendor cards in the store directory look like the cards members already know, rather than like a bolted-on plugin.

A marketplace with a dark mode audience

Your audience skews toward dark mode and you have set your dark palette in the (Dark Mode) controls. Vendor registration, the store directory, and single store pages all follow the toggle, because their colours come from the same variables the rest of the theme uses. This is the main practical benefit of the integration - without it, MultiVendorX pages stay light while the rest of the site goes dark.

A store with a curated directory layout

You want your store directory to feel like a designed grid rather than a plugin list. The three-up card sizing on MultiVendorX’s list-3 layout, the theme card borders, and the styled pagination give you that. If you also want two cards per row on tablets, add the Additional CSS override described above.

Troubleshooting

MultiVendorX pages have no theme styling

If you also run Tutor LMS, check your theme version first. On BuddyX Pro 5.0.x and earlier the MultiVendorX stylesheet was enqueued under the buddyx-tutor handle, which Tutor LMS had already taken, so on a site with both plugins it never loaded. Update to 5.1.0 or later. Without Tutor LMS active, the version is not the cause.

Otherwise:

1. Confirm MultiVendorX is activated, not just installed
2. View the page source and search for multivendorx.min.css
3. Clear any page cache and any CSS minification or combination cache
4. Check that no plugin or child theme is dequeuing the buddyx-multivendorx handle

Vendor cards are full width on my tablet

This is the known limitation described above. Two rules in the stylesheet target the same cards at 1024px, and the full-width one wins. Add an Additional CSS override if you want two columns.

The store page title appears twice

The theme hides the WooCommerce archive title on vendor store pages, because the store page already shows the vendor’s own store name. If you are seeing both, something else on the site is re-adding the archive title, or the product-vendor body class is missing from the page.

My colours changed everywhere, not just on vendor pages

That is expected. The MultiVendorX stylesheet does not have its own colours. It reads your site skin settings. Changing Box Background Color to restyle vendor cards will also change every other card on the site. If you want vendor pages to differ from the rest of the site, use Additional CSS scoped to MultiVendorX selectors rather than changing the global setting.

I want the old unstyled look back

Deregister the stylesheet in your child theme. The wp_deregister_style() call is the one that matters: on a normal page the file is only registered and then emitted as a preload link, so dequeuing alone does not stop it.

add_action( 'wp_enqueue_scripts', function () {
    wp_dequeue_style( 'buddyx-multivendorx' );
    wp_deregister_style( 'buddyx-multivendorx' );
}, 20 );

For Developers

Stylesheet handle

Item	Value
Handle	buddyx-multivendorx
Source	assets/css/src/multivendorx.css
Built file	assets/css/multivendorx.min.css
Registered in	inc/Styles/Component.php

The handle differs between the free and Pro themes. The free BuddyX theme enqueues the same file under the handle multivendorx. If you are writing a child theme or plugin that has to work with both, check for both handles.

Load condition

The stylesheet’s preload_callback is:

return class_exists( 'MVX' ) || function_exists( 'mvx_get_option' );

This is not scoped to store or vendor pages. The stylesheet is present on every front-end request while MultiVendorX is active. The entry has no global key, so on normal pages it is registered during wp_enqueue_scripts and then emitted in wp_head as a preload link that swaps to a stylesheet on load. On AMP pages preloading is off and the file is enqueued normally.

Filters

Filter	Where	What it does
buddyxpro_css_files	inc/Styles/Component.php	Filters the full CSS manifest, including the buddyx-multivendorx entry. Use it to change the file, dependencies, media, or load condition.
buddyxpro_preloading_styles_enabled	inc/Styles/Component.php	Controls whether stylesheets are preloaded or enqueued normally. Affects every entry in the manifest, not just this one.

Example - restrict the stylesheet to vendor pages only:

add_filter( 'buddyxpro_css_files', function ( $css_files ) {
    if ( isset( $css_files['buddyx-multivendorx'] ) ) {
        $css_files['buddyx-multivendorx']['preload_callback'] = function () {
            return ( class_exists( 'MVX' ) || function_exists( 'mvx_get_option' ) )
                && ( is_shop() || function_exists( 'mvx_is_store_page' ) && mvx_is_store_page() );
        };
    }
    return $css_files;
} );

Check the availability of any MultiVendorX conditional you use against the plugin version you ship with.

CSS variables the stylesheet consumes

No fixed colour values appear anywhere in multivendorx.css. Every colour and radius is one of these, written by inc/Tokens/Component.php from Customizer settings.

Variable	Source setting
--color-theme-primary	site_primary_color
--color-theme-white-box	box_background_color
--global-border-color	site_border_color
--global-title-color	headings_color
--color-link	site_links_color
--color-link-hover	site_links_focus_hover_color
--button-text-color	site_buttons_text_color
--button-background-color	site_buttons_background_color
--button-border-color	site_buttons_border_color
--button-text-hover-color	site_buttons_text_hover_color
--button-background-hover-color	site_buttons_background_hover_color
--button-border-hover-color	site_buttons_border_hover_color
--global-border-radius	site_global_border_radius
--button-border-radius	site_button_border_radius
--form-border-radius	site_form_border_radius

If you are overriding these for MultiVendorX only, redefine the variable inside a MultiVendorX scope rather than editing the stylesheet, so theme updates do not overwrite your work.

What the theme does not provide

Worth stating plainly, because it is what most integration questions turn out to be about:

• No template overrides. There is no mvx/ or multivendorx/ directory in the theme.
• No PHP compatibility layer. No hooks are added or removed for MultiVendorX.
• No Customizer section, panel, or control.
• No widget areas or sidebars.
• No JavaScript.

Anything in that list has to come from MultiVendorX itself, or from your own child theme.

Related Settings

• Color Scheme - Theme colour, box background, border colour
• Site Layout - Border radius settings
• Dark Mode - Dark palette controls
• WooCommerce Setup - Required base store configuration

---

Got a question? We’re a friendly team - happy to help.

• Visit our Documentation Portal
• Email us at support@wbcomdesigns.com