Return to previous page

Change select option add to cart button on product card

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

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

#377229 Copied Theme version: 9.2.4 WooCommerce version: 8.3

5 Answers
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.
#377247 Copied
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?

#377304 Copied
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.
#377343 Copied
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

#377430 Copied

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

#377445 Copied
Tagged: add to cart button, change select option, woocommerce customization, woocommerce product card, woocommerce themes, wordpress ecommerce solution, wordpress product card
Viewing 6 results - 1 through 6 (of 6 total)