Styling & Customisation

The coming soon block ships with a clean default look — centred layout, purple countdown boxes, and a simple signup form. If that doesn’t match your brand, every element is styled with plain CSS classes you can override. This article lists those classes and shows how to restyle them safely.

No settings are involved here — customisation is done with CSS. If you’re not comfortable editing CSS, the defaults are designed to look fine on most themes.

Where the styles come from

All default styling lives in the plugin’s css/sscs-styles.css, enqueued (only on coming soon product pages) under the handle sscs-styles. The brand colour throughout is purple #8035be with a lighter hover #9045ce.

You don’t edit that file directly — it gets overwritten on update. Instead, add your own CSS after it (see Where to put your CSS).

The CSS classes you can target

The block markup is wrapped in .sscs-coming-soon. Inside it:

Element	Selector	Default styling
Outer wrapper	.sscs-coming-soon	Light grey background, centred text, padding.
Countdown row	.sscs-countdown-timer	Flex row, centred.
A countdown box	.countdown-box (#days, #hours, #minutes, #seconds)	Purple box, rounded, fixed width.
The number in a box	.countdown-box span	Large bold number.
The label under it	.countdown-box small	Small “Days / Hours / Mins / Secs” label.
Offer description	.sscs-offer-description and .sscs-coming-soon h2 / h3 / h4 / p	Heading + body typography (see below).
“Enter your email” prompt	#sscs-enter-email	The line above the form (also reused for the post-signup message).
Signup form	#sscs-signup-form	The form element.
Email field	#sscs-email	The email input.
Buttons (LET ME IN, Copy Link)	.sscs-coming-soon button	Purple button, rounded, with a hover state.
Share buttons row	#sscs-share-buttons	Hidden until signup; uses Dashicons icons via a:before.

Styling the offer description

The Offer Description product field accepts HTML, and the stylesheet themes the common heading tags for you:

• <h2> → small dark heading (16px)
• <h3> → the large purple headline (24px, bold) — this is the eye-catching one
• <h4> → small grey subheading (14px)
• <p> → small grey body text

So to get the intended look, structure your Offer Description with those tags, e.g.:

<h2>Launching soon</h2>
<h3>The Widget 3000</h3>
<h4>Be first in line</h4>

Where to put your CSS

Easiest (no code): go to Appearance → Customize → Additional CSS and paste your overrides there. This CSS loads after the plugin’s, so it wins.

For developers (child theme): enqueue a stylesheet that depends on the plugin handle so it always loads afterwards:

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'my-sscs-overrides',
        get_stylesheet_directory_uri() . '/sscs-overrides.css',
        array( 'sscs-styles' ), // load after the plugin's CSS
        '1.0'
    );
}, 20 );

Examples

Change the brand colour (swap the purple for your own):

.sscs-coming-soon button,
.countdown-box {
    background-color: #c0392b; /* your brand colour */
}
.sscs-coming-soon button:hover {
    background-color: #e74c3c; /* hover shade */
}
.sscs-coming-soon h3 {
    color: #c0392b;
}

Make the countdown boxes bigger:

.countdown-box {
    width: 110px;
    padding: 14px;
}
.countdown-box span {
    font-size: 2.6em;
}

Target only coming soon pages. The plugin adds a body class to every coming soon product page, so you can scope site-wide rules to just these pages:

.scss-coming-soon-product .some-theme-element { display: none; }

Note the spelling: the body class is scss-coming-soon-product — that’s scss, not sscs. It’s an inconsistency in the codebase, but it’s the actual class name, so use it exactly as written.

Known quirks

• Dead email-field rule. The stylesheet contains a .sscs-signup-form input[type="email"] rule intended to make the email field full-width, but the form uses an id (#sscs-signup-form), not a class, so that rule never applies. If you want a full-width email field, target #sscs-email directly:

css #sscs-email { width: 100%; padding: 10px; margin-bottom: 10px; }

• Share-button icons rely on WordPress Dashicons (enqueued by the plugin). Their colour/size is controlled via the #sscs-share-buttons a:before rules.

Related

• Developer Hooks & Reference — the markup contract behind these classes.
• Architecture — how the block is rendered (Developers).