Introduction
The checkout page is very important and final step in your customer shopping on your website.
A user responsive and friendly checkout experience is very crucial for reducing cart abandonment and increase the rate of conversion.
Redesign/customize WooCommerce checkout page without using the plugins allow for best control and optimized to your specific business need.
Know the WooCommerce Checkout Page
WooCommerce provide the fully functional checkout page but that page have very basic style and unnecessary fields that can slow down the process of checkout on your WooCommerce .
In this blog i will help to redesign the checkout page without installing plugin.Below you can add this css code in your website.
Â
Preparation for Adding CSS Code
Backing up your website is very important before making any changes. This ensures you can restore your site to its original state in case of any kind of errors.
CSS CODE
/* checkout page start */
/* Hide "Ship to a different address" section */
h3#ship-to-different-address,
.woocommerce-shipping-fields {
display: none;
}
/* Container style */
.woocommerce-checkout .woocommerce {
max-width: 900px; /* Increased maximum width */
margin: 0 auto;
padding: 20px;
background-color: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* Adjusting form fields and labels */
.woocommerce-billing-fields .form-row,
.woocommerce-checkout .woocommerce-billing-fields .form-row {
width: 50%;
padding-right: 39px;
padding-left: 39px;
margin-bottom: 20px;
display: inline-block;
box-sizing: border-box;
}
.woocommerce-billing-fields .form-row label,
.woocommerce-checkout .woocommerce-billing-fields .form-row label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #333;
}
/* Styling input fields */
.woocommerce-billing-fields .form-row input.input-text,
.woocommerce-checkout .woocommerce-billing-fields .form-row input.input-text,
.woocommerce-billing-fields .form-row textarea,
.woocommerce-checkout .woocommerce-billing-fields .form-row textarea,
.woocommerce-billing-fields .form-row select,
.woocommerce-checkout .woocommerce-billing-fields .form-row select {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
text-align: left; /* Ensure text starts from left */
box-sizing: border-box;
transition: border-color 0.3s;
}
.woocommerce-billing-fields .form-row input.input-text:focus,
.woocommerce-checkout .woocommerce-billing-fields .form-row input.input-text:focus,
.woocommerce-billing-fields .form-row textarea:focus,
.woocommerce-checkout .woocommerce-billing-fields .form-row textarea:focus,
.woocommerce-billing-fields .form-row select:focus,
.woocommerce-checkout .woocommerce-billing-fields .form-row select:focus {
border-color: #66afe9;
outline: none;
}
/* Adjusting button styles */
.woocommerce form .form-row.place-order button,
.woocommerce-checkout form .form-row.place-order button {
background-color: #F9E7E7;
color: black;
border: none;
padding: 12px 24px; /* Increased padding */
text-align: center;
display: inline-block;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
width: auto;
transition: background-color 0.3s, color 0.3s; /* Added color transition */
}
.woocommerce form .form-row.place-order button:hover,
.woocommerce-checkout form .form-row.place-order button:hover {
background-color: #f78da7;
color: black; /* Changed text color on hover */
}
/* Additional styles for table */
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
border-top: 1px solid #eee;
padding: 15px;
}
.woocommerce-checkout-review-order-table {
margin-top: 20px;
width: 100%;
}
/* Ensure order notes are displayed and below billing details */
#order_comments {
display: block;
width: 100%;
clear: both;
margin-top: 20px;
}
/* Adjusting payment methods */
.woocommerce-checkout-payment {
margin-top: 20px;
}
/* Adjusting headings */
.woocommerce h2,
.woocommerce-checkout h2,
.woocommerce h3,
.woocommerce-checkout h3 {
font-weight: 700;
font-size: 24px;
margin-bottom: 20px;
color: #333;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.woocommerce-billing-fields .form-row,
.woocommerce-checkout .woocommerce-billing-fields .form-row {
width: 100%; /* Full width on smaller screens */
margin-bottom: 15px;
padding-right: 0; /* Remove right padding on smaller screens */
}
.woocommerce form .form-row input.input-text,
.woocommerce-checkout form .form-row input.input-text {
padding: 10px;
}
.woocommerce form .form-row.place-order button,
.woocommerce-checkout form .form-row place-order button {
padding: 10px 16px;
font-size: 14px;
width: 100%; /* Full width button on smaller screens */
}
}
.et_pb_with_border {
position: relative;
border: 0 solid #3330;
}
info, .woocommerce .woocommerce-message {
display:none;
}
.woocommerce #payment #place_order, .woocommerce-page #payment #place_order {
color: black;
float: right;
background-color: #E6BEB6;
}
/* Apply styles to elements with the following classes */
.add_payment_method .checkout .col-2 .notes,
.woocommerce-cart .checkout .col-2 .notes,
.woocommerce-checkout .checkout .col-2 .notes {
clear: left;
padding-right: 39px;
padding-left: 39px;
}
/* Apply styles to h2 and h3 elements within .woocommerce and .woocommerce-checkout */
.woocommerce h2,
.woocommerce-checkout h2,
.woocommerce h3,
.woocommerce-checkout h3 {
font-weight: 700;
margin-left: 39px;
font-size: 24px;
margin-bottom: 20px;
color: #333;
}
/* Apply styles to elements with the class .input-checkbox within .form-row and .woocommerce form */
.woocommerce form .form-row .input-checkbox {
display: inline;
margin: 10px 8px 0 -2px;
text-align: center;
vertical-align: middle;
}
/* checkout end */
To implement this custom CSS code on your WooCommerce website, you need to follow these steps:
Access your WordPress Admin Dashboard:
Log in to your WordPress admin dashboard.
Navigate to the Theme Customizer:
Go to Appearance > Customize.
Add the Custom CSS:
In the Customizer, look for an option that says Additional CSS. Click on it.
Copy the entire CSS code you provided and paste it into the Additional CSS section.
Publish the Changes
After pasting the CSS code, click the Publish button to apply the changes.
Verify the Changes:
Go to your WooCommerce checkout page to ensure the CSS changes have been applied correctly.
