The wrapper and element classes Coupon Creator outputs in the shortcode view and the print view, plus where to add your own CSS.
Most classes are emitted in two forms — an underscore version (cctor_coupon) and a hyphen version (cctor-coupon) — so you can target either convention. Container elements also carry per-coupon ID classes.
The Modern Ticket and the Classic template emit different markup. Check which
Coupon Type a coupon uses before writing a selector for it.
Shortcode view — Modern Ticket #
The ticket is driven by CSS custom properties set on the outer container, so most
recoloring is a matter of overriding a property rather than restyling an element.
| Class | Element |
|---|---|
#coupon_creator_{id} |
Outer container (ID) |
.coupon_creator_{id}, .coupon-creator-{id} |
Outer container (per-coupon) |
.type-cctor_coupon, .cctor_coupon_container, .cctor-coupon-container |
Outer container |
.cctor-ticket |
Outer container — marks this as the ticket template and carries the custom properties |
{category-slug} |
Each assigned category adds its term slug as a class |
.cctor_alignnone / .cctor_alignleft / .cctor_alignright |
Alignment (hyphen forms also exist) |
.cctor-ticket-shadow |
Drop-shadow wrapper (the shadow lives here, not on the card, because the notches are masked) |
.cctor-ticket-card |
Rounded card; intentionally has no background so the notches stay transparent |
.cctor-ticket-head |
Accent panel holding the business name and deal |
.cctor-ticket-eyebrow |
Business name line |
.cctor-deal |
Deal heading (h3) |
.cctor-ticket-body |
White lower panel; its dashed top border is the perforation |
.cctor-terms |
Terms block |
.cctor-ticket-foot |
Expiration + print-link row |
.cctor_expiration.core |
Expiration line |
.cctor_opencoupon, .cctor-opencoupon |
"Click to Open in Print View" wrapper |
.print-link |
The link itself |
Custom properties #
| Property | Controls | Set from |
|---|---|---|
--cc-accent |
Head panel background | The coupon's deal background color |
--cc-accent-ink |
Text on the head panel | Computed for contrast; the coupon's deal font color overrides it |
--cc-accent-readable |
Print-link color on white | The accent, darkened if needed to stay readable |
--cc-ink, --cc-muted |
Body text | Fixed |
--cc-surface |
Card background | Fixed |
--cc-line, --cc-line-strong |
Hairline rule, perforation dashes | Fixed |
--cc-radius, --cc-w, --cc-pad, --cc-notch |
Corner radius, width, padding, notch size | Fixed |
Override them on the container rather than restyling the parts:
.cctor-ticket { --cc-w: 400px; --cc-radius: 4px; }
Shortcode view — Classic text coupon #
| Class | Element |
|---|---|
#coupon_creator_{id} |
Outer container (ID) |
.coupon_creator_{id}, .coupon-creator-{id} |
Outer container (per-coupon) |
.type-cctor_coupon |
Outer container |
.cctor_coupon_container |
Outer container |
.coupon-border |
Outer container |
{category-slug} |
Each assigned category adds its term slug as a class |
.cctor_alignnone / .cctor_alignleft / .cctor_alignright |
Alignment (hyphen forms also exist) |
.cctor_wrap_link |
Link wrapping the whole coupon (when print link is enabled) |
.cctor_coupon, .cctor-coupon |
Inner coupon |
.cctor_coupon_content, .cctor-coupon-content |
Inner content (carries the inline inner-border color) |
.cctor-deal |
Deal heading (h3) |
.cctor-terms |
Terms block |
.cctor_expiration.core |
Expiration line |
.cctor_opencoupon, .cctor-opencoupon |
"Click to Open in Print View" wrapper |
.print-link |
The link itself |
Shortcode view — image coupon #
When a coupon uses the Image template, the outer container also gets .cctor-image, and the body is:
| Class | Element |
|---|---|
.coupon_link |
Link around the image |
.cctor_coupon_image |
The <img> |
Print view — text coupon #
The Modern Ticket keeps its own classes in the print view and adds .cctor-ticket-print
to the outer container. The table below covers the Classic template.
| Class | Element |
|---|---|
body.print_coupon, body.print-coupon |
Print page body |
.cctor_coupon_container, .cctor-coupon-container |
Outer container |
.type-cctor_coupon, .coupon-border |
Outer container |
.cctor_coupon |
Inner coupon |
.cctor_coupon_content, .cctor-coupon-content |
Inner content |
.cctor-deal |
Deal heading |
.cctor-terms |
Terms block |
.cctor_expiration.core |
Expiration line |
.cctor_opencoupon, .cctor-opencoupon |
Print-button wrapper |
.print-link |
The "Click to Print" control — a real <button> in the print view (opens the browser print dialog); on coupon pages, the link to the print view |
Print view — image coupon #
| Class | Element |
|---|---|
.cctor_coupon_image |
The <img> |
Adding custom CSS #
Two options, both of which apply to the shortcode view and the print view:
- Options page — Coupons → Options has a Custom CSS field (
cctor_custom_css). Its contents are injected inline on the front end and inside the print template. - Filter — return CSS from
cctor_filter_inline_css:
add_filter( 'cctor_filter_inline_css', function ( $css ) {
return $css . '.cctor-deal { text-transform: uppercase; }';
} );
The print view is a standalone page with no theme stylesheet, so theme CSS does not reach it — use one of the two methods above (or coupon_print_head, see google-fonts-print-view) to style it.
