How to Customize Fields in a WooCommerce Request a Quote Form

The Customize Layout modal in WebToffee’s Request a Quote plugin gives you full control over what your customers see when they submit a quote request. You can manage form fields, reorder them, add custom fields, configure the shipping section, and style the submit button all without touching any code.

To open the modal, go to Quotes > Quote Settings > Quote settings tab in your WordPress admin and click Customize layout.

The Request quote form tab is split into two panes:

• Left pane (Preview pane) — A live preview of the form as your customers will see it.
• Right pane (Editor pane)— The configuration panel where you manage fields, sections, and button settings.

Any changes you make in the right pane are instantly reflected in the left preview. Click Save changes at the bottom right to apply them, or Cancel to discard.

The Page title field at the top of the right pane sets the heading displayed at the top of the quote page. The default value is Request quote. You can update this to match your store’s terminology, such as Price Request or Quotation.

The Product table section controls which fields are displayed in the product table on the request quote form. Each row represents a field and can be toggled on or off independently.

The following fields are available:

Field	Description
Product image	Thumbnail image of the quoted product
Product name	Name of the product, with the SKU displayed below it
SKU	Stock keeping unit identifier shown as a sub-line under the product name
Price	Listed price of the product
Preferred price	The customer’s proposed price (displays a dash if not entered)
Quantity	Number of units requested
Total price	Line total calculated as price × quantity
Subtotal	Sum of all line totals before tax
Total tax	Tax amount applied to the order
Total	Final order total including tax

Two additional toggles control action buttons that appear below the product table:

• Clear list — Shows or hides the Clear List button, which lets customers remove all products from their quote list in one click.
• Update list — Shows or hides the Update List button, which lets customers refresh quantities before submitting.

Both buttons are enabled by default.

To reorder fields in the product table, drag them using the handle (⠿) to the left of each row.

The right pane lists all available form fields. Each field row has three controls:

• Drag handle (the six-dot icon on the left) — Drag to reorder fields. The order here determines the order in which fields appear on the form.
• Toggle — Enable or disable the field. Disabled fields are hidden from the form but not deleted.
• Expand arrow — Click to reveal additional configuration options for that field (such as label editing, where applicable).

The following fields are available by default:

Field	Description
First name	Customer’s first name
City	Dropdown or radio selection for city
Business email	Customer’s official business email address
Business phone number	Customer’s business contact number
Tell about your business	A textarea for a brief business introduction
Ask for quote again	A checkbox allowing customers to request another quote
Preferred payment method	Radio buttons for payment options (Paypal, Stripe, Direct transfer)
Upload sample	A file upload field for customers to attach a sample
Requested date	A date picker field
Expiry Period	A field to capture a quote validity/expiry period

Note: Name, Email, Phone, and Message are core fields that appear at the top of the form. These are required fields and are always present.

To change the order in which fields appear on the form, click and hold the drag handle (⠿) to the left of any field row and drag it to the desired position. The live preview on the left updates immediately.

If the default fields do not cover your requirements, you can add custom fields using the + Add new field button at the bottom of the field list.

Clicking + Add new field expands an inline form with two inputs:

• Field type — A dropdown with the following input types:

Field Type	Use Case
Text	Single-line text input
Textarea	Multi-line text input
Email	Email address input with format validation
Phone	Phone number input
URL	Web address input
Checkbox	Single checkbox (yes/no)
Multi Checkbox	Multiple checkboxes for selecting several options
Radio Button	Single-select from multiple options
Dropdown	Select menu for a single choice
File Upload	Allows customers to upload a file
Date	Date picker
Time	Time picker

• Field label — The label displayed to customers on the form. Enter a descriptive name in the Value input box.

Once you have selected the field type and entered a label, click Add field. The new field will appear in the field list and in the live preview. To discard, click Cancel.

Below the custom field area, there is a Shipping section toggle. When enabled, a shipping address block is added to the quote form, allowing customers to provide a delivery address along with their quote request.

The shipping section is disabled by default. Use the toggle next to Shipping section to turn it on or off.

The Request a quote button section at the bottom of the right pane lets you control the label, display style, and colors of the form’s submit button.

Under ‘REQUEST A QUOTE’ BUTTON LABEL, enter the text you want displayed on the submit button. By default, this is set to Request a Proforma. You can change this to any text that fits your store’s tone, such as Get a Quote, Request Pricing, or Submit Quote Request.

Choose how the button is rendered:

• Button — Displays a styled clickable button (default).
• Link — Displays the action as a plain text hyperlink instead.

You can also check Match button to store’s theme to automatically inherit your WooCommerce theme’s button styles, which is useful if you want the quote button to look consistent with your Add to Cart button.

If you prefer to define custom colors rather than matching the store theme, use the Button color section. You can configure six color values:

Property	Default	Description
Text	#383838	Button label color in normal state
Text (On hover)	#ffffff	Button label color when hovered
Border	#828282	Button border color in normal state
Border (On hover)	#454545	Button border color when hovered
Background	#d6d6d6	Button background in normal state
Background (On hover)	#6b6b6b	Button background when hovered

Click any color swatch to open a color picker and select a custom color, or type the hex code directly into the input field.

Once you have configured the form fields, custom fields, shipping section, and button settings to your preference, click Save changes at the bottom right of the modal. A confirmation message will appear once the settings are saved.

To revert without saving, click Cancel.