Return to previous page

Product page buttons - by ejder077 - on WordPress WooCommerce support

This topic has 10 replies, 2 voices, and was last updated 5 years, 9 months ago ago by Rose Tyler

ejder077

Participant

July 11, 2018 at 08:23

Hi,

May I ask why the button on this product page (https://prntscr.com/k51xv2) is different from the others (https://prntscr.com/k51xv1)?

Thank you

Best regards,
Ejder

#196488 Copied

9 Answers
Rose Tyler

Support staff

July 11, 2018 at 08:43
Hello,

You provided screenshots of simple and variable products. To change styling for the button on variable product, you can add this code in Theme Options > Styling > Custom css:
```
.single-product .wc-variation-selection-needed {
    border: 1px solid #ff8da7;
    background: transparent;
    color: #3e3144;
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 12px;
    border-radius: 21px;
}
.single_add_to_cart_button.button:hover {
    color: #fff !important;
    background: #ff8da7 !important;
    border-color: #ff8da7 !important;
}
```
http://prntscr.com/k524dy
OR you can delete custom code for styling of button for simple product
```
.single-product .product-information-inner .add_to_cart_button,.quick-view-popup .product-information .add_to_cart_button {
    border: 1px solid #ff8da7;
    background: transparent;
    color: #3e3144;
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 12px;
    border-radius: 21px
}
.product-information-inner .buttons_added span:hover,.product-information-inner .add_to_cart_button:hover {
    color: #fff !important;
    background: #ff8da7 !important;
    border-color: #ff8da7 !important
}
```
and use Theme Options > Styling > Content > Customize buttons > Dark buttons settings.
Please select one way. In case, you need help, provide us with temporary wp-admin access.

Regards
#196491 Copied
ejder077

Participant

July 11, 2018 at 12:49

Hi,

But how about the select button (https://prnt.sc/k55gdx)? Can I change it like the simple product?

Besides, why there is a word “N/A” under the “add to cart” button? I do not see it on the simple product page.

#196510 Copied
Rose Tyler

Support staff

July 11, 2018 at 13:32
Hello,

1. Please add this code in Custom css:
```
.product-information table.variations select {
    background-color:  white;
    border: 1px solid #ff8ca7;
}
```
2.
```
.product-information .product_meta .sku_wrapper {
    display:  none;
}
```
Regards
#196516 Copied
ejder077

Participant

July 12, 2018 at 03:41

Hi,

How can I edit the sizing guide icon (https://prntscr.com/k5ffou) of the product like this (https://prntscr.com/k4pdqa)?

#196556 Copied

Rose Tyler

Support staff

July 12, 2018 at 08:37

Hello,

Please provide us with wp-admin access to your site.

Regards

#196568 Copied

ejder077

Participant

July 12, 2018 at 09:48

Here are my username and password

Thank you

Please, contact administrator
for this information.

#196578 Copied
Rose Tyler

Support staff

July 12, 2018 at 09:56
Please change this code http://prntscr.com/k5iwbb to:
```
.product-information-inner .size-guide {
    background-color: #f7f7f7;
}
```
Regards
#196579 Copied
ejder077

Participant

July 12, 2018 at 12:25

Thank you for helping me!

#196597 Copied

Rose Tyler

Support staff

July 12, 2018 at 12:54

You’re welcome!

Regards

#196598 Copied
Viewing 10 results - 1 through 10 (of 10 total)