Sign In
My Account

Styling & Branding Overview

View Categories

2 min read

Applies to: Core, Advanced, Enterprise

The Quote & Cut Styles page controls the appearance of the customer quote form and some related cart/order display elements.

Use this section to match Quote & Cut to your website branding without editing plugin files.

You can find the Styles page from:

WordPress Dashboard → Quote & Cut → Styles

What you can customise #

The Styles page includes settings for:

  • Frontend form layout.
  • Multi-part job image for cart and order screens.
  • Plugin colour palette.
  • Part preview calculation effects.
  • Typography.
  • Live palette and typography preview.
  • Resetting styles back to defaults.

Built-in styling vs custom CSS #

Most users should start with the built-in style controls.

These let you change:

  • Layout.
  • Colours.
  • Fonts.
  • Preview effects.
  • Cart/order image.

If you need more control, you can also add your own custom CSS using the Quote & Cut frontend selectors.

Custom CSS is covered in the Advanced Custom CSS article.

Where styles apply #

The style settings mainly affect the Quote & Cut frontend form added with:

[quoteandcut]

They can also affect related Quote & Cut display elements in WooCommerce cart, checkout, and order screens.

Save Styles #

The Styles page includes Save Styles buttons after the main settings sections.

After making changes, click Save Styles before checking the form on the frontend.

Live preview #

The Styles page includes a live palette and typography preview.

Use this preview to check the basic look of your selected colours and fonts before viewing the frontend quote form.

Recommended setup order #

Configure styling in this order:

  1. Choose a form layout.
  2. Set the main brand colours.
  3. Set success and danger colours.
  4. Choose a preview calculation effect.
  5. Choose typography.
  6. Set the multi-part cart/order image.
  7. Test the quote form on desktop and mobile.
  8. Add custom CSS only if needed.

Important note #

Do not edit Quote & Cut plugin files directly.

Plugin file changes may be lost when the plugin is updated.

Use the built-in Styles page, your theme’s Additional CSS area, a child theme, or a safe custom CSS plugin instead.

Continue to: Choosing a Form Layout.