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.
/* Common Colors */
:root {
--primary-color: #0055ff;
--primary-color-light: #0055ff30;
--background-color: #f7f8fa;
--text-color: #474747;
}
/*******GLOBAL STRUCTURAL LAYOUT*******/
.woocommerce {
display: flex;
flex-direction: column;
}
/* WooCommerce Layout Structure */
@media (min-width: 980px) {
/* Billing Details 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 Details Margin */
.woocommerce-checkout .woocommerce .col2-set,
.woocommerce-checkout .woocommerce-page .col2-set {
margin-bottom: 2em;
}
}
/*******LEFT SIDE DESIGN*******/
/* Form Container Styles */
.woocommerce-checkout .woocommerce .col2-set,
.woocommerce-checkout .woocommerce-page .col2-set {
background: white;
padding: 1em 2em;
border-radius: 1em;
border: 1px solid #e4e4e4;
}
.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-2 {
float: left;
width: 100%;
}
/* Form Field Title Styles */
label,
input,
button,
select,
textarea {
font-size: 12px;
line-height: 1.7;
text-transform: uppercase !important;
font-weight: 500;
color: var(--text-color);
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: var(--primary-color) !important;
box-shadow: none;
outline: 0;
}
.radio input[type=radio],
.checkbox input[type=checkbox] {
top: 0px;
}
/*******RIGHT SIDE DESIGN*******/
/* Order Review Headline Removal */
h3#order_review_heading {
display: none; /*Remove This if You Want The Order Review Heading*/
}
/* Order Review Container Styles */
div#order_review {
background: white;
padding: 2em;
border-radius: 1em;
box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.1);
position: sticky; /*Remove This if You Don't Want Order Review To Be Sticky*/
top: 100px; /*Remove This if You Don't Want Order Review To Be Sticky*/
}
/*Order Review Order*/
div#order_review {
display: flex;
flex-direction: column; /*Change this to column-reverse to reverse the order*/
}
/*Hide Cart Contents and Only Show Total + Shipping*/
.woocommerce-checkout-review-order tbody {
display: table-row-group; /*Set to "none" if you'd like to hide */
}
/* Remove Product and Subtotal Headlines */
table.shop_table.woocommerce-checkout-review-order-table thead {
display: none; /*Remove This if You Want Headlines*/
}
table.shop_table.woocommerce-checkout-review-order-table {
color: var(--text-color);
text-transform: Capitalize;
font-size: 14px; /*Adjust This To Adjust Order Review Font Size*/
}
.woocommerce table.shop_table {
border: none;
}
/* Target every other cart item and set background color */
tr.cart_item:nth-child(odd) {
background-color: #f7f8fa !important;
}
tr.cart_item:nth-child(even) {
background-color: white !important;
}
span.woocommerce-Price-amount.amount {
font-weight: bold;
}
strong.product-quantity {
background: var(--primary-color-light);
padding: 0.1em 0.5em;
border-radius: 0.5em;
font-size: 12px;
}
.woocommerce td.product-name .wc-item-meta p,
.woocommerce td.product-name .wc-item-meta:last-child,
.woocommerce td.product-name dl.variation p,
.woocommerce td.product-name dl.variation:last-child {
margin-bottom: 0;
text-transform: capitalize;
font-size: 12px;
font-weight: normal;
color: var(--text-color);
}
td.product-name {
width: 100%;
font-weight: bold;
}
td.product-total {
justify-content: flex-start;
display: flex;
}
table th,
table td {
border: none !important;
}
tr.cart-subtotal {
display: none; /*Remove this if you'd like to display the subtotal*/
}
tr.woocommerce-shipping-totals.shipping {
display: flex;
margin-top: 2em;
margin-bottom: 2em;
border-top: 1px solid var(--primary-color-light);
border-bottom: 1px solid var(--primary-color-light);
flex-direction: column;
align-content: stretch;
align-items: flex-start;
}
.woocommerce ul#shipping_method li input {
margin: 5px 5px 0 0;
vertical-align: top;
}
/* Order Total Line Item Styles */
tr.order-total {
color: var(--primary-color);
background-color: var(--primary-color-light);
}
#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
background: var(--background-color);
border-radius: 5px;
}
#add_payment_method #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
background-color: var(----primary-color);
color: black;
}
#add_payment_method #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before {
display: none;
}
/* 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;
}
fieldset#wc-authnet-cc-form .input-text {
height: 2em;
}
/* 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;
background: var(--primary-color); /* Change This to Change Button Color */
}
#place_order:hover {
color: rgba(255, 255, 255, 0.5);
}
/*******COUPON & ALERT STYLES*******/
.woocommerce-info,
.woocommerce-message {
background-color: var(--background-color);
color: var(--text-color);
border: none;
}
.checkout_coupon p.form-row.form-row-last {
float: none;
}
.checkout_coupon button.button {
background-color: var(--primary-color);
color: white;
}
/* Coupon Icon */
.woocommerce-info::before,
.woocommerce-error::before {
display: 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;
}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.