Let’s see how to create the WooCommerce Cart page with Elementor and the new Bew Cart & Checkout builder by making a custom and modern layout.
This is how a standard default cart page looks:
We’ll go for something like this instead:
Here’s what’s different:
- We’re adopting a two-column layout instead of the single full-width layout of the default template. This allows us to bring the “Cart totals” element up top so it is more visible on larger screens. but if you want you can change the layout anytime.
- We’re adding and recreating a new look on the product table section, getting on it a modern and clean design.
- Adding a new section on top with a title and product count.
- Adding an option to add or remove elements on the product table like, remove the link, name, price, quantity, and subtotals.
- Redesign the border design on the product table.
- Relocating and new look on the remove link option.
- Adding a dynamic plus/minus featured on the quantity, it uses ajax call, so you don’t need more page refreshed or extra update cart action.
- Relocating the apply code section from the product table to the cart total section. you can have the option to keep/show the standard apply code section.
- Creating a new shipping section.
- Each part of the cart is completely customizable, you can change styles, color, add or remove features and create your own unique cart page, which is combined with the styles of your website.
