Return to previous page

How to change color of cart canvas button

This topic has 7 replies, 3 voices, and was last updated 4 months, 1 weeks ago ago by Andrew Mitchell

Hanzla Nadeem

Participant

January 8, 2024 at 22:54

I want to customize this button in following way:

simple: border width: 1 px, color: 012b0e
bg color f6e2dc
text color: 012b0e
hover: border width: 1 px, color: 012b0e
bg color: 012b0e
text color: f6e2dc
Can you kindly provide me with custom code

#379155 Copied Theme version: 9.2

6 Answers

Tony Rodriguez

Support staff

January 9, 2024 at 08:59

Hello, @Hanzla Nadeem,

Thank you for contacting us and for using XStore.

We kindly request that you provide us with a screenshot of the button whose color you wish to modify. This will enable us to review the matter and offer you the appropriate assistance.

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

Furthermore, we would appreciate it if you could create temporary wp-admin access and share the details via the private content area. This will allow us to review your settings and better understand the issue at hand.

We kindly recommend that you take a complete backup of your site before proceeding.

Best Regards,
The 8Theme Team

Please contact administrator
for this information.

#379202 Copied

Hanzla Nadeem

Participant

January 9, 2024 at 11:15

Sorry, I thought that I had already uploaded it, but it was not there.
https://imgur.com/a/XOq1WtN
here it is and wp admin pass in private content
this button appears when user has nothing in shopping cart in popup

Please contact administrator
for this information.

#379222 Copied
Tony Rodriguez

Support staff

January 9, 2024 at 12:50
Hello, @Hanzla Nadeem,

Thank you for your response.

To change the color of the Return to shop (Button) in off canvas cart, please follow these steps

1) Navigate to XStore >> Theme Options >> Theme Custom CSS >> Global CSS.
2) Replicate the following CSS code into the designated location.

-To change the color of the button without requiring any hover action, you can use the following CSS code:
```
.woocommerce-mini-cart__empty-message.empty a.btn {
   background-color: red !important;
}
```
-To alter the button’s color when hovered over, you can make use of the following CSS code:
```
.woocommerce-mini-cart__empty-message.empty a.btn:hover {
    background-color: #1CCD21 !important;
}
```
Note: You can add the CSS property values yourself. And you can make the changes as you desire, like colors.

Please refer to the attached visual reference in the provided image link:
https://imgur.com/a/TQvLGDU
https://imgur.com/a/kl1Rj3Y

We hope this helps.

Kind Regards,
8theme team
#379251 Copied
Hanzla Nadeem

Participant

January 9, 2024 at 13:23

I have applied the following code, bg color changed but borders are not visible

.woocommerce-mini-cart__empty-message.empty a.btn {
background-color: #f6e2dc!important;
border-style: solid;
border-width: 2px!important;
border-radius: 50px!important;
border-color: #012b0e!important;
color: black!important;
}

.woocommerce-mini-cart__empty-message.empty a.btn:hover {
background-color: #012b0e!important;
color: #f6e2dc!important;
border-style: solid;
border-width: 2px!important;
border-radius: 50px!important;
border-color: transparent!important;
}

#379257 Copied

Hanzla Nadeem

Participant

January 9, 2024 at 13:27

its solved now , thanks a lot

#379258 Copied

Andrew Mitchell

Support staff

January 9, 2024 at 13:27

Dear Hanzla Nadeem,

In the spirit of gratitude, we want to express our appreciation for your trust in our products. As a valued customer, your experience matters greatly. Would you consider sharing it by giving our theme a deserving 5-star rating on ThemeForest?

Click here to share your thoughts: https://themeforest.net/downloads

Being part of our community means a lot, and your feedback contributes immensely.

Best Regards,
The 8Theme Team

#379259 Copied
Tagged: cart canvas button, change button color, customize cart button, woocommerce color change, woocommerce tips, wordpress templates, wordpress tutorial
Viewing 7 results - 1 through 7 (of 7 total)