How to change color of cart canvas button

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

  • Avatar: Hanzla Nadeem
    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

    6 Answers
    Avatar: Tony Rodriguez
    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.
    Avatar: Hanzla Nadeem
    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.
    Avatar: Tony Rodriguez
    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

    Avatar: Hanzla Nadeem
    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;
    }

    Avatar: Hanzla Nadeem
    Hanzla Nadeem
    Participant
    January 9, 2024 at 13:27

    its solved now , thanks a lot

    Avatar: Andrew Mitchell
    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

  • Viewing 7 results - 1 through 7 (of 7 total)

The issue related to '‘How to change color of cart canvas button’' has been successfully resolved, and the topic is now closed for further responses

8theme customization service
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.