Docs

[Sandie]

Hi,

I would like to change the color of the buttons in my e-commerce. I am using WooCommerce, and I need the buttons to be different colors compared to the rest of the site.

URL: https://youpheal.com/shop/

Background color: #2ecc71
Border color: #2ecc71
Text color: #ffffff

HOVER
Background color: #393939
border color: #393939
Text color: #ffffff

Thanks!

Best Regards
/Sandra

[Darshana]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.woocommerce .button {
    background-color: #2ecc71;
    color: #ffffff;
    border: 1px solid #2ecc71;
}

.woocommerce .button:hover {
    background-color: #393939;
    color: #ffffff;
    border: 1px solid #393939;
}

Hope that helps.

[Sandie]

Hi,

Thanks, that worked great!

One more thing.

Is it possible to add a little “counter” in the button that displays “Add to Cart”?
So the customer direcly in the Shop page can choose how many of the products he wants to buy, instead of having to go in on each product page and add the chosen number and then press “Add to Cart”?

So on this page: https://www.youpheal.com/shop/

Hope you understand what I mean, otherwise tell me and I will try to find a similar button.

Thanks!

Best Regards
/Sandra

[Joao]

Hi Sandra,

I believe to achieve that you would need to try to search for a Woocommerce Plugin that will add this function.

Natively this is not an offered feature.

Let us know if you have further questions,

Joao

[Sandie]

Hi,

Now it looks great on most of the buttons on my shopping pages. But it’s one button that’s under Reviews that needs to be green as well. Same design as the other buttons.

http://prntscr.com/eec5co

Please advise me how to get this result.

Thanks!

Best Regards
/Sandra

[Liam]

Hi Sandra,

Really like your shop layout. Very clean and inviting layout. Something I am struggling with on an woo commerce shop at the moment!

[Paul R]

Hi Sandra,

You can add this under Custom > Edit Global CSS in the Customizer.

.single-product .comment-form .form-submit .submit {
    background-color: #06b67c;
    color: #fff;
    border: 1px solid #06b67c;
}

.single-product .comment-form .form-submit .submit:hover {
    background-color: #393939;
    color: #fff;
    border: 1px solid #393939;
}

@liamfrench78

May I know what you are struggling on maybe we can help.

[Sandie]

It works great, thank you so much!

@liamfrench78

Thank you Liam, that makes me very happy to hear. I am using the stack Integrity, which I though gaved my e-commerce the best design.

Thanks!

Best Regards
/Sandra

[Rahul]

Glad to hear it!

Feel free to ask us again.

Thanks! 🙂

[Author]

Posts