Would you like to fully customize the look and layout of your WooCommerce cart page? Sydney Pro’s Template Builder module includes a dedicated Cart widget that you can use inside Elementor, giving you complete control over the cart layout, styling, and content.
In this guide, you will learn how to replace the default WooCommerce cart with a fully custom cart page built with Elementor.
This feature is only available in Sydney Pro. To learn more about Sydney Pro, please go here.
1. Activate the Template Builder Module
Before you can use the Template Builder feature, you need to activate the module in the Theme Dashboard.
To do so, go to your WordPress admin area and navigate to Sydney > Theme Dashboard.
Once you’re on the Theme Dashboard page, locate the Template Builder module under the Do more with Syndey Pro section, and click the Activate button.
2. Preparing the Cart Page for Elementor
Navigate to your WooCommerce cart page. Go to Pages in your WordPress admin area, find the Cart page, and click Edit.
In the WordPress editor, remove the existing WooCommerce cart shortcode (`[woocommerce_cart]`) from the page content. This shortcode renders the default cart, and you will replace it with the Elementor-based cart widget.
Note: Optionally, change the page template to Elementor Canvas from the page settings. This removes the header and footer from the page, giving you a completely blank canvas. If you prefer to keep your site header and footer, leave the default template.
Once you’ve removed the shortcode, Click Edit with Elementor next to open the Elementor editor.
3. Add the Sydney Cart Widget
In the Elementor editor, locate the Cart widge under the Sydney Shop Elements category. Drag the Cart widget and drop it below your heading.
The Cart widget will display a fully functional WooCommerce cart that you can now customize.
4. Configure the Cart Widget Settings
With the Cart widget selected, use the Content tab in the Elementor panel to configure the following settings:
- Layout — Choose between a one-column or two-column layout. The two-column layout places the cart table on the left and the cart totals on the right.
- Order Summary — Options to show or hide the table header and the coupon code field.
- Cart Totals — Show or hide specific rows in the cart totals section, such as the subtotal, shipping, and total.
Note: If you’d want to customize the appearance of the cart, switch to the Style tab in Elementor where you have options to edit typography, colors, and backgrounds for the cart.
Once you are satisfied with the design, click Publish to save your changes.
5. Preview Your Custom Cart Page
Navigate to your cart page on the frontend to see your custom cart in action. Add a product to your cart and visit the page to verify that the layout, styling, and functionality all work as expected.
That’s it! You now have a fully custom WooCommerce cart page built with Elementor and Sydney Pro’s Template Builder module.
Next, would you like to customize your checkout page as well? Check out our guide on How to Build a Custom Checkout Page with Sydney Pro and Elementor for a similar step-by-step walkthrough.
