• Resolved morganelite

    (@morganelite)


    Hello All!

    The following is the the CSS code I tried inserting into the existing CSS code used to change the color of all the WooCommerce buttons.

    .woocommerce ul.products li.product .top-product-section {
    text-align: center;
    }

    Everything turns red indicating a syntax error. I’m new to CSS and not sure if I placed it in the wrong location. Below is the code that I attempted to add the above to:

    /* Enter Your Custom CSS Here */.woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {

    background:#F660AB !important;

    background-color:blue;

    color:white !important;

    text-shadow: transparent !important;

    box-shadow: none;

    border-color:#ca0606 !important;

    }

    .woocommerce #content input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce-page #content input.button:hover, .woocommerce-page #respond input#submit:hover, .woocommerce-page a.button:hover, .woocommerce-page button.button:hover, .woocommerce-page input.button:hover {

    background:#F660AB !important;

    background-color:#F660AB !important;

    color:white !important;

    text-shadow: transparent !important;

    box-shadow: none;

    border-color:#ca0606 !important;

    }

    .woocommerce #content input.button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-page #content input.button, .woocommerce-page #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button {

    background: #F660AB !important;

    color:white !important;

    text-shadow: transparent !important;

    border-color:#ca0606 !important;

    }

    .woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {

    background: #F660AB !important;

    box-shadow: none;

    text-shadow: transparent !important;

    color:white !important;

    border-color:#ca0606 !important;

    }

    Thanks in advance

Viewing 3 replies - 1 through 3 (of 3 total)
  • Rynald0s

    (@rynald0s)

    Automattic Happiness Engineer

    Hi @morganelite!

    The following is the the CSS code I tried inserting into the existing CSS code used to change the color of all the WooCommerce buttons

    The code you added is not to change the color. It seems to be for aligning the text only.

    Can you please tell us what exactly you would like to achieve, and also link us to your site, thanks.

    Cheers!

    Thread Starter morganelite

    (@morganelite)

    Thank You – I recreated the page in elementor and deleted the page created by WooCommerce.

    Thread Starter morganelite

    (@morganelite)

    Resolved

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

The topic ‘Centering WooCommerce Checkout Buttons ONLY’ is closed to new replies.