Change select option add to cart button on product card

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

  • Avatar: Focu5
    Focu5
    Participant
    December 20, 2023 at 11:58

    Hello how can i change product grid view on product card select option and after select option add to cart button.
    to be whole card wide its on hover just add border around on hover make black button with white letters?
    https://ibb.co/Nm1sRNF

    5 Answers
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    December 20, 2023 at 14:04

    Hello, @Focu5,

    Thank you for reaching out. To customize the product grid view and modify the Add to Cart button on product card selection, please follow these steps:

    a) Navigate to the XStore theme settings by going to XStore >> Theme Options.

    b) Select “Theme Custom CSS” and locate the “Global CSS” section.

    c) Insert the following CSS code to achieve the desired changes:

    .woocommerce-shop .button-switch {
        background-color: black;
    }
    .woocommerce-shop a.button.product_type_variable.add_to_cart_button.et-st-disabled {
        color: white !important;
    }

    You can change the color of the “Select Option” as you desired.

    For a visual reference, please consult the image provided at the following link:
    https://imgur.com/a/arV2i51

    Yours Sincerely,
    The 8Themes Team.

    Avatar: Focu5
    Focu5
    Participant
    December 21, 2023 at 06:37

    hello its changing only for shop page i need to change it everywhere also can i have when in normal state white button with 1 px black border around and black fonts on hover black button with white fonts also when option selected showing add to cart add cart icon?

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    December 21, 2023 at 10:15

    Hello, @Focu5,

    We understand that you’d like to extend the changes beyond the shop page and implement a specific design for the buttons.

    To achieve this, please follow the steps below:

    a)Navigate to XStore theme settings by going to XStore >> Theme Options.

    b)Select “Theme Custom CSS” and locate the “Global CSS” section.

    c)Insert the provided CSS code to make the necessary adjustments.

    .product.type-product:hover {
        border: 1px solid !important;
    }
    .product.type-product:hover a.button.product_type_variable.add_to_cart_button {
        background-color: #000 !important;
        color: #fff !important;
        padding: 10px !important;
    }

    Note: You can change the color of the “Select Option” as you desire.

    For a visual reference, please consult the image provided at the following link:
    https://ibb.co/mbmjJCt
    https://ibb.co/3yrC7zf
    https://ibb.co/pvKYH3v

    Yours Sincerely,
    The 8Themes Team.

    Avatar: Focu5
    Focu5
    Participant
    December 22, 2023 at 08:42

    is it possible to make when option is selected add to cart button always black? also now around product card black border not around button

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    December 22, 2023 at 10:06

    Hello, @Focu5,

    We regret to inform you that it is not possible to achieve your desired outcome with the current version of the theme. Item support does not include services to modify or extend the item beyond the original features, style, and functionality described on the item page and you request additional customization.

    Our high-level developers are equipped to provide you with a tailored solution for this. To get a precise estimate and discuss the customization, please submit a customization services request, and we will prepare a detailed estimate for the cost – https://www.8theme.com/account/#etheme_customization_panel (8Theme’s Customisation Services)

    We appreciate your understanding.

    If you have any more questions or need additional support, please don’t hesitate to ask.

    Kind Regards,
    8theme team

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

You must be logged in to reply to this topic.Log in/Sign up

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