Return to previous page

How do I change Add to cart button color?

This topic has 8 replies, 2 voices, and was last updated 4 months ago ago by Tony Rodriguez

Kharim

Participant

January 4, 2024 at 03:02

Where do I go to change the “Add To Cart” button color for single product page and also on the shop page?

#378486 Copied Theme version: 9.2.4 WooCommerce version: 6.4.2

7 Answers
Tony Rodriguez

Support staff

January 4, 2024 at 07:14
Hello, @Kharim,

Thank you for reaching out to us with your query regarding the customization of the “Add To Cart” button color on both the single product page and the shop page. We appreciate your interest in personalizing your online store’s appearance.

1/ To change the color of the “Add To Cart” button on the Single Product Page, please follow these steps:

a) Navigate to XStore theme options.
b) Select Woocommerce(Shop).
c) Go to Single Product Page.
d) Locate the “Add To Cart & Quantity” section.
e) In the settings on the left sidebar, adjust the Background Color and Background Color (Hover) to your desired choices.

For a visual reference, kindly consult the image provided in the following link: https://imgur.com/a/vcacVdA

2/ We would like to inform you that should you desire to alter the hue of the “Add To Cart” button located on the Shop Page, you are kindly requested to replicate the following CSS code and insert it into the designated area. Please navigate to XStore > Theme Options > Theme Custom CSS > Global CSS and paste the code there.
```
.woocommerce-shop a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
    background-color: darkgray !important;
}
```
We trust this will assist you in customizing your website to your satisfaction. Should you require any further assistance, please do not hesitate to reach out.

Warm regards,
The 8Theme Team
#378496 Copied
Kharim

Participant

January 4, 2024 at 07:46

Thanks for the update. But kinda weird that I don’t see the Add to Cart & Quantity on my end.

#378501 Copied

Tony Rodriguez

Support staff

January 4, 2024 at 08:54

Hello, @Kharim,

We hope this message finds you well.

We kindly request that you provide us with the URL of the webpage where you are encountering difficulties. Additionally, if you could attach a screenshot of the issue and offer a detailed description of the problem, including what you are attempting to achieve, it would greatly assist us in understanding and addressing your concerns.

Your cooperation is greatly appreciated, and we are committed to resolving your issue promptly.

You may upload the screenshots on https://imgbb.com/ and paste the links here.

Thank you for your attention to this matter.

Best regards,
The 8Theme Team

#378510 Copied

Kharim

Participant

January 4, 2024 at 09:06

Sure.

Please contact administrator
for this information.

#378513 Copied

Tony Rodriguez

Support staff

January 4, 2024 at 09:24

Hello, @Kharim,

We hope this message finds you well.

Should you desire to modify the color of the “Add to Cart” button on the single product page, we kindly ask you to follow these steps:

1. Go to “XStore” in your dashboard.
2. Proceed to “Theme Options.”
3. Click on “Styling/Colors.”
4. Locate “Dark buttons.”
5. Choose your preferred background color.
6. Ensure to save your changes by clicking “Publish.”

For your convenience, we have included a reference image to assist you with this process. https://ibb.co/nLLnvT7

Should you require any further assistance, please do not hesitate to reach out to us.

Warm regards,
The 8Theme Team

#378516 Copied

Kharim

Participant

January 4, 2024 at 09:30

Awesome thank you.

#378519 Copied

Tony Rodriguez

Support staff

January 4, 2024 at 09:39

Hello, @Kharim,

We would be grateful if you could kindly leave a 5-star rating for our theme and customer and technical support on ThemeForest at http://themeforest.net/downloads. Doing so would help us to provide more updates and dedicated support in the future. Your support would be greatly appreciated.

Thank you for your time. We hope you have a wonderful day.

Please note that for any new issues, you should create a new ticket on the support forum.

This topic is now closed.

Warm regards,
8Theme’s Team

#378521 Copied
Tagged: change woocommerce cart button color, customize add to cart button, modify woocommerce button color, woocommerce template color changes, wordpress cart button customization, wordpress woocommerce button color guide, wordpress woocommerce color adjustments
Viewing 8 results - 1 through 8 (of 8 total)