How to Style the WC Vendors Signup Form

If you’re using the WC Vendors Signup form and want to make it match your site’s branding or simply look more polished, you can easily do so using custom CSS.

In this guide, we’ll show you how to style your vendor registration form, including changing fonts, colors, button styles, and form layout, all without touching any plugin core files.

Where to Add Custom CSS

You can add your custom CSS in one of the following ways:

1. Through the WordPress Customizer (Recommended)

• Navigate to Appearance → Customize → Additional CSS in your dashboard.
• Paste in the code and click Publish to see your changes instantly.

2. In a Child Theme

• If you’re using a child theme, open the style.css file.
• Add the CSS snippet there to ensures your customizations remain intact even after theme updates.

3. Using a Custom CSS Plugin

• Plugins such as WPCode Lite allow you to safely insert snippets without editing theme files.
• Just paste the code into your preferred code snippet plugin and save.

Custom CSS for the WC Vendors Signup Form

Here’s an example CSS snippet that will give your WC Vendors registration form a clean, modern look with a two-column layout and styled input fields:

How The Vendor Signup Form Looks After Custom Styling

With this custom CSS applied, your vendor registration form will look cleaner, more modern, and easier to use. Here’s exactly what these changes will do:

• Split the form into two columns for better readability on desktop.
• Make labels and fields cleaner and more consistent using Verdana font and soft background colors.
• Style the submit button with a professional green color scheme that changes slightly when hovered.
• Stay mobile-friendly, reverting to a single-column layout on smaller screens.

More Ways to Customize Your Vendor Signup Form

• Change the color codes (#00008B, #012b09, etc.) to match your brand’s unique color palette.
• Replace the font family (e.g., Verdana) with your own brand font to maintain consistent typography across your site.
• Adjust the layout spacing by tweaking the column-gap, margin, or font-size values to create a more compact or spacious form design.
• Add your logo or a custom vendor signup banner above the form using an Image block in the WordPress editor to make the page visually engaging.
• Include custom text with a Text block to introduce your vendor program. You can highlight your brand story, outline the signup process, or showcase key benefits of joining your marketplace.
• Use headings or separators to structure the page content and improve readability, especially if you want to share additional vendor information or FAQs.

Before and After Preview

To help you visualise the changes, here’s how the WC Vendors Signup Form looks before and after applying the custom CSS styling:

By applying these CSS tweaks, your WC Vendors Signup Form will not only look more professional but also communicate your brand’s values and make a strong first impression on potential vendors.