Return to previous page

How to edit the sticky add to cart and buy now buttons

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

IP

Participant

December 22, 2022 at 01:14

Hello,

How can we edit the add to cart and buy now buttons (stick ones) when scrolling down the product.

Also, when i scroll down, the text on the buttons is ‘Add To Cart” and “Buy Now” versus on the top buttons the letters are lowercase “Add to cart” and “Buy now”

Demo; https://xstore.8theme.com/elementor/demos/niche-market02/product/air-fryer-with-dualzone/

Thanks!

#342093 Copied Theme version: 8.3.8

5 Answers

Tony Rodriguez

Support staff

December 22, 2022 at 05:41

Hello, @IP,

Actually, from the theme settings, you can only enable/disable the sticky add to cart bar nothing else see the image: https://postimg.cc/SY0BWjhV changes require customization.

Second, regarding to the font, you can make it with the custom CSS code.
Simply go to the Dashboard >> XStore >> Theme OPtions >> Theme Custom CSS >> Global and then paste the below code at the bottom of the CSS box there.

.etheme-sticky-cart .quantity~.single_add_to_cart_button{text-transform:none !important;}

Then save settings and check back to your site after clearing the browser cache.

Regards 8Themes Team.

#342098 Copied

IP

Participant

December 27, 2022 at 04:52

Thanks Tony!

I meant on how we can get the buttons which are on top to be the same as they are on the stick section (first letter capital)
Will i have to do that via loco translate?

And how can we edit the colors? So that the sticky cart buttons (when scrolled down) remain the same as they are when they are on top

Thanks!

#342352 Copied
Tony Rodriguez

Support staff

December 27, 2022 at 05:43
Hello, @IP,

1. Please go to XStore >> Theme Settings >> WooCommerce >> Single Product Builder >> Add to Cart and Quantity and change the Text Transform under Style as “Capitalize” https://postimg.cc/CRSynSj8

2. You can change the color of the buttons too from XStore >> Theme Settings >> WooCommerce >> Single Product Builder >> Add to Cart and Quantity as per your requirements, and the “Buy Now” button in sticky add to cart will pick the same color as you will set from Theme Settings but for changing the Add to Cart button color in sticky add to cart section you have to use the Custom CSS for it, you can try with the below-given CSS code.
```
body .etheme-sticky-cart button.add_to_cart_button.ajax_add_to_cart.single_add_to_cart_button {
    background-color: red !important;
}
```
Regards 8Themes Team.
#342356 Copied
IP

Participant

January 10, 2023 at 20:06

Hello Tony,

Thanks for the advice on the text, i have found that!

In regards to the color,

Can i get the code for the initial color and then the hover color in regards to the sticky button for “Add to cart”?

#343567 Copied
Tony Rodriguez

Support staff

January 11, 2023 at 09:12
Hello, @IP,

Please try with the Custom CSS code given below and change the colors in the given code as per your requirements.

For Sticky add to cart button:
```
.etheme-sticky-cart button.add_to_cart_button.ajax_add_to_cart.single_add_to_cart_button.button.alt.wp-element-button {
    background-color: yellow !important;
}
button.add_to_cart_button.ajax_add_to_cart.single_add_to_cart_button.button.alt.wp-element-button:hover {
    background-color: green !important;
}
```
For Sticky Buy now button:
```
.etheme-sticky-cart button.et-single-buy-now.single_add_to_cart_button.button.alt {
    background-color: yellow !important;
}
.etheme-sticky-cart button.et-single-buy-now.single_add_to_cart_button.button.alt:hover {
    background-color: green !important;
}
```
Regards 8Themes Team.
#343614 Copied
Tagged: add to cart, buttons, buy now, edit, sticky, woocommerce, wordpress
Viewing 6 results - 1 through 6 (of 6 total)