Return to previous page

Add to cart button - by Eduard - on WordPress WooCommerce support

This topic has 23 replies, 3 voices, and was last updated 4 years, 1 months ago ago by Olga Barlow

Eduard

Participant

March 1, 2020 at 08:08

Hello
It is possible with this thema to make a button like this

https://prnt.sc/r9rdw4

Thank you very much

#230518 Copied Theme version: 6.2 WooCommerce version: 3.9

22 Answers
Rose Tyler

Support staff

March 1, 2020 at 09:53
Hello,

Try to use the next custom CSS code:
```
.single_add_to_cart_button:before {
    background-color: red;
    padding: 11.5px 15px;
    margin-right: 20px;
    border-radius: 5px  0 0 5px;
    margin-left: -1px;
    color:white;
    font-size: 12px;
}
.single_add_to_cart_button.button {
    min-width: 150px;
    border-radius: 5px;
    padding-left: 0;
    padding-right: 25px;
    background-color: #f7c549;
    border-color: #ffcc4d;
    color: black;
}
```
> http://prntscr.com/r9s39o

Regards
#230523 Copied
Eduard

Participant

March 1, 2020 at 10:30

Rose it is perfect but i have this problem on the home page
https://prnt.sc/r9sdvr

#230526 Copied

Rose Tyler

Support staff

March 1, 2020 at 10:32

Do you want to have such styling on the Home page only or for all “add to cart” buttons on the site?

Regards

#230527 Copied

Eduard

Participant

March 1, 2020 at 10:41

for all

#230528 Copied

Eduard

Participant

March 1, 2020 at 11:21

for all button add to cart

#230529 Copied
Rose Tyler

Support staff

March 1, 2020 at 11:25
Change the previous code to:
```
.product-details .add_to_cart_button:before {
    content: "\e90c";
}
.single_add_to_cart_button:before,
.products-loop .product-details .add_to_cart_button:before {
    background-color: #b71c1c;
    padding: 11px 15px;
    margin-right: 20px;
    border-radius: 5px 0 0 5px;
    margin-left: -1px;
    color: white;
    font-size: 1rem;
}
.single_add_to_cart_button.button,
.products-loop .product-details .add_to_cart_button {
    min-width: 150px;
    border-radius: 5px !important;
    padding-left: 0;
    padding-right: 25px;
    background-color: #f7be68;
    color: black;
    border: none !important;
    max-height: 37px;
}
.products-loop .product-details .add_to_cart_button {
    padding-top: 10px;
}
.products-loop .product-details .add_to_cart_button:hover{
    color: white;
    background-color: #4c4c4c;
}
```
Regards
#230530 Copied
Eduard

Participant

March 2, 2020 at 07:52

it is perfect rose but in the related products it not change the button???

https://prnt.sc/ra50b1

#230546 Copied
Olga Barlow

Support staff

March 2, 2020 at 10:46
Hello,

Replace previous code by the following
```
.product-details .add_to_cart_button:before {
    content: "\e90c";
}
.single_add_to_cart_button:before, .products-loop .product-details .add_to_cart_button:before, .products-grid .product-details .button:not(.compare):before, .product-slide .product-details .button:not(.compare):before {
    background-color: #b71c1c;
    border-radius: 5px 0 0 5px;
    margin-left: -1px;
    margin-right: 20px;
    color: white;
    font-size: 1rem;
    padding: .91rem;
    padding-bottom: .91rem;
}
.single_add_to_cart_button.button, .products-loop .product-details .add_to_cart_button, .products-grid .product-details .button:not(.compare), .product-slide .product-details .button:not(.compare) {
    min-width: 150px;
    border-radius: 5px !important;
    padding-left: 0;
    padding-right: 25px;
    background-color: #f7be68;
    color: black;
    border: none !important;
    padding-top: .91rem;
    padding-bottom: .91rem;
}
.products-loop .product-details .add_to_cart_button {
    padding-top: 10px;
}
.products-loop .product-details .add_to_cart_button:hover{
    color: white;
    background-color: #4c4c4c;
}
```
Regards
#230556 Copied
Eduard

Participant

March 2, 2020 at 11:16

perfect thank you thank you

#230557 Copied

Eduard

Participant

March 2, 2020 at 11:30

for responsive mobile is the same right?

#230559 Copied

Olga Barlow

Support staff

March 2, 2020 at 12:34

Hello,

Did you face any issues on mobile devices after the changes?

Regards

#230567 Copied

Eduard

Participant

March 2, 2020 at 13:38

no its ok

#230576 Copied

Eduard

Participant

March 2, 2020 at 15:19

On the product page what is happens???

https://prnt.sc/racwtj

#230578 Copied

Eduard

Participant

March 2, 2020 at 15:55

on the button add to cart…..

#230581 Copied

Olga Barlow

Support staff

March 2, 2020 at 19:15

Hello,

I suppose you switched to single product builder. Do you plan to use single product builder or pre-created layouts for the single product? Provide us with WP Dashboard access to your site, it will be faster to improve styles than to post code here.

Regards

#230595 Copied

Eduard

Participant

March 3, 2020 at 06:51

yes i use single product builder.
Don’t forget to check and for the mobile version as well the button

Please contact administrator
for this information.

#230612 Copied

Olga Barlow

Support staff

March 3, 2020 at 18:07

Hello,

Check now.

Regards

#230654 Copied

Eduard

Participant

March 3, 2020 at 18:10

i have refresh the page and is dissapear the button
can you verify please

#230655 Copied

Olga Barlow

Support staff

March 3, 2020 at 18:36

Hello,

You overwrote my changes in the child theme style.css file. I won’t be able to help you if you edit child theme styles at this moment because you will always remove my changes.

Regards

#230659 Copied
1 2

Viewing 20 results - 1 through 20 (of 23 total)