Introducing WooCommerce Cart & Checkout Customization
Customize The Entire WooCommerce Buying Experience, From Browsing Products Through Checkout
Today, we are excited to release 8 new Divi WooCommerce modules and the ability to customize your WooCommerce checkout page and your WooCommerce cart page using the builder and its full array of design options. Now you can control the entire user experience, from viewing a product all the way through its purchase.
The New Divi WooCommerce Modules
This update adds eight new modules to Divi. Each of these new modules represents a piece of the WooCommerce cart and checkout pages. When you build your cart or checkout page using Divi modules, you have full control over their appearance as well as the structure of the page. These eight new modules include:
- Woo Cart Products – This module displays the list of products that a user currently has in their cart.
- Woo Cart Totals – This module displays the current subtotal, shipping and total price for the products in a user’s cart.
- Woo Cart Cross Sells – This module displays cross sells and related products on the cart page.
- Woo Checkout Billing – This module displays the billing details form used during checkout.
- Woo Checkout Shipping – This module displays the shipping details form used during checkout.
- Woo Checkout Information – This module displays the additional information form used during checkout.
- Woo Checkout Details – This module displays order details, including the products being purchased and their prices, during checkout.
- Woo Checkout Payment – This module displays the payment type selection and payment form details during checkout.
Thanks to Divi’s Dynamic Framework and Dynamic CSS, these modules and their associated functions and assets are only loaded when you use them, so this update won’t affect your website’s performance!
Customizing Your Cart & Checkout Pages
When you enable the Divi Builder on a WooCommerce cart page or a WooCommerce checkout page, Divi automatically converts the page into a collection of new Divi modules using the eight new cart and checkout modules we added in this update.
You can fully customize their designs, move them around the page and combine them with other Divi modules to create a completely custom cart and checkout experience. Since these pages are composed of Divi modules, there are no limits to what you can do and each module is filled with a huge array of design options that allow you to customize everything about them.
Looking For Inspiration? Check Out These Examples!
Take A Look At Some Of The Amazing Designs Our Team Has Created Using These New Modules
Gone are the days of boring cart tables and bland checkout pages. Now you have complete freedom to unleash your design talent on WooCommerce. Just take a look at some of the beautiful cart and checkout pages that our design team created using this new feature.
Divi's New WooCommerce Modules Are Available Today!
The Divi WooCommerce update is available today, so update Divi and let us know what you think in the comments. Stay tuned for more great Divi features coming soon, and don’t forget to follow and subscribe so that you can be the first to know when our next Divi feature is released. I always give a detailed look into each feature and it’s a great way to get up to speed before you update your website. If you are running your websites on Divi, these are videos and posts you really don’t want to miss!
Join Or Upgrade Today For 10% Off!
Today's The Best Day To Get Divi Or Upgrade Your Account To Lifetime
Join the most enthusiastic and loving WordPress theme community on the web and download Divi today. Using the new Visual Builder, you can build websites faster than ever before with its incredibly fast and intuitive visual interface. You have to see it to believe it!
Join Today For 10% OFF!
Renew Your Account Today For 10% OFF!
Upgrade Your Account Today For 10% OFF!
For me we have shop cart and checkout when you follow the process , you can see after payment the problem for the message is not design. I dont know if it’s already to do , but i think a tutorial from the beginning it will be great. How to built page with woocommerce.
conclusion its great to have the module but I wait the next step
I am the happiest customer of the Divi and Extra Theme! You guys do a fantastic job!
Can we get the 4 layout samples? Would love to see how they did a few things.
This is absolutely awesome!! Where can I download it and how to make the amazing design you mad?
How can I get the examples demo?. Are the demo layouts available as json downloads? Or a Tuto to do it?.
Please release json for example #2
What a great update from Elegant Themes.
How do I customise the “order received” page after checkout? It has taken on the same design as the checkout page which means everything is squashed. Please help
This is amazing! Now we only miss one thing.
I can’t seem to find a good tool for it either, so now I’m just manually editing the thank you page.
Are there plans to make the order received page (Thank you) customizable as well?
Now when clicking through your demo’s those pages are also very weird. I know it’s something with Woocommerce that is hard to do but when this is possible with Divi it will be greater than other Woocommerce builders!
The checkout module is not syncing properly with woocommerce and stripe.
Orders show canceled in woo and completed in stripe dashboard.
Had to scrap the new checkout and go back to old.
Great additions, however when I go to check out on a new site I am building using the modules, despite all of the billing and shipping info being entered and payment selected it is popping up with multiple notices saying:
Billing First name is a required field.
Billing Last name is a required field.
Billing Country / Region is a required field.
Billing Street address is a required field.
Billing Town / City is a required field.
Billing State is a required field.
Billing ZIP Code is a required field.
Billing Phone is a required field.
Billing Email address is a required field.