How to Install and Configure the Elementor WooCommerce Cart Widget

The new Cart Widget in Elementor allows you to fully customize your cart page, ensuring that it matches your brand and is optimized for sales.

It is now possible to customize Woocommerce cart using Elementor's visual interface. Previously, you had to rely on your WooCommerce theme to control the design, layout, and content of these key pages. Now, you can control the design, layout, and content of these elements directly from Elementor.

This tutorial will show you how to use Elementor's Pro new cart Widget to control and optimize your store's cart page without leaving Elementor.

How Does the Elementor Cart Widget Work?

The shopping cart in your store is an essential part of the user experience on your ecommerce website. Shopping carts make it easy for customers to save products that they are interested in and simplify the payment process for them.

You can use Elementor's visual design interface to fully customize your cart page to ensure it matches the rest of your store's branding and is set up to optimize sales with the new Cart widget.

Here are some examples of customizations you can make with the Cart widget:

Choose from a variety of cart layouts, such as one-column or two-column layouts.
Customize the colors and typography for each and every element in your cart.
Adjust the row gap between certain cart information, for example, to fine-tune the layout and spacing of each element.
Change the labels for important areas of your cart page, as well as the text for various buttons.
Customize the forms in your Cart, such as the coupon form and shipping rate calculator.

You'll also get special options to customize how your cart looks on different devices, as with all of your Elementor designs, allowing you to ensure that every shopper has a great experience, whether they're browsing on a desktop, tablet, or mobile device.

How To Use the Cart Widget in Elementor

Step 1. Edit Your Store’s Default Cart Page in Elementor

When you create a WooCommerce store, WooCommerce will generate a cart page for you that uses the WooCommerce cart shortcode.

For this tutorial, you will design a page based on an existing page. Instead of using your theme's default styling, you'll edit this page with Elementor to gain access to all of Elementor's design options.

To begin, navigate to your dashboard's Pages list and locate the Cart page. It should be labeled "Cart Page."

When you've found it, click the Edit button to bring up the WordPress editor. Then, within the editor, select Edit With Elementor to open the Elementor interface.

Step 2:Replace the WooCommerce Cart Shortcode With the Elementor Cart Widget

After you first open Elementor and navigate to your store's existing cart page, you'll notice the [woocommerce cart] shortcode in an Elementor Text Editor widget.

To begin, delete this existing widget/shortcode and replace it with Elementor's new dedicated Cart widget:

You can now begin customizing the design of your cart page.

Note: While you're working on your design, we recommend adding some items to your shopping cart so you can see what a "full" cart looks like. Otherwise, when you're working in Elementor, you'll see your cart empty.

You can accomplish this by going to your store's frontend, adding some items to your cart, and then reloading the Elementor interface. Those items should appear in your cart while you're working on your design after you reload Elementor.

If you ever want to see how a "empty" cart looks, simply remove the items from your cart on the frontend of your site and reload the Elementor interface.

Step 3: Set Up Layout of Your Cart

To modify the layout, design, and other behavior of your cart, open its settings in the sidebar and edit them as you would any other Elementor widget.

To begin, you can select a one-column or two-column layout from the Layout drop-down menu in the General settings. Using a two-column layout is beneficial because it brings the cart totals to the top, making them more visible when browsing on larger devices.

By enabling the Sticky Right Column toggle, you can also make the cart totals column sticky on scroll. You may also want to include an offset to ensure that this does not overlap with any other content.

Then, if necessary, use the Order Summary settings to change the text of the "Update Cart" button.

Similar options for adjusting the labels and alignment of various cart elements, such as the "Proceed to Checkout" button text, are available in the Totals settings.

You can also configure the WooCommerce shipping calculator feature in the widget's settings if you've enabled it. By going to WooCommerce Settings Shipping Shipping options and checking the box to enable the shipping calculator on the cart page, you can enable the shipping calculator in WooCommerce's settings.

Finally, in the Additional Options settings, you can enable automatic cart updates by flipping a switch. Rather than requiring shoppers to click the Update button to apply their changes, enabling this feature will automatically update the cart without requiring a page reload.

Step 4: Adjust The Styling of Your Cart

You can now customize the look and feel of your cart by going to the Style tab in the widget's settings. You'll find a variety of settings areas here, such as Sections, Typography, Forms, and more.

Here are the general style options available in each area:

Sections – You can customize the overall look of all three cart widget components. You can, for example, apply a background to the entire cart or add a box shadow.

Typography – You have some general typography and color control over key labels like titles, descriptions, links, and so on.

Forms – You can customize the styling of the coupon field form and the shipping fields form (if the shipping calculator is enabled on the cart page). You can, for example, use the Rows Gap setting to add some space between form fields.

Buttons – The Apply Coupon and Update buttons can be styled using any of the Elementor button styling options you're used to.

Order Summary – You can customize the look of the products in your cart and the order summary.

Totals – You have complete control over the design of the "Cart Totals" section, which displays the total cost of the shopper's order.

Checkout Button – You have complete control over the design of the checkout button. You'll want to make it visually appealing so that shoppers don't miss it, as this is the action you want them to take.

Customize – You have more control over the order summary, coupon, and totals. When you select these options, you will be given additional settings that are specific to those areas. For example, you could use this to differentiate your "totals" section from the rest of your cart by using a different background color, box shadow, border, and so on.

Step 5: Customize The Mobile Version Of Your Cart

Your cart will be mobile responsive by default if you use the Elementor Cart widget. However, just like with other Elementor widgets and designs, you can go in and manually adjust how your cart should look on different devices to create the best experience possible for every shopper.

To do so, open Elementor's responsive editing mode and look for device icons next to the settings that can be tweaked for different devices.

You can, for example, change the row gap depending on whether someone is using a desktop or mobile device, or you can change the font size of various elements.

Step 6: Adjust WooCommerce Settings in The Site Settings If Needed

This final step is optional, but it's worth noting that key WooCommerce page assignments can also be controlled from the Elementor Site Settings area.

For example, if you used Elementor to create a new page for your cart rather than editing the existing WooCommerce cart page, you could instruct WooCommerce to use your new page from the Elementor Site Settings.

These options are accessible via the WooCommerce tab of the regular Site Settings area. The WooCommerce option will be available under the Settings tab.

Create and Customize Your Cart page Without Leaving Elementor

You can now create and customize your cart page without leaving Elementor using the new WooCommerce Cart widget in Elementor Pro.

You can customize the design of each element, choose from different layouts, change the labels, and more using Elementor's settings. With this additional control over your cart page, you will be able to ensure a consistent design with the rest of your store and optimize your cart page to increase sales.

Furthermore, Elementor Pro now includes new widgets for key areas of your store, such as the checkout page and the My Account page. These widgets eliminate the need for WooCommerce shortcodes and provide you with greater control over your store than ever before.

All of these new widgets expand on existing WooCommerce Builder features, such as the ability to customize the WooCommerce single product page.

If you already have Elementor Pro and WooCommerce Builder, you can start using the Cart widget right away by following this tutorial. If you haven't already, upgrade to Elementor Pro today to get access to the new Cart widget, WooCommerce Builder, and all of the other great features.

Some Very Useful Links In Elementor

Find the Right Plan

Select your path to web creation

Make Your Business Shine Online

Create Entire WordPress Websites in a Flash

The Ultimate Website Builder For Marketers

Elevate Your Designs With ELementor Pro

Create Dazzling Product Sales Pages

Animate Everything on Your Websites

Revolutionizing The Way You Create Websites

The No. 1 WordPress Website Builder

Build Design and Manage Forms From One Place