The CSS classes Coupon Creator Pro outputs on the coupon markup and print template, for targeting with custom styles.
Add overrides to your theme so they survive plugin updates. Both hyphen (cctor-) and underscore (cctor_) variants are emitted on most wrappers for backward compatibility — target the one you prefer. Every class below is grep-verified in Pro 3.6.0.
Coupon wrappers #
| Class | Element |
|---|---|
.cctor_coupon_container / .type-cctor_coupon |
Outer container div (also gets coupon_creator_<id> and coupon-creator-<id>) |
.cctor_coupon / .cctor-coupon |
Coupon body (outer border box) |
.cctor_coupon_content / .cctor-coupon-content |
Inner content box (background, inner border) |
.cctor-wrap-link / .cctor_wrap_link |
Anchor wrapping a clickable coupon |
.cctor-image |
Added to the container when the coupon uses an image |
Border styles #
Applied to the container from the cctor_coupon_border_themes meta:
.coupon-border · .stitched-border · .dotted-border · .sawtooth-border · .none-border
The saw-tooth style adds .sawtooth-top-bottom and .sawtooth-left-right helper divs. See Hide or Change the Dashed Border.
Content elements #
| Class | Element |
|---|---|
.cctor_deal / .cctor-deal |
Deal / amount heading |
.cctor_terms / .cctor-terms |
Terms text block |
.cctor_coupon_image / .cctor-coupon-image |
Image coupon <img> |
.cctor_expiration / .cctor-expiration |
Expiration / counter block |
.coupon-counter |
Counter output on the print/single view (see Customizing the Counter) |
.cctor_opencoupon / .cctor-opencoupon |
Wrapper around print/open links |
.print-link |
The "Click to Open in Print View" / "Click to Print" anchor |
.cctor-print-only |
Print-only content — hidden on screen, shown via @media print |
Coupon type layouts #
Type templates add their own root class: .modern (with .cctor-modern-content, .modern-title, .modern-discount, .modern-offer), .highlight, and .lower-third.
Filter bar and navigation #
| Class | Element |
|---|---|
.cctor-pro-filters-wrapper |
Filter bar container |
.cctor-pro-filter-item |
A single filter control |
.cctor-pro-filter-label |
Filter label |
.cctor-pro-filter-select |
Filter <select> |
.cctor-pro-coupon-sub-nav |
Pagination nav list |
.cctor-pro-coupons-nav-next / .cctor-pro-coupons-nav-previous |
Next / previous links |
Column widths #
The loop grid uses .column plus a size class: .size-1of1, .size-1of2, .size-1of3, .size-1of4, .size-1of5, .size-1of6.
Print-only content #
.cctor-print-only is display: none on screen and display: block inside @media print. Content comes from the coupon's cctor_print_only field, so you can show extra text only when a coupon is printed.
