Change button style

  • Resolved benorange

    (@benorange)


    2 years, 7 months ago

    Hi, I am looking for help with styling woocommerce cart and checkout buttons. Thanks in advance.

    I’ve used the custom CSS feature on my wordpress site to change the color/style of all the buttons/menus/… , except the submit coupon code, refresh cart and place order buttons.

    These three appear to have !important already in there so won’t listen to any extra css to change the purple. I do not have any button options in appearance customisation with my snowlake theme or with elementor.

    I can hide the whole element but haven’t been able to put a replacement in the right place.

    There’s an example below but what I am trying to get around is the purple background-color: #848abd!important;.

    -> element html
    <button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Place order" data-value="Place order">Place order</button>

    -> element CSS

    .woocommerce #payment #place_order, .woocommerce-page #payment #place_order {
    background-color: #848abd!important;
    border: 0;
    color: #fff;
    margin-bottom: 0.5rem;
    margin-right: 0.25rem;
    padding: 0.9rem 1.3rem 0.8rem!important;
    font-size: 0.65rem!important;
    letter-spacing: 0.025rem;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 1;
    border-radius: 1.5rem;
    text-shadow: none;
    -webkit-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    -webkit-box-shadow: none;
    box-shadow: none;
    display: inline-block;
    margin-left: auto;
}

    Bw,
    Ben

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hello @benorange,

    It’s kind of hard to look into this problem without the site link. Appreciate if you could share the site url.

    Naz.

    Thread Starter benorange

    (@benorange)

    Thanks @nazreenexe.

    There are 3 items on the test page you can add to cart:
    https://projetosolutions.com/ecommerce-demo/

    Hi @benorange!

    These three appear to have !important already in there so won’t listen to any extra css to change the purple. I do not have any button options in appearance customisation with my snowlake theme or with elementor.

    Can you please try adding your custom CSS code to your site’s “Appearance ?? Customize ?? Additional CSS” section with the same Specificity?

    To make the “Place Order” button background Color Purple, you need to add the following CSS.

    .woocommerce #payment #place_order, 
.woocommerce-page #payment #place_order {
    background-color: purple !important;
}

    Let us know how it goes.
    Regards!

    Thread Starter benorange

    (@benorange)

    Hi @shaonback2!

    That worked, I was calling it wrong. Thought I had the right classes/names as I could set display:none and they disappeared but clearly no.

    Thanks very much for the clarification. Will try this model on the others but expect all good..

    Bw,
    Ben

    • This reply was modified 2 years, 7 months ago by benorange.
    Plugin Support Paulo P – a11n

    (@paulostp)

    That’s great! Thanks for letting us know. Feel free to open a new topic if you need additional support.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change button style’ is closed to new replies.