All Posts
Published: January 23, 2023
Introduction:
Customizing the appearance of your WooCommerce checkout page is a great way to create a seamless and branded shopping experience for your customers. While there are various plugins available for this purpose, you can achieve a personalized look without relying on additional plugins. In this article, we’ll explore how you can easily customize the default checkout styles for WooCommerce using simple CSS adjustments.
/*******STRUCTURAL LAYOUT*******/
/*WooCommerce Layout Structure*/
@media (min-width: 980px) {
/*Billing Detials Side*/
.woocommerce-checkout .woocommerce .col2-set, .woocommerce-checkout .woocommerce-page .col2-set {
float:left;
width: 55%;
}
/*Order Review Side*/
.woocommerce-checkout #order_review_heading, .woocommerce-checkout .woocommerce #order_review, .woocommerce-checkout .woocommerce-page #order_review {
float: left;
width:43%;
margin-left: 2%;
}
}
@media (max-width: 979px) {
/*Billing Detials Margin*/
.woocommerce-checkout .woocommerce .col2-set, .woocommerce-checkout .woocommerce-page .col2-set {
margin-bottom: 2em;
}
}
/*******LEFT SIDE*******/
/*Billing Details Headline*/
.woocommerce-account form h3:first-child, .woocommerce-checkout form h3:first-child {
display: none; /*This is my preference. You can remove this and use the margin-bottom style below instead*/
/*margin-bottom: 1em;*/
}
/*Form Container Styles*/
.woocommerce-checkout .woocommerce .col2-set, .woocommerce-checkout .woocommerce-page .col2-set {
background: white;
padding: 3em;
border-radius: 1em;
}
/*Form Field Title Styles*/
label, input, button, select, textarea {
font-size: 12px;
line-height: 1.7;
text-transform: uppercase !important;
font-weight: 500;
color: #4a4a4a;
margin-bottom: 0.5em;
}
/*Form Field Styles*/
input.text, input.title, input[type=email], input[type=password], input[type=tel], input[type=text], select, textarea {
border: 1px solid #d9d9d9;
border-radius: 5px;
background-color: white;
height: 4em;
}
.woocommerce-account form .form-row, .woocommerce-checkout form .form-row {
margin-bottom: 1em;
}
/*Form Field Dropdown Styles*/
.select2-container--default .select2-selection--single {
background-color: #fff;
border: 1px solid #d9d9d9;
border-radius: 5px;
height: 4em;
}
.select2-container .select2-selection--single .select2-selection__rendered {
line-height: 4em;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 100%;
position: absolute;
top: 1px;
right: 5px;
width: 25px;
}
.woocommerce-account form .payment_methods label, .woocommerce-checkout form .payment_methods label {
padding-left: 0px;
}
/*Form Field Focus Color Style*/
textarea:focus, input[type=text]:focus, input[type=password]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=date]:focus, input[type=month]:focus, input[type=time]:focus, input[type=week]:focus, input[type=number]:focus, input[type=email]:focus, input[type=url]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=color]:focus, .uneditable-input:focus {
border-color: #4e22e9; /*Change this to a color that best suits your design*/
box-shadow: none;
outline: 0;
}
/*******RIGHT SIDE*******/
/*Order Review Headline Removal*/
h3#order_review_heading {
display: none;
}
/*Order Review Container Styles*/
div#order_review {
background: white;
padding: 3em;
border-radius: 1em;
box-shadow: 0 0.5em 2em rgb(0 0 0 / 10%);
}
/*Remove Product and Subtotal Headlines*/
table.shop_table.woocommerce-checkout-review-order-table thead{
display: none;
}
table.shop_table.woocommerce-checkout-review-order-table {
color: black;
text-transform: uppercase;
font-size: 14px;
}
table th, table td {
border-top: none; /*Change to set a divider line if desired*/
}
/*Order Total Line Item Styles*/
tr.order-total {
color: #0049ff; /*Accent color for total if desired*/
background: #0049ff21; /*Accent background color if desired*/
}
/*Stripe Form Field Styles*/
.wc-stripe-elements-field, .wc-stripe-iban-element-field {
border: 1px solid #d9d9d9;
border-radius: 5px;
background-color: #fff;
padding: 15px;
}
input#wc-stripe-new-payment-method {
margin-right: 1em;
}
/* Place Order Button Styles*/
#place_order {
width: 100%;
color: #fff;
border: none;
box-shadow: rgba(0, 0, 0, 0.28) 0px 2px 8px 0px;
padding: 1.5em;
}
#place_order:hover {
color: rgba(255,255,255,0.5);
}
/*Sticky Order Review*/
#order_review {
position: -webkit-sticky;
position: sticky;
top: 150px;
z-index:99;
}
body {
overflow-x:visible;
}
/*******COUPON & ALERT STYLES*******/
.woocommerce-info, .woocommerce-message {
background-color: #f7f8fa;
color: #474747;
border: none;
}
.woocommerce-error, .woocommerce-info, .woocommerce-message {
padding: 1em;
}
form.checkout_coupon.woocommerce-form-coupon {
padding: 3em;
background: white;
border-radius: 1em;
margin-top: 0em;
margin-bottom: 2em;
}
/*Error Alert*/
.woocommerce-error {
background-color: #ff7e7e;
border: none;
color: #761f1f;
}
.woocommerce-error, .woocommerce-info, .woocommerce-message {
text-shadow: none;
}
/*******REMOVE ADDITIONAL INFORMATION FIELD*******/
/*Delete This To Show Your Additional Fields Section*/
.woocommerce-additional-fields {
display: none;
}
/*******OPTIONAL WOOCOMMERCE SUBSCRIPTION STYLES*******/
/*WooCommerce Subscriptions Styles*/
/*This is commented out. Simply delete the comment slash and asterisk to activate*/
/*tr.order-total.recurring-total {
display: table-row;
background: #0049ff21;
}
.first-payment-date {
font-size: 0.85em;
}
tr.order-total {
display:none;
}*/Customizing the WooCommerce Checkout with CSS:
With just a few CSS adjustments, you can transform the default WooCommerce checkout layout to align with your brand’s aesthetics. Let’s break down the provided CSS code and explain its purpose:
Structural Layout:
The CSS code begins by defining the structural layout of the checkout page. It specifies the width and positioning of the billing details side and the order review side, ensuring a visually balanced layout.
Left Side Customization:
Next, the CSS focuses on customizing the left side of the checkout page, which includes the billing details. It hides the headline, adjusts the form container styles, sets the font and field styles, and adds focus color styles for form fields.
Right Side Customization:
The code then moves on to customizing the right side of the checkout page, which contains the order review. It removes the order review headline, styles the order review container, removes the product and subtotal headlines, and applies styles to the order total line item and the Stripe payment form fields.
Coupon and Alert Styles:
The CSS includes styles for WooCommerce coupons and alerts, allowing you to customize their appearance by adjusting background colors, text colors, and borders.
Removing Additional Information Field: If you don’t require the additional information field on your checkout page, the code includes a section to hide it. You can remove this section to display the additional fields section.
Optional WooCommerce Subscription Styles:
Lastly, the code includes optional styles for WooCommerce subscriptions. These styles are commented out by default, but you can uncomment them to customize the appearance of recurring totals and payment dates if you are using WooCommerce Subscriptions.
Conclusion:
By leveraging the power of CSS, you can easily customize the default checkout styles for WooCommerce without relying on additional plugins. The provided CSS code allows you to adjust the layout, font styles, field styles, order review appearance, coupon and alert styles, and more. Take control of your WooCommerce checkout page and create a seamless and visually appealing shopping experience for your customers by making these simple CSS adjustments.