Change the color of embedded buttons

Hi Dennis,

The code from this article should help: https://support.ecwid.com/hc/en-us/articles/207808395-How-to-change-your-Add-to-Bag-button

I just tried it in my local test store – it works fine with single product widgets as well. Can you try that and let us know if it helps?

Hi,

yay, that worked for single products (like on this page). Thanks a lot!

Is there also a chance to apply these changes to the storefront (this page)? As I mentioned, I use chameleon skin, but it’s not the ideal orange and the hover color is totally different to the hover color I use on the rest of my website.

Chameleon skin made the buttons #FF6600, whereas I prefer a #ED9D2B.
And the hover color right now is a pale looking #FF944C. I’d like to have it in a grey #747474.

Thanks!

Hello Kenika,

To change the colors of the Buy now button in your Product browser, please apply these CSS rules to your active CSS theme in Ecwid Control Panel -> Settings -> Design -> CSS themes:

.ecwid .ecwid-btn--actionOK {
   background-color: #ED9D2B  !important;
}

.ecwid .ecwid-btn--actionOK:hover {
   background-color: #747474   !important;
}

If you have any other questions, please feel free to contact us.

Kenika,

In addition to the previous message. The code provided above will work, however, there is a better solution. Ecwid Chameleon skin for WordPress has hidden settings inside WordPress options.php. You can open the page options.php via a direct URL to it: https://www.dennisknickel.com/wp-admin/options.php

There you will find “ecwid_chameleon_colors_button” setting where you should specify the desired active color for the buttons: #ED9D2B. The hover color will be created by Chameleon skin automatically.

Interesting. Thanks!

But it doesn’t work for me: Whenever I try to save a my settings, I’m getting this error page:

Request Entity Too Large

The requested resource
/wp-admin/options.php
does not allow request data with POST requests, or the amount of data provided in the request exceeds the capacity limit.

By the way: The ecwid_chameleon settings are these:
ecwid_chameleon_background
ecwid_chameleon_links
ecwid_chameleon_primary

There is no ““ecwid_chameleon_colors_button” option though.

• This reply was modified 8 years, 1 month ago by Kenika.
• This reply was modified 8 years, 1 month ago by Kenika.

Kenika,

By the way: The ecwid_chameleon settings are these:
ecwid_chameleon_background
ecwid_chameleon_links
ecwid_chameleon_primary

There is no ““ecwid_chameleon_colors_button” option though.

We’re sorry for the confusion!

It looks like some of the options we’ve added to the plugin recently such as “ecwid_chameleon_colors_button” sometimes may not appear on the list of options. We’re looking into this problem and fix it in one of the upcoming updates—we’ll let you know once the fix is live, please, stay tuned!

Whenever I try to save a my settings, I’m getting this error page

This error is related to your WordPress site itself, and in particular, to PHP or Apache settings on your server. Most likely, it has something to do with the maximum amount of data that can be sent with a POST request. I suggest you to get in touch with your hosting provider to find out the exact reason of this error message. Some links on the topic:

• How to increase maximum POST variable in PHP?
• How to deal with “Request Entity Too Large” error message

Chameleon skin made the buttons #FF6600, whereas I prefer a #ED9D2B.
And the hover color right now is a pale looking #FF944C. I’d like to have it in a grey #747474.

I’m sorry the previous CSS codes didn’t work for you. It looks like we have to make it more specific. Please, add the below CSS snippet to your custom CSS theme in the Ecwid Control Panel → Settings → Design → Custom CSS Themes:

html#ecwid_html body#top.chameleon button.ecwid-btn--primary { background-color: #ED9D2B; }
html#ecwid_html body#top.chameleon button.ecwid-btn--primary:hover { background-color: #747474; }

That code should do the trick.

• This reply was modified 8 years, 1 month ago by ecwid_team.
• This reply was modified 8 years, 1 month ago by ecwid_team.

Thanks for your answer!
I’ll contact my provider to find out what’s up. I’m using PHP 7.0 by the way.

Unfortunately, also this code didn’t change anything:

html#ecwid_html body#top.chameleon button.ecwid-btn--primary { background-color: #ED9D2B; }
html#ecwid_html body#top.chameleon button.ecwid-btn--primary:hover { background-color: #747474; }

• This reply was modified 8 years, 1 month ago by Kenika.

Kenika,

We are sorry for this. Please try this variant of code, please:

button.ecwid-btn--primary { background-color: #ED9D2B; }
button.ecwid-btn--primary:hover { background-color: #747474; }

It should work.

Kenika,

We have an update for you, please disregard the previous message.

We have found the reason of why you were unable to see the “ecwid_chameleon_colors_button” setting in options.php file. This problem has been resolved, the fix has been added to the new version of Ecwid plugin for WordPress, it will be released soon.

Once you upgrade the plugin and have your hosting company solve the mentioned above problem with the maximum amount of data which can be sent with a POST request, you will be able to write the desired color codes to the “ecwid_chameleon_colors_button” setting in options.php.

One more thing is, we have an update from our development team. They are going to release a new version of Ecwid Chameleon skin. There will be new CSS classes added, so the codes provided previously may not work in your store. Therefore we have created a new CSS code for you. This code is applicable to both old and new versions of Chameleon skin and will work in both editions.

You can use this code as a workaround solution while you are waiting for the updated version of Ecwid plugin for WordPress. This workaround can be kept permanently in your store if you like. Please find the new code below:

.chameleon div.ecwid button.ecwid-btn--primary,  div.ecwid button.ecwid-btn--primary { background-color: #ED9D2B; }

.chameleon div.ecwid button.ecwid-btn--primary:hover, div.ecwid button.ecwid-btn--primary:hover { background-color: #747474; }

Please let us know the results after you apply it to your active CSS theme.

It works! Awesome!
I’m seriously fascinated by your support. Thank you so much!

Hi Kenika!

We just wanted to let you know we’ve just released a new version of our plugin (4.7) and the variables we mentioned previously are in place now. So feel free to check them out on https://www.dennisknickel.com/wp-admin/options.php page.

• This reply was modified 8 years, 1 month ago by ecwid_team.

Nice! Thanks!