WooCommerce Checkout Font & Color

  • Resolved sebastianfuglsang

    (@sebastianfuglsang)


    3 years, 5 months ago

    Hi.
    How do I change the color & font of the WooCommerce checkout delivery page.
    I have been able to change the colors of the name inputs etc. but not the delivery and checkout overview section.

    Hope you can help

    Best Regards
    Sebastian Fuglsang
    // Nhordic

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Mirko P.

    (@rainfallnixfig)

    Hello @sebastianfuglsang,

    You can use some custom CSS to make it a little nicer and readable. Under Appearance > Customize > Additional CSS, you can add the following code:

    /* Change font style in checkout delivery tab */
.wcf-embed-checkout-form-two-step .woocommerce {
font-size: 1.3em;
background-color: #f4f4f4;
}
.wcf-embed-checkout-form .woocommerce-checkout .shop_table {
font-family: 'Verdana', sans-serif !important;
font-weight: 600 !important;
}
.wcf-embed-checkout-form .woocommerce-checkout #payment {
font-weight: 300 !important;
}

    If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools.com. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

    Thanks.

    Thread Starter sebastianfuglsang

    (@sebastianfuglsang)

    Thank you very much!
    I hope you can help me with 2 more things.

    Issue 1.
    I wish to change the color for the delivery point button (The purple button on picture)

    Issue 2.
    Is it possible to divide the delivery options into sections with a row between each other or something similar.

    Link to issue: https://ibb.co/27g42hp

    Best Regards
    Sebastian Fuglsang
    // Nhordic

    Mirko P.

    (@rainfallnixfig)

    Hi there,

    You’re welcome! and sorry for the delayed response here.

    Issue 1.

    You can try this CSS to change the delivery button color:

    .woocommerce-checkout input.button.alt {
background-color: #4540f9 !important;
}
.woocommerce-checkout input.button.alt:hover {
background-color: #6560f7 !important;
}

    Change the Hex value according to your liking.

    Issue 2.

    For this, which is not a basic CSS customization, I recommend consulting one of the WooCommerce Customizations Partners.

    Cheers.

    • This reply was modified 3 years, 4 months ago by Mirko P..
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘WooCommerce Checkout Font & Color’ is closed to new replies.