Back to Community
Home / Community / Plugin → Cookieyes – cookie banner for cookie consent (easy to setup gdpr/ccpa compliant cookie notice)

How to Change the Color and Text of the 'Save & Accept' Button in CookieYes

15 threads Sep 10, 2025 Plugin → Cookieyes – cookie banner for cookie consent (easy to setup gdpr/ccpa compliant cookie notice)

Content

A common customization request for the CookieYes plugin is altering the appearance and text of the 'Save & Accept' button found in the Privacy Overview pop-up. Many users find the default green color doesn't match their site's design, and some need to change the button's text for clarity or translation purposes without waiting for official language pack updates.

Why This Happens

The plugin's styling is predefined, and the button text is a hardcoded string intended for translation through official WordPress channels. This means the options to change these elements are not available in the plugin's settings and require custom code.

How to Change the Button Color

The most reliable method is to add custom CSS to your WordPress website. This code targets the button's unique ID.

  1. Navigate to your WordPress dashboard.
  2. Go to Appearance > Customize.
  3. Click on Additional CSS.
  4. Paste the following CSS code into the provided box:
#wt-cli-privacy-save-btn {
    background-color: #YOUR_HEX_CODE;
    color: #ffffff;
}

Replace #YOUR_HEX_CODE with your desired color's hexadecimal code. For example, to change it to a blue shade, you might use #08a6ca.

Note: After adding the code, remember to clear your website's cache if you use a caching plugin, as this ensures the new styles are visible to all visitors immediately.

How to Change the Button Text

To modify the text from the default "SAVE & ACCEPT," you need to add a small code snippet to your theme's functions.php file. It is highly recommended to use a child theme to prevent your changes from being overwritten by theme updates.

  1. Access your site's files, either via FTP or your hosting provider's file manager.
  2. Navigate to /wp-content/themes/your-child-theme/.
  3. Edit the functions.php file.
  4. Add the following code at the very end of the file:
function cli_change_save_button_text( $text ) {
    $text = 'YOUR_NEW_TEXT_HERE';
    return $text;
}
add_filter( 'cli_show_save_button_text', 'cli_change_save_button_text' );

Replace YOUR_NEW_TEXT_HERE with your desired button text, for example, "CONFIRM MY CHOICES".

Troubleshooting Tips

  • Code Not Working? If the CSS changes don't appear, double-check that the CSS selector is correct and that there are no typos in your hex code. Also, ensure you have cleared all caching on your site, including any server-side or CDN caches.
  • Looking for Other Customizations? The same principle of using custom CSS can be applied to style other elements, such as the category toggle sliders or the pop-up background. The 'CookieYes' team has published a CSS customization guide that covers many common elements.
  • Official Translations: For translating the button text through the official system, you can contribute on the WordPress Translate platform. Submitted translations require approval by a language moderator.

By following these steps, you can successfully customize the 'Save & Accept' button to better fit your website's design and language requirements.

Related Support Threads Support