How To Change The Look & Feel Of Your Order Form

Want your order form to match your store’s design? The WooCommerce Wholesale Order Form builder includes style controls for every element, covering spacing, button colours, and whether field labels appear. This article walks you through each option.

Prerequisites

• WooCommerce Wholesale Order Form installed and activated
• At least one order form already created. If you haven’t done this yet, see the WooCommerce Wholesale Order Form Getting Started Guide.

Opening the Element Settings Panel

Style and display options are available for each individual element in your order form. To open them:

1. Go to Wholesale → Order Forms in your WordPress admin.
2. Click the order form you want to edit to open it in the builder.
3. Hover over any element in the form. A gear icon will appear in the top-right corner of that element.
4. Click the gear icon to open the settings panel in the right-hand sidebar.

The sidebar shows two sections: Styles (spacing and visual adjustments) and Options (element-specific settings). Click a section heading to expand it. The sections below explain what each one contains.

Adjusting Element Spacing

Use the Styles section to control the space around any element. Every element supports margin and padding values, so you can fine-tune the layout to match your store’s design.

1. Click the gear icon on the element you want to adjust.
2. Expand the Styles section in the sidebar.
3. Enter values for Margin (space outside the element) or Padding (space inside the element). Values are in pixels by default. Use the unit selector to switch to %, em, or rem if needed.
4. The four sides are linked by default, so a value you enter applies to the top, right, bottom, and left at once. Click the link icon to unlink the sides, then enter each side independently.
5. Click Save Draft (or Update if the form is already published) in the top toolbar to save the form.

Changing Button Colors

Button elements, such as the Add to Cart button and the Search button, have colour controls in their Styles section. You can set separate colours for the button background and the button text.

1. Click the gear icon on the button element you want to change.
2. Expand the Styles section in the sidebar.
3. Click the colour swatch next to Button Color to open the colour picker and choose your background colour.
4. Click the colour swatch next to Button Text Color to set the label colour.
5. Click Save Draft (or Update if the form is already published) in the top toolbar to save the form.

Showing or Hiding Product Meta Field Labels

If your order form includes a Product Meta column, used to display custom product data such as weight, dimensions, or other attributes stored in product meta, you can choose whether the field label appears alongside each value. This is useful when you want a cleaner layout that shows only the values, without the field names displayed next to them.

1. Click the gear icon on your Product Meta column to open its settings.
2. Expand the Options section in the sidebar.
3. Locate the Show Field Labels checkbox. By default this is checked, meaning labels are visible next to each value.
4. Uncheck Show Field Labels to hide the labels, leaving only the values visible in the order form.
5. Click Save Draft (or Update if the form is already published) in the top toolbar to save the form.

Note: Meta keys that begin with an underscore (e.g. _my_field) are private in WordPress and will not display in the order form, regardless of this setting.

Troubleshooting

My spacing changes aren’t showing on the frontend

Make sure you saved the form with Save Draft or Update in the top toolbar after entering your spacing values. If you saved but still don’t see the change, try clearing your browser cache and any caching plugins (such as WP Rocket or W3 Total Cache), then reload the page.

The Product Meta column isn’t showing any values

Check the meta keys you’ve added in the Product Meta table under the Options section. The key must match exactly what’s stored in the product’s custom fields, including case sensitivity. Also confirm the meta key doesn’t start with an underscore, as private meta fields are excluded from display.

The Show Field Labels checkbox isn’t saving

This option requires WooCommerce Wholesale Order Form version 3.0.9 or later. Check your plugin version under Plugins → Installed Plugins and update if needed.

Frequently Asked Questions

Can I hide labels for some meta fields but show them for others?
No. The Show Field Labels setting applies to all meta fields in that column at once. If you need mixed display, consider adding two separate Product Meta columns: one with labels shown and one with labels hidden, each configured with different meta keys.

Can I change the font size or colour of element text?
The built-in style controls currently cover spacing and button colours. For text styling, you can add custom CSS through Appearance → Customize → Additional CSS and target the order form’s CSS classes.

Need Help?

If you have a question or run into any issues, we’re here to help.

• Premium users: Open a support ticket
• Free users: Visit our community forum