BugWP logo BugWP
Back to Community
Home / Community / Plugin → Complianz – gdpr/ccpa cookie consent

How to Customize Your Complianz Cookie Banner Buttons: A Troubleshooting Guide

19 threads Sep 16, 2025 Plugin → Complianz – gdpr/ccpa cookie consent

Content

Customizing the appearance and layout of buttons on the Complianz cookie consent banner is a common request. Users often want to change button sizes, positions, text, or visibility to better match their site's design and user experience goals. This guide covers the most frequent button-related issues and their solutions, based on community support threads.

Common Button Customization Issues and Solutions

1. Changing Button Size

If the default button sizes don't fit your design, you can easily resize them with custom CSS. The default properties for buttons are:

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    height: 45px;
    width: 100%;
}

You can override these values in your WordPress dashboard under Appearance → Customize → Additional CSS. To target specific buttons, use these CSS classes:

  • .cmplz-accept (Accept button)
  • .cmplz-deny (Deny/Reject button)
  • .cmplz-view-preferences (View Preferences button)
  • .cmplz-save-preferences (Save Preferences button)

2. Reordering Button Positions

The plugin doesn't have a built-in setting to change button order, but you can achieve this with CSS flexbox properties. To reverse the order of Accept and Reject buttons, use:

.cmplz-cookiebanner .cmplz-buttons { 
    flex-direction: row-reverse;
}

For more complex rearrangements, you can use the order property on individual buttons:

.cmplz-deny {
    order: 2;
}

3. Moving the Deny Button to Its Own Row

Some users prefer to have the Deny button on a separate row below other buttons. This can be achieved with CSS grid:

.cmplz-cookiebanner .cmplz-buttons {
    grid-template-columns: 1fr 1fr;
    display: grid;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny {
    order: 3;
    grid-column: span 2;
}

4. Hiding Specific Buttons

If you don't want to show certain buttons, you can manage this through the plugin settings or with CSS:

  • To hide the "View Preferences" button: Go to Complianz → Cookie Banner → General and select "Accept - Deny" under Categories.
  • To hide the "Manage Options" button everywhere: Go to Complianz → Cookie Banner → General and set "Manage consent display options" to "Hide everywhere."
  • For more specific hiding needs: Use CSS display: none; on the appropriate button class.

5. Centering Button Text

If your button text appears aligned to the left instead of centered, it's likely due to conflicting CSS from your theme. Add this CSS to fix it:

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    display: block;
}

6. Moving the Deny Button Inside the Modal

If you want to move the dismiss (deny/reject all) button inside the modal and keep only Accept and Preferences buttons visible initially, this requires more advanced customization. The Complianz team suggests following their guide on how to create a banner from scratch for such significant changes.

Important Notes

TCF Framework Limitations: If you've enabled the TCF framework during setup (typically by answering "Yes" to advertising scripts), the banner is replaced with a TCF consent layer that has limited customization options through the standard interface.

CSS Conflicts: Many button display issues are caused by CSS conflicts with your theme or other plugins. Always check if the issue persists when temporarily disabling Complianz. If it does, the problem likely originates elsewhere.

Premium Users: Note that according to WordPress forum guidelines, support for premium features should be handled through the official Complianz support channels rather than public forums.

For most button customization needs, CSS provides the flexibility to achieve your desired layout and appearance. Always test changes on a staging site first and use browser developer tools to inspect elements and test CSS modifications.

Related Support Threads Support