Elementor Pro comes with a WooCommerce Builder which you can use to create custom pages for WooCommerce. Before version 3.5, you could only use Elementor WooCommerce Builder to create custom templates for the following WooCommerce pages:
- Shop page
- Single product page
- Product archive pages
You had to install an add-on like JetWooBuilder to create custom cart page of WooCommerce. Now with the release of Elementor Pro 3.5, you can create custom cart page of WooCommerce — as well as checkout page and My Account page without installing an add-on anymore.
How to Create a Custom WooCommerce Cart Page in Elementor
Before getting started, make sure you have updated your Elementor Pro to version 3.5 if you haven’t done so. After updating, you will see three new widgets dedicated to WooCommerce:
- My Account
The method to creating a custom cart page, custom checkout page, and custom My Account page is a bit different to shop page, single product page, and product archive pages. Instead of from Theme Builder, you can create custom cart page, custom checkout page, and custom My Account page by directly editing them using Elementor.
In case you didn’t know, cart page, checkout page, and My Account page were generated automatically by WooCommerce when you installed it. You can find these pages by going to Pages -> All Pages on your WordPress dashboard.
There are two options to create a custom cart page, checkout page, and My Account in Elementor 3.5:
- By editing the existing pages
- By creating a new page
Option 1: Editing the Existing Page
If you prefer this option, go to Pages -> All Pages on your WordPress. Select the page you want to edit (i.e., cart page) and click Edit.
On the next step, click the Edit with Elementor button to edit the page with Elementor.
Once the Elementor editor opens, remove the existing widget and add the Cart widget.
Go to the settings panel to make the settings. You can make the basic settings on the Content tab. There are five settings blocks you can open here.
You can open this block to set the layout (one column or two columns). There is also on option to set the right column sticky if you prefer the two columns layout.
- Order Summary
You can open this block to set a custom text for the update cart button.
You can open this block to set a custom text for the apply coupon button.
You can open this block to set the cart totals section. You can set things like the label of the cart total, custom text of the update, shipping button, custom text of the checkout button — as well as the alignments of these elements.
Once done making the settings on the Content tab, you can then go to the Style tab to style up the components of the cart page you have set above. There are six blocks you can open here:
You can open this block to set the background of the cart, border width, border radius, padding, and margin.
You can open this block to set the text color of the cart title, typography (font size, font family, font style, and so on).
You can open this block to style up the forms on the cart (i.e., the coupon form). You can set things like the text color, typography, background, and so on.
- Order Summary
You can open this block to style up the order summary (product lists). There are many options you can set here. Like the typography, text color, the gap between rows, divider color and weight, remove icon color, and so on.
You can open this block to style up the total order column on the cart. You can set things like the gap between rows, typography, text color, divider color and weight, and so on.
- Checkout Button
You can open this block to customize the checkout button. You can set things like button text color, typography, border radius, and so on.
Once you are done styling up the cart, you can click the UPDATE button on the bottom of the settings panel.
Option 2: Creating a New Page
If you prefer creating a new page for the WooCommerce cart page, simply go to Pages -> Add New on your WordPress dashboard to create a new page. Give your page a title and click the Edit with Elementor button to edit the page with Elementor.
Once the Elementor editor opens, you can add the Cart widget. Next, go to the settings panel to make the basic settings and the stylings just like you did on option one above. Once you are done, click the PUBLISH button to publish the page.
After the page is published, you will see a dialog popup asking whether you want to set it as your WooCommerce cart page. Simply click the Save button to set it as the WooCommerce cart page.
Changing the WooCommerce Cart Page
In the future, you might want to create a new page for WooCommerce cart page. In Elementor, you can do so from the Site Settings panel. You can access this panel from the Elementor editor, regardless of what you are doing. Whether editing a page, theme builder template, or popup template. Simply click the hamburger icon on top-left corner (on the settings panel) and select Site Settings.
Click the WooCommerce on the SETTINGS block.
Select the page you want to use as the new cart page on the Cart dropdown.
Click the UPDATE button to apply the changes.
The Bottom Line
The WooCommerce Builder feature of Elementor allows you to create a WooCommerce-based online store with your own design. Creating a WooCommerce website using Elementor offers many advantages as Elementor also comes with a popup builder to create promotional banners and support integration with some CRM and email marketing services. Previously, you could only use Elementor WooCommerce Builder to create the custom templates for the shop page, single product page, and product archive pages. Today, with the release of Elementor Pro 3.5, you can also create a custom page for the cart page, checkout page, and My Account page. This is great as you can match these pages with your brand.