Return to previous page

Product view light design show always add to cart button

This topic has 8 replies, 2 voices, and was last updated 6 months ago ago by Rose Tyler

Focu5

Participant

November 7, 2023 at 08:32

Hello, how can on this design : https://ibb.co/TYCRdV0 always show add to cart button, because at the moment on hover hide price and show button, we wanna show price and add to cart button always

#372793 Copied Theme version: 9.2.3 WooCommerce version: 8.2.1

7 Answers
Rose Tyler

Support staff

November 7, 2023 at 09:50
Hello, Focu5,

Thank you for contacting us and for using XStore.

Please test different Design Types in Theme Options > WooCommerce > Shop > Products design.
OR use custom CSS code (Theme Options > Theme custom CSS):
```
.product-view-light .switcher-wrapper {
    height: 60px;
}
.product-view-light.et_cart-on .content-product:hover .price-switcher {
    transform: none;
    -webkit-transform: none;
}
.product-view-light .price-switch {
    height: 25px;
}
```
Kind Regards,
8theme team
#372808 Copied
Focu5

Participant

November 7, 2023 at 09:55

Thank you for reply, i had added custom css but still same price are hiding on hover and then showing cart button.

#372810 Copied

Focu5

Participant

November 7, 2023 at 09:57

also how can i make add to cart black button and on hover white

#372812 Copied

Focu5

Participant

November 7, 2023 at 10:15

On product archive page everything fine add to cart button showing all the time, but on home page we are using product ajax tabs and products elements but its not working, i added custom css to that elements but still same issue. Also same issue with related product and upsell products element. Global custom css changing view only on archive/shop page

#372819 Copied
Rose Tyler

Support staff

November 7, 2023 at 14:03
Hello, Focu5,

Please change the previous code in Theme Options to:
```
.product-view-light .switcher-wrapper {
    height: 60px !important;
}
.product-view-light.et_cart-on .content-product:hover .price-switcher {
    transform: none !important;
    -webkit-transform: none !important;
}
.product-view-light .price-switch {
    height: 25px !important;
}
```
Kind Regards,
8theme team
#372861 Copied
Focu5

Participant

November 7, 2023 at 14:12

Perfect thanks its working

Please contact administrator
for this information.

#372867 Copied
Rose Tyler

Support staff

November 7, 2023 at 15:59
Hello, Focu5,

Thank you for your response.

Custom code for price size:
```
.product-view-light .product-details .price {
    font-size: 18px;
}
```
Have you checked all Design Types and other settings in Theme Options > WooCommerce > Shop > Products design?
Maybe it would be better to select a type with the button, and then change colors of this button via Theme Options > Styling.

Kind Regards,
8theme team
#372880 Copied
Tagged: always add to cart button, improved shopping experience, optimized online store, product view light design, woocommerce templates, wordpress ecommerce
Viewing 8 results - 1 through 8 (of 8 total)