Return to previous page

Changing Add to Cart Buttons? Radiusing corners…

This topic has 22 replies, 4 voices, and was last updated 8 years, 9 months ago ago by Robert Hall

  • Avatar: talonhead
    talonhead
    Participant
    February 19, 2016 at 22:02

    Where would one find how to radius the corners of the Add to Cart button? Thanks!

    #113985 Copied Theme version: 1.5 WooCommerce version: 2.5.0
    21 Answers
    Avatar: Robert Hall
    Robert Hall
    Support staff
    February 20, 2016 at 08:47

    Hello,

    You can add the following code in 8Theme Options->Styling->Custom CSS->Global Custom CSS.

    .product .content-product .btn {
    border-radius: 10px;
}

    Regards,
    Robert Hall.

    #114005 Copied
    Avatar: talonhead
    talonhead
    Participant
    February 20, 2016 at 11:27

    Hello Robert and many thanks for replying! That little bit works…but not for the actual “add to cart” button on the single-products page. It works everywhere else…such as on the products page, related products, upsells, etc…but not on the single-product page for that particular product.

    Incidentally, and just so I know, where would the corners for the “choose an option” boxes be radiused at?

    Ideas on all of this?

    Thank you!

    #114016 Copied
    Avatar: Robert Hall
    Robert Hall
    Support staff
    February 20, 2016 at 11:35

    Please use this code in Global Custom CSS for a ‘add to cart’ button on a single product page.

    .product-information .cart button[type="submit"] {
    border-radius: 10px;
}

    Incidentally, and just so I know, where would the corners for the “choose an option” boxes be radiused at?

    Please provide us with link to page where we can find this box.

    Regards,
    Robert Hall.

    #114017 Copied
    Avatar: talonhead
    talonhead
    Participant
    February 20, 2016 at 12:58

    It’s just your standard Woocommerce Option boxes. Thanks for the code. Works just fine.

    Please, contact administrator
    for this information.
    #114022 Copied
    Avatar: Eva
    Eva Kemp
    Support staff
    February 21, 2016 at 08:40

    Hello,

    Please use this css code:

    .product-information table.variations td.value select {
   border-radius: 10px;
}

    Regards,
    Eva Kemp.

    #114048 Copied
    Avatar: talonhead
    talonhead
    Participant
    February 21, 2016 at 14:22

    Brilliant! FYI: I actually had to make it:

    .product-information .variations .value select {
    border-radius: 10px;
    }

    Works great! Thank you. Incidentally, where are product attribute font colors AND styles changed? I use a dark background, and each product option title name is black…so it can’t be seen too well…if at all.

    Thanks again!

    #114085 Copied
    Avatar: Eva
    Eva Kemp
    Support staff
    February 22, 2016 at 10:58

    Hello,

    There are no style options for attributes, so you need change them via css.
    Add this code in Global Custom CSS:

    .product-information table.variations td.label label {
    color: white;
}

    Regards,
    Eva Kemp.

    #114146 Copied
    Avatar: talonhead
    talonhead
    Participant
    February 22, 2016 at 11:13

    Hmm…that didn’t make any difference for some reason. Even when changing the “td.label” to simply “.label” (it was over-qualified).

    Ideas?

    #114155 Copied
    Avatar: Eva
    Eva Kemp
    Support staff
    February 22, 2016 at 11:17

    Hello,

    Try to add “!important” to the code:

    .product-information table.variations td.label label {
    color: white !important;
}

    Regards,
    Eva Kemp.

    #114158 Copied
    Avatar: talonhead
    talonhead
    Participant
    February 22, 2016 at 11:21

    It says with yellow triangle:

    use of !important;

    #114160 Copied
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    February 22, 2016 at 15:46

    Hello,

    As I see the labels color has been changed:
    http://storage4.static.itmages.com/i/16/0222/h_1456152361_6869351_ee80cfa8e9.png

    Please clear browser cache and check.

    Best regards,
    Jack Richardson.

    #114229 Copied
    Avatar: talonhead
    talonhead
    Participant
    February 22, 2016 at 15:49

    Yes…it has changed…and I knew that. But am I supposed to disregard the yellow triangle in this case?

    Incidentally, how do I make that same label BOLD?

    Thanks Jack!

    #114230 Copied
    Avatar: Eva
    Eva Kemp
    Support staff
    February 22, 2016 at 16:15

    Hello,

    To make labels bold use this css code:

    .product-information table.variations td.label label {
   font-weight: bold;
}

    Yes, you can disregard the yellow triangle in this case.

    Regards,
    Eva Kemp.

    #114245 Copied
    Avatar: talonhead
    talonhead
    Participant
    February 22, 2016 at 16:33

    Great! Thanks! It works. Now…one last thing in this same area. How to change the font colors in the option selection boxes themselves?

    #114250 Copied
    Avatar: Robert Hall
    Robert Hall
    Support staff
    February 22, 2016 at 16:36

    Hello,

    Please use this code in 8Theme Options->Styling->Custom CSS->Global Custom CSS.

    .product-information table.variations td.value select {
    color: red;
}

    Regards,
    Robert Hall.

    #114251 Copied
    Avatar: talonhead
    talonhead
    Participant
    February 22, 2016 at 16:58

    Fantastic! Worked like a charm. Thank you guys for your promptness!

    #114256 Copied
    Avatar: Robert Hall
    Robert Hall
    Support staff
    February 22, 2016 at 17:31

    You are welcome! We are glad to help you and thanks for good thoughts!
    Would be very appreciate if you leave a rating! You can do this in Downloads area. Login to your account on ThemeForest, go to Downloads area, find Classico theme and you’ll see the stars next to it.
    Thank you!

    Regards,
    Robert Hall.

    #114263 Copied
    Avatar: talonhead
    talonhead
    Participant
    February 22, 2016 at 17:55

    I most certainly will!

    BTW…all these changes I have done in Custom CSS won’t be lost with a theme update will it? All my changes have been done in the Child.

    Thanks again! Please bear with me because I’ve got a few more things to take care of on the site before she’s live. 🙂

    #114268 Copied
    Avatar: Eva
    Eva Kemp
    Support staff
    February 22, 2016 at 18:02

    Hello,

    The changes in Custom CSS won’t be lost after theme update. You shouldn’t worry about it, but we recommend to create backup before each update (even if you update plugins).

    Regards,
    Eva Kemp.

    #114271 Copied
    Avatar: talonhead
    talonhead
    Participant
    February 22, 2016 at 18:04

    Good deal Eva. We’re on the same page with that. Standard procedure to backup before updating. Thanks again for your efforts!

    #114273 Copied
    Avatar: Robert Hall
    Robert Hall
    Support staff
    February 22, 2016 at 18:05

    You’re welcome!

    Regards,
    Robert Hall.

    #114274 Copied
  • Viewing 22 results - 1 through 22 (of 22 total)

The issue related to '‘Changing Add to Cart Buttons? Radiusing corners…’' has been successfully resolved, and the topic is now closed for further responses

8theme customization service

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Lifestyle Blog – WordPress WooCommerce Theme
lazy-placeholder
Spa – WooCommerce Theme
lazy-placeholder
Hosting Store – WordPress WooCommerce Theme
lazy-placeholder
Cocktails Store – WordPress WooCommerce Theme
lazy-placeholder
X-Phone Store – WordPress WooCommerce Theme
lazy-placeholder
Marseille 01 – WordPress WooCommerce Theme
lazy-placeholder
Phone Service – WordPress WooCommerce Theme
lazy-placeholder
Jewellery Niche Market – Multivendor WP WooCommerce Theme
lazy-placeholder
Corporate – WordPress WooCommerce Theme
lazy-placeholder
Corporate – WordPress Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.