Hi @vinifrozi,
How to make the edges of boxes rounded.
The boxes should already be rounded by default. If you need to make them square or change how much round to make them, you can do so with CSS code. Here is an example to make all borders square:
@media (min-width: 750px) {
/* Progress bar */
body.has-checkout-layout--multi-step .fc-progress-bar .fc-progress-bar__inner {
border-radius: 0;
}
/* Express checkout */
body.has-checkout-layout--multi-step .fc-wrapper .fc-express-checkout__inner {
border-radius: 0;
}
/* FIRST step */
body.has-checkout-layout--multi-step .fc-checkout-step:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
/* LAST step */
body.has-checkout-layout--multi-step .fc-checkout-step:last-child {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
/* PREV Complete */
body.has-checkout-layout--multi-step .fc-checkout-step.fc-checkout-step--prev-step-complete {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
/* NEXT Complete */
body.has-checkout-layout--multi-step .fc-checkout-step.fc-checkout-step--next-step-complete {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
/* NEXT Incomplete */
body.has-checkout-layout--multi-step .fc-checkout-step.fc-checkout-step--next-step-incomplete {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
/* CURRENT step */
body.has-checkout-layout--multi-step .fc-checkout-step[data-step-current]:not( [data-step-index="0"] ),
body.has-checkout-layout--multi-step .fc-checkout-step:not( [data-step-complete] ) {
border-radius: 0;
}
/* Order summary */
body.has-checkout-layout--multi-step form.woocommerce-checkout .fc-wrapper .fc-checkout-order-review .fc-checkout-order-review__inner {
border-radius: 0;
}
}
How to change the checkout background color that is currently white.
There is a new feature to be released with the next update (1.4.2) that will allow you to change the background color o the checkout page. The new color will be applied to the <body> element and it might not work will all themes.
The version 1.4.2 will be released in January. If you prefer to do it now with CSS, use the example below and change the color to what you like:
body.woocommerce-checkout {
background-color: #f3f3f3; /* light grey */
}
Best,
Diego
