Sign In
My Account

Advanced Custom CSS

View Categories

6 min read

Applies to: Core, Advanced, Enterprise

Quote & Cut includes built-in style controls for most branding needs.

If you need more control, you can add your own CSS using the frontend selectors built into the form.

This is useful for users, agencies, or developers who want to make more detailed visual changes.

Before using custom CSS #

Start with the built-in Styles page first.

Use custom CSS only when you need changes that are not available from:

Quote & Cut → Styles

Do not edit Quote & Cut plugin files directly.

Plugin file changes may be lost during updates.

Where to add custom CSS #

You can add custom CSS in several safe places:

  • Appearance → Customize → Additional CSS
  • Your child theme stylesheet.
  • Your page builder’s custom CSS area.
  • A trusted custom CSS plugin.
  • A code snippets plugin that supports frontend CSS.

For most users, Appearance → Customize → Additional CSS is the easiest option.

Main form wrapper #

The main Quote & Cut form wrapper is:

#quoteandcut-container

Use this wrapper at the start of your selectors to avoid affecting other parts of your website.

Example:

#quoteandcut-container {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

Layout-specific selectors #

The selected layout adds a class to the main form wrapper.

Use these selectors to target a specific layout:

#quoteandcut-container.quoteandcut-form-style-classic
#quoteandcut-container.quoteandcut-form-style-studio
#quoteandcut-container.quoteandcut-form-style-workbench

Example:

#quoteandcut-container.quoteandcut-form-style-studio {
  padding-top: 20px;
}

Common form selectors #

Useful frontend selectors include:

#quoteandcut-bulk-upload-area
#quoteandcut-job-list
.job-item
.job-inputs
.form-group
.quoteandcut-buttons
#quoteandcut-add-job
#quoteandcut-calculate
#quoteandcut-add-to-cart

Upload area #

Target the bulk upload area with:

#quoteandcut-container #quoteandcut-bulk-upload-area

Example:

#quoteandcut-container #quoteandcut-bulk-upload-area {
  border-style: solid;
  border-radius: 18px;
}

Part cards #

Studio and Workbench layouts use part cards.

Useful selectors include:

#quoteandcut-container .quoteandcut-part-card
#quoteandcut-container .quoteandcut-part-card__header
#quoteandcut-container .quoteandcut-part-card__body
#quoteandcut-container .quoteandcut-part-row

Example:

#quoteandcut-container .quoteandcut-part-card {
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

Material and quantity fields #

Useful selectors include:

#quoteandcut-container .quoteandcut-material-select-wrapper
#quoteandcut-container select[name="material[]"]
#quoteandcut-container input[name="quantity[]"]
#quoteandcut-container .quoteandcut-apply-material-to-all

Example:

#quoteandcut-container select[name="material[]"],
#quoteandcut-container input[name="quantity[]"] {
  min-height: 46px;
}

Buttons #

Useful selectors include:

#quoteandcut-container #quoteandcut-calculate
#quoteandcut-container #quoteandcut-add-job
#quoteandcut-container #quoteandcut-add-to-cart
#quoteandcut-container .quoteandcut-remove-job
#quoteandcut-container .quoteandcut-apply-material-to-all

Example:

#quoteandcut-container #quoteandcut-calculate {
  font-weight: 700;
  letter-spacing: 0.02em;
}

Part preview selectors #

Useful selectors include:

#quoteandcut-container .dxf-preview-wrapper
#quoteandcut-container .dxf-preview-canvas
#quoteandcut-container .quoteandcut-preview-actions
#quoteandcut-container .quoteandcut-preview-action
#quoteandcut-container .quoteandcut-part-preview-frame

Example:

#quoteandcut-container .dxf-preview-wrapper {
  border-radius: 16px;
}

Live summary selectors #

Studio and Workbench use a live summary panel.

Useful selectors include:

#quoteandcut-container .quoteandcut-live-summary
#quoteandcut-container .quoteandcut-live-summary__header
#quoteandcut-container .quoteandcut-live-summary__stats
#quoteandcut-container .quoteandcut-live-summary__stat
#quoteandcut-container .quoteandcut-live-summary__quote
#quoteandcut-container #quoteandcut-summary-total

Example:

#quoteandcut-container .quoteandcut-live-summary {
  border-radius: 20px;
}

Quote result selectors #

Useful selectors include:

#quoteandcut-container #quoteandcut-result
#quoteandcut-container #quoteandcut-result-extra
#quoteandcut-container .quoteandcut-result-panel
#quoteandcut-container .quoteandcut-result-summary-card
#quoteandcut-container .quoteandcut-price-display
#quoteandcut-container .quoteandcut-result-actions

Example:

#quoteandcut-container .quoteandcut-price-display {
  font-size: 2rem;
}

Progress selectors #

Useful selectors include:

#quoteandcut-container #quoteandcut-progress-container
#quoteandcut-container #quoteandcut-progress-title
#quoteandcut-container #quoteandcut-progress-status
#quoteandcut-container #quoteandcut-progress-bar-wrapper
#quoteandcut-container #quoteandcut-progress-bar

Example:

#quoteandcut-container #quoteandcut-progress-bar-wrapper {
  height: 12px;
}

Cart selectors #

Quote & Cut cart display elements may use selectors such as:

.quoteandcut-cart-thumbnail
.quoteandcut-cart-job-meta
.quoteandcut-cart-job-meta__summary
.quoteandcut-cart-job-meta__parts
.quoteandcut-cart-part-card
.quoteandcut-cart-part-card__thumb
.quoteandcut-cart-part-card__title

Example:

.quoteandcut-cart-job-meta {
  font-size: 0.95rem;
}

CSS variables #

Quote & Cut exposes CSS variables based on your saved Styles settings.

Useful variables include:

--quoteandcut-bg-color
--quoteandcut-card-bg
--quoteandcut-text-primary
--quoteandcut-text-secondary
--quoteandcut-border-color
--quoteandcut-accent-primary
--quoteandcut-accent-primary-hover
--quoteandcut-accent-secondary
--quoteandcut-accent-secondary-hover
--quoteandcut-danger-color
--quoteandcut-danger-hover
--quoteandcut-success-color
--quoteandcut-success-hover
--quoteandcut-preview-effect-colour

You can use these variables in your own CSS.

Example:

#quoteandcut-container .quoteandcut-part-card {
  border-color: var(--quoteandcut-border-color);
  background: var(--quoteandcut-card-bg);
}

Typography variables #

Quote & Cut also uses typography variables when fonts are selected.

Useful variables include:

--quoteandcut-font-body
--quoteandcut-font-heading
--quoteandcut-font-label
--quoteandcut-font-input
--quoteandcut-font-button
--quoteandcut-font-price

Example:

#quoteandcut-container .quoteandcut-price-display {
  font-family: var(--quoteandcut-font-price);
}

Targeting one layout only #

If you only want CSS to affect Studio, include the Studio layout class.

Example:

#quoteandcut-container.quoteandcut-form-style-studio .quoteandcut-live-summary {
  position: sticky;
  top: 24px;
}

If you only want CSS to affect Workbench:

#quoteandcut-container.quoteandcut-form-style-workbench .quoteandcut-part-card {
  border-radius: 10px;
}

If you only want CSS to affect Classic:

#quoteandcut-container.quoteandcut-form-style-classic .job-item {
  padding: 24px;
}

Use browser inspector tools #

To find the selector for a specific part of the form:

  1. Open the quote form on the frontend.
  2. Right-click the part you want to customise.
  3. Click Inspect.
  4. Look for the ID or class on that element.
  5. Start your CSS selector with #quoteandcut-container.
  6. Add the CSS in your safe custom CSS location.
  7. Test on desktop and mobile.

Avoid over-specific CSS #

Use the shortest selector that works.

Good:

#quoteandcut-container .quoteandcut-part-card {
  border-radius: 18px;
}

Avoid unnecessarily long selectors unless you need them.

Avoid using !important #

Only use !important as a last resort.

If your CSS does not apply, first try making the selector more specific.

Example:

#quoteandcut-container.quoteandcut-form-style-studio .quoteandcut-part-card {
  border-radius: 18px;
}

Mobile CSS example #

You can adjust styling on smaller screens with a media query.

Example:

@media (max-width: 768px) {
  #quoteandcut-container .quoteandcut-part-card {
    border-radius: 12px;
  }

  #quoteandcut-container .quoteandcut-buttons {
    gap: 10px;
  }
}

Resetting styles and custom CSS #

The Quote & Cut reset button only resets the plugin’s saved style settings.

It does not remove custom CSS added to your theme, Additional CSS area, page builder, or custom CSS plugin.

If the form still looks customised after resetting Quote & Cut styles, check your custom CSS locations.

If custom CSS causes a problem #

If the form layout breaks:

  1. Remove the most recent CSS change.
  2. Clear any site cache.
  3. Check the form again.
  4. Test on mobile and desktop.
  5. Re-add the CSS in smaller pieces.

Continue to: Resetting Styles to Defaults.