By: Irinel Tr
Reading time: 3 minute
In the world of e-commerce, a seamless and user-friendly checkout experience can make all the difference in boosting your sales. If you've ever admired Shopify's checkout page and wondered how to achieve a similar look and functionality on your WordPress website, you're in the right place. In this article, we'll walk you through the process of creating a Shopify-like checkout page using Woocommerce, Elementor Pro, and the free version of CartFlows.
Setting the Stage
- Access your WordPress Dashboard.
- Install and activate the Elementor Pro plugin along with the free CartFlows plugin.
Creating a Checkout Page
- Go to the CartFlows Dashboard.
- Select "Store Checkout" and opt to "Create a Store Checkout" from scratch.
- Edit and customize your checkout page as needed. P.S. You can also edit the Thank You page for post-purchase messaging.
Designing the Checkout Page
Design your checkout page as follows:
- Hide the page title and change the page layout to "Template for Page Builders" to remove any unwanted margins.
- Insert the CartFlows checkout widget, choosing the "Modern Checkout" style and "Modern Labels" for input fields.
- Make the background of the "Order Review" section transparent from settings.
- Add the following CSS code to the widget in Advanced > Custom CSS:
/*Floating product quantity and design*/
.cartflows-container strong.product-quantity {
border-radius: 100px;
padding: 2px 8px 2px 5px;
font-size: 12px;
font-weight: 600 !important;
min-width: 20px !important;
display: block;
margin-left: -20px;
background: #7F7F7F;
color: #fff;
position: absolute;
left: 25%;
top: 10%;
letter-spacing: -1px;
}
.product-name {
position: relative !important;
}
/*Disable cart quantity elementor cart*/
span.elementor-button-icon-qty {
display: none!important;
}
/*No cart double thumbnail*/
.elementor-menu-cart__main .wcf-product-thumbnail {
display: none;
}
/*Order review table adjustments*/
selector table.shop_table.woocommerce-checkout-review-order-table {
border: 0px !important;
box-shadow: none !important;
}
selector th, selector td {
padding-left: 5px !important;
}
selector #order_review tfoot tr td, #order_review tfoot tr th {
padding-top: 7px !important;
padding-bottom: 7px !important;
}
selector #order_review tbody td {
padding-top: 7px !important;
padding-bottom: 7px !important;
}
selector .wcf-product-thumbnail img {
border: 2px solid #d9d9d9 !important;
}
/*Hide overflow cartflows container*/
.cartflows-container {
overflow: clip;
}
/*Desktop and tablet*/
@media(min-width:769px) {
/*Customer info width adjustment*/
selector .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .wcf-customer-info-main-wrapper {
width: 57%;
padding: 0 85px 0 0 !important;
}
/*Prod image max width*/
selector .wcf-embed-checkout-form .woocommerce .wcf-product-image .wcf-product-thumbnail {
width: 70px !important;
}
/*Right column background*/
.wcf-order-wrap {
position: relative;
}
.wcf-order-wrap::before {
content: '';
display: block;
position: absolute;
top: -200%;
left: -30px;
width: 400%;
height: 400%;
background: #f9f9f9; /*here you setup the background color*/
border-left: 1px solid #e9e9e9; /*here you setup the border color*/
z-index: -1;
}
}
/*Mobile Adjustments*/
@media(max-width:767px) {
/*Floating product quantity and design*/
selector table.shop_table.woocommerce-checkout-review-order-table.cartflows_table strong.product-quantity {
padding: 1px 7px 1px 5px;
font-size: 10px !important;
left: clamp(70px, 27%, 85px) !important;
top: -4px !important;
letter-spacing: -1px;
}
/*Product image mag width*/
selector .wcf-embed-checkout-form .woocommerce .wcf-product-image .wcf-product-thumbnail {
max-width: 65px !important;
}
/*Product table - equalize height for floating order count */
selector .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout table.shop_table .cart_item:first-child .product-name, selector .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout table.shop_table .cart_item:first-child .product-total {
padding-top: 0px !important;
}
selector tr.cart_item:first-child {
border-top: 25px solid transparent;
}
}
/*Very small devices */
@media(max-width:335px) {
/*Display product count inline */
selector table.shop_table.woocommerce-checkout-review-order-table.cartflows_table strong.product-quantity {
left: 0px !important;
top: 0px !important;
position: relative !important;
margin: 0px !important;
}
}
Adding a Cart Icon
Enhance the cart icon section:
- Insert a cart icon and customize its appearance.
- Hide the checkout button (since we're already on the checkout page).
- Optionally, configure settings for item removal and auto-updates.
- Style the cart icon and its items as desired.
Mobile Optimization
Ensure a responsive design:
- Address mobile padding issues.
- Ensure a responsive header and layout.
- Resolve display issues with Google Pay and Apple Pay by adding this code into a HTML widget.
<script>
/* Move google and apple pay above the form */
document.addEventListener("DOMContentLoaded", function() {
// Get the elements by their IDs
var paymentRequestWrapper = document.getElementById('wc-stripe-payment-request-wrapper');
var paymentButtonSeparator = document.getElementById('wc-stripe-payment-request-button-separator');
// Get the target element by its class
var customerInfoMainWrapper = document.querySelector('.wcf-customer-info-main-wrapper');
if (paymentRequestWrapper && paymentButtonSeparator && customerInfoMainWrapper) {
// Prepend the elements to the target element (insert at the beginning)
customerInfoMainWrapper.insertBefore(paymentButtonSeparator, customerInfoMainWrapper.firstChild);
customerInfoMainWrapper.insertBefore(paymentRequestWrapper, customerInfoMainWrapper.firstChild);
}
});
</script>Congratulations! You've successfully transformed your Woocommerce checkout page into a Shopify-like experience that can greatly improve your customers' shopping experience.
With Elementor Pro and CartFlows, you've not only elevated the aesthetics but also enhanced the functionality of your checkout process.
Your online store now boasts a user-friendly, visually appealing checkout page that can potentially increase your sales. If you found this tutorial helpful, don't forget to like it, and feel free to leave any comments or questions below. Happy selling!
Share the article
Author: Irinel Tr