Customizing templates with CSS
If you have basic HTML/CSS skills, you can easily customize template settings like colors, padding, margins, font size, etc., by applying custom CSS rules. Each template has a unique class wrapper, and most elements within the templates have unique classes as well.
Example: Changing Price Color
All price outputs have the class cegg-price. To change the color of the price text, use the following CSS:
.cegg-price {
color: red;
}Example: Changing Price Font Size
In some cases, you might need to add !important to override the default styles:
.cegg5-container .cegg-item-card .cegg-price {
font-size: 25px !important;
}
Adding Custom CSS
To add custom CSS:
Go to Appearance > Customize > Additional CSS in WordPress.
Alternatively, you can add custom CSS directly to your child theme's stylesheet file.
Coupon chip classes
The coupon chip from Shops & coupons uses these classes:
.cegg-coupon-wrap
The wrapper around the chip and its expiry line.
.cegg-coupon
The chip itself — the clickable element.
.cegg-coupon-discount
The discount label, for example 15% off.
.cegg-coupon-code
The code, for example PRIME15.
.cegg-coupon-title
Used instead of the code for a deal that has no code.
.cegg-coupon-ends
The ends in 4 days line under the chip.
.cegg-coupon-strip
The strip below the block, in strip mode.
.cegg-coupon-shop
The shop name, shown only inside the strip.
The chip takes its colour from --cegg-success, so it follows your palette rather than a fixed green:
Coupon card classes
In card mode (coupons_display=cards) each coupon renders through block_shop_coupons, which you can copy into content-egg-templates/ like any other template.
.cegg-shop-coupons
The list wrapper.
.cegg-shop-coupon
One card.
.cegg-shop-coupon__image
The coupon's own image, when it has one.
.cegg-shop-coupon__logo
The shop logo in the card head.
.cegg-shop-coupon__discount
The discount badge.
.cegg-shop-coupon__title
The offer title.
.cegg-shop-coupon__details / __summary / __desc
The See details toggle and its body.
.cegg-shop-coupon__stub
The right-hand panel holding the button.
.cegg-shop-coupon__reveal
The Show Code button, which becomes the code once clicked.
The card's torn-ticket notch is punched with a CSS mask, and a mask clips any border or box-shadow along the notch curve. That is why the card has neither — adding one back shows as a bitten-off edge. If you want a bordered card, remove the mask rules as well.
Two rules here are load-bearing. .cegg-coupon-wrap sets position: relative and z-index: 3 to sit above the card-wide stretched-link overlay that most templates use for their buy button — remove it and the chip stops being clickable. And .cegg-coupon-code never shrinks on purpose, so a narrow column squeezes the discount label instead of truncating the code; setting text-overflow: ellipsis on the code can produce an unusable PRIM….
Last updated