Book a Demo
Sign In
My Account

Quote & Cut Form Styling

Give Customers a Seamless Branded Quote Experience

Choose the frontend layout, colour palette, calculation effects and typography from one dedicated Styles page without editing plugin templates or writing custom CSS.

  • Choose from Classic, Studio and Workbench layouts
  • Apply your website colours across the quote interface
  • Control typography and part-preview calculation effects
View Pricing
Book a Demo

One Styles Page

Complete Control Over the Frontend Quote Form

The Styles page groups every supported visual control into clear sections. Update one area at a time, save the changes and review the result through the built-in preview before testing the live customer form.

Full Styling Walkthrough

Watch the Complete Quote Form Styling Process

Follow the complete styling workflow from choosing a frontend layout and multi-part job image to configuring the colour palette, calculation effect, typography and final frontend test.

One Page. Every Supported Visual Setting.

The Styles page keeps the layout, WooCommerce display image, colours, preview effects and typography together in one organised WordPress screen.

View Pricing
Book a Demo
Quote Form Styling: From Layout to Frontend Test

See how each backend setting changes the customer-facing quotation experience, then verify the final design with a real DXF upload and price calculation.

Step 01

Open the Quote & Cut Styles Page

From the WordPress dashboard, open Quote & Cut and select Styles. This dedicated page controls the frontend layout, WooCommerce multi-part image, colour palette, preview effects and typography.

  • Open Quote & Cut → Styles
  • Review the five main settings sections
  • Use the separate Save Styles button after each section

Step 02

Choose the Frontend Form Style

Frontend Form Style changes the overall quote-building layout. Classic uses the original stacked form, Studio uses a two-column builder with the live summary and pricing pinned on the right, and Workbench uses an accordion builder with the summary and actions below the parts list.

  • Classic: original stacked form layout
  • Studio: two-column builder with pinned summary and pricing
  • Workbench: accordion builder with actions below the parts list

Step 03

Set the Multi-Part Job Image

Cart & Order Display controls the WooCommerce product image used when a Quote & Cut job contains multiple parts. Select an image from the WordPress Media Library or restore the bundled default image.

  • Open the WordPress Media Library from Select image
  • Choose a recognisable image for multi-part jobs
  • Use Reset to default to restore the bundled plugin image

Step 04

Build the Plugin Colour Palette

Use the Plugin Colour Palette to match the quote interface to your website. The available controls cover primary and secondary accents, the main background, card background, primary and secondary text, borders, success states, danger states and the preview-effect colour.

  • Set Primary Accent and Secondary Accent colours
  • Control backgrounds, text colours, borders and status states
  • Leave Preview Effect Colour blank to use Primary Accent

Step 05

Select the Part Preview Calculation Effect

Part Preview Effects controls the animation displayed over each component while Quote & Cut is calculating the price. Choose the effect that best suits the style of the website, or switch the animation off completely.

  • Choose Off, Scan Sweep or Pulse Glow
  • Use Blueprint Grid for a CAD-style calculation state
  • Use Corner Brackets for a scanner-style frame effect

Step 06

Configure Typography for Every Interface Area

Typography can be assigned independently to the main types of content used across the quote form. Each field can use a selected font or remain on Default so the active form style uses its original plugin font.

  • Set fonts for body text, headings and helper copy
  • Control inputs, selects, buttons and actions separately
  • Give prices and totals their own high-emphasis font

Step 07

Preview, Save and Test the Styled Form

The Live palette & typography preview updates as colours and fonts change. Save each section, refresh the frontend quote page and complete a real DXF test to check selected controls, calculation effects, prices and status messages.

  • Review colours, fonts, fields, buttons, prices and status pills
  • Test the active layout and calculation effect on the frontend
  • Use Reset to Default Style to restore the original plugin settings

The Visual Difference

Turn a Functional Quote Form Into a Branded Customer Experience

Quote & Cut keeps the quotation workflow intact while giving the interface a layout, palette and typography that feel consistent with the rest of the website.

Default Presentation

  • Plugin colours may not match the website palette
  • Default layout may not suit the surrounding page design
  • Typography can feel disconnected from the main brand
  • Calculation states use the standard plugin appearance
  • Multi-part orders use the bundled default image

Styled With Quote & Cut

  • Classic, Studio or Workbench layout selected for the site
  • Brand colours applied across buttons, cards, text and states
  • Fonts assigned to each major interface area
  • Calculation effect chosen to match the desired experience
  • Custom WooCommerce image used for multi-part jobs

Make the Quote Form Part of Your Brand

Ready to Style Quote & Cut Around Your Website?

Install Quote & Cut, choose the frontend layout and apply your own colours, typography and calculation effect through the built-in Styles page.

  • Three complete frontend form layouts
  • Built-in colour, typography and preview-effect controls
  • No plugin-template editing required
View Pricing
Book a Demo