Skip to content
CartPops Docs
Esc
↑↓navigate↵open⌘Jpreview
On this page

Drawer design

Change the drawer colors, overlay, corner radius and dark mode, or start from one of four presets.

The Design tab controls how the drawer looks. Layout, text and behavior live on the Layout tab. See Cart drawer settings.

Where to find it

In wp-admin, go to WooCommerce > CartPops > Drawer, then open the Design tab. A live preview of the drawer stays beside the settings. Click Save Changes when you are happy with the result.

Start from a preset

Under Presets, choose Default, Minimal, Bold or Ocean. A preset sets seven colors at once: Primary, Primary Text, Background, Text, Border, Button Background and Button Text. It leaves your other colors alone.

A preset applies as a single change, so one undo (Cmd/Ctrl+Z) takes it back. The preset button stays highlighted only while those seven colors still match it exactly.

Colors

Under Colors, every color has its own picker. They are grouped here by what they affect:

  • Brand and surfaces: Primary, Primary Text, Background, Surface, Border.
  • Text: Text, Text Secondary, Text Tertiary.
  • Form fields: Input Background, Input Border, Input Text.
  • Buttons: Button Background, Button Text, Secondary Button Background, Secondary Button Text.
  • Quantity selector: Quantity Button Background, Quantity Button Text, Quantity Value Background, Quantity Border, Quantity Value Text.
  • Recommendations: Recommendations Button, Recommendations Button Icon, Recommendations Background, Recommendations Border, Recommendations Text.
  • Status: Sale Price, Success, Danger.

Dark mode

Set Dark Mode under Shape:

  • Auto (follow system) switches the drawer to dark when the shopper’s device is set to dark mode.
  • Always light and Always dark ignore the device setting.

The Dark mode palette section sets the colors used in dark mode: Background, Surface, Text, Text Secondary, Border, Input Background and Input Border. Your Primary brand color is shared with the light palette.

Overlay and shape

  • Background Overlay sets the Color and Opacity (0 to 100) of the dim layer behind the drawer.
  • Border Radius (0 to 32) rounds the drawer elements.
  • Button Border Radius (0 to 32) rounds the buttons.

Go further with CSS

For changes the settings don’t cover, add your own rules in Advanced > General > Custom CSS. See Advanced settings. All CartPops elements use the .cpops- class prefix.

Developers: the CSS customization reference lists the stable class names and custom properties.

Was this page helpful?