Skip to content
SpecCart Docs

Branding

The Branding tab controls how SpecCart looks to your customers. You can set your logo, choose fonts, upload trust badges, and customise colors across different areas of the plugin.

Section titled “Site Logo”

This logo appears in the header of your cart and checkout pages.

To set your logo:

  1. Click Select Logo to open the WordPress Media Library
  2. Choose an existing image or upload a new one
  3. Click Use this image

To change your logo, click Change Logo and repeat the process. To remove it entirely, click Remove.

Font Settings

Section titled “Font Settings”

SpecCart can use your theme’s fonts, load fonts from external sources like Google Fonts, or use fonts you upload directly.

Font Source Options

Section titled “Font Source Options”

Inherit from theme (default)

Section titled “Inherit from theme (default)”

SpecCart uses whatever font your WordPress theme provides. This is the simplest option and requires no additional setup.

External URL (e.g. Google Fonts)

Section titled “External URL (e.g. Google Fonts)”

Load fonts from an external stylesheet, such as Google Fonts. SpecCart automatically downloads the font files and serves them locally for GDPR compliance.

To use an external font:

  1. Select External URL
  2. Enter the Font Family Name (e.g. Poppins)
  3. Paste the Stylesheet URL (e.g. https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap)
  4. Click Download & Self-Host

SpecCart will download the font files and convert the CSS to reference local copies. Once complete, you’ll see a confirmation message showing how many files were downloaded.

Upload font files

Section titled “Upload font files”

Upload font files directly to WordPress and serve them from your server.

To upload fonts:

  1. Select Upload font files
  2. Enter a Font Family Name (e.g. CustomFont)
  3. Click Upload Font Files
  4. Select font files from your computer

Supported formats: WOFF2, WOFF, TTF, OTF. Upload all weights and styles you need (e.g. Regular 400, Medium 500, Bold 600).

To remove a font file, click the × icon on its tag.

Cart Trust Logos

Section titled “Cart Trust Logos”

Trust badges and security seals displayed in the cart sidebar to reassure customers during checkout.

To add trust logos:

  1. Click Add Logos
  2. Select one or more images from the Media Library (or upload new ones)
  3. Click Add images

To remove a logo, hover over it and click the red × button.

Examples: Norton Secured, SSL certificates, Trustpilot badges, “100% Satisfaction Guarantee” seals.

Cart Payment Logos

Section titled “Cart Payment Logos”

Payment method logos displayed below the checkout button to show which payment options you accept.

To add payment logos:

  1. Click Add Logos
  2. Select one or more images (e.g. Visa, Mastercard, PayPal, Apple Pay logos)
  3. Click Add images

To remove a logo, hover over it and click the red × button.

Template Settings

Section titled “Template Settings”

Allow theme template overrides

When enabled, your theme can override SpecCart’s cart and checkout templates by placing custom files in its woocommerce/ directory. When disabled, SpecCart always uses its built-in templates.

Global Palette

Section titled “Global Palette”

The global palette defines default colors used across all frontend areas of SpecCart. Any area without custom colors enabled will inherit these values.

The palette includes 8 color tokens:

  • Primary: Buttons, links, active states
  • Primary Hover: Button hover state
  • Accent: Secondary backgrounds, highlights
  • Accent Light: Subtle backgrounds, badges
  • Text: Main body text
  • Text Muted: Secondary text
  • Border: Borders and dividers
  • Background: Light background areas

To change a color, click on the color swatch and choose a new color using the color picker.

To reset all colors to the plugin defaults, click Reset to Defaults.

Per-Area Color Overrides

Section titled “Per-Area Color Overrides”

You can customize colors for specific areas of SpecCart independently. Each area can inherit the global palette or use its own custom colors.

Wizard / Configurator

Section titled “Wizard / Configurator”

The product page lens configurator wizard — the 5-step interface customers use to build their lens configuration.

Cart & Checkout

Section titled “Cart & Checkout”

Styling for the cart sidebar and checkout page where customers review and complete their purchase.

Standalone Page

Section titled “Standalone Page”

The standalone configurator page (if you use the [speccart_configurator] shortcode on a dedicated page).

Secure Upload

Section titled “Secure Upload”

The customer prescription upload page where customers can upload prescriptions after placing an order.

How to customize an area

Section titled “How to customize an area”
  1. Find the area you want to customize
  2. Toggle Custom colors to ON
  3. Adjust the 8 color values using the color pickers

When custom colors are enabled for an area, it uses its own palette instead of the global palette. Each area shows a colored dot next to its title reflecting its effective primary color.

To return an area to using the global palette, toggle Custom colors to OFF. The custom palette you set is preserved, so you can re-enable it later without losing your work.

Saving Changes

Section titled “Saving Changes”

All changes on the Branding tab are saved automatically when you click Save Changes in the header bar at the top of the Settings page. The plugin will persist:

  • Site logo selection
  • Font settings (including downloaded or uploaded font files)
  • Trust and payment logos
  • Template override preference
  • Global palette
  • Per-area color overrides and enabled/disabled states