How to Create a Cart Page using Elementor

In this tutorial, I’ll take you through how to create a cart page using Elementor for your WooCommerce shop.

This article is part of my Elementor + WooCommerce series where I show you how to create an eCommerce shop using Elementor and WooCommerce.

In a previous tutorial, I showed you how to create a single product page and a products archive page using the Elementor Theme Builder. In this, we’ll be transforming the Astra-supported cart page layout to an Elementor layout with a hero section, customized cart details like quantity, slide-in (sidebar) menu cart, etc. 

We’ll also add custom (+) plus and (-) minus quantity buttons on our quantity fields on the cart page using a small code snippet.

Ps: Below is a step-by-step video tutorial you can follow along with.

Video: Create a Cart Page using Elementor

How to Create a Cart Page 

When you install WooCommerce, it comes with a Cart page, we won’t be working with that page so we’ll just delete it.

Start by going to your WordPress dashboard and clicking on Pages, find the Cart page and move it to trash, then permanently delete it.

create a cart page using Elementor

Add a new page and give it a name; Cart, click the Publish button then Edit with Elementor.

create a cart page using Elementor

In the Elementor editor, we are going to be adding a hero section first, which we’ll copy from the product archive page.

create a cart page using Elementor

Back on your Cart page, paste the Hero section, and click the Update button.

create a cart page using Elementor
create a cart page using Elementor

#1. Add a cart widget

After adding the hero section, the next thing to do is to add the Cart Summary.

For this, go to your Widgets area add a new container, add a Heading widget and in the Edit Heading section on the left, under Title, name it Cart Summary.

create a cart page using Elementor
create a cart page using Elementor

Back in your widgets area, add another container inside the one you just created, and then drag the heading widget to the first container.

05HazRrBSLyndC3hcwJg tCZCKjsL y30KS4qRedGGh8VaotUvnNpjpDtAsdFC96V 7gDrI9dnge6I8ltF24itpz Bws77vo7tARn2w2ZftiGnmly X2gUPEiCRvDvum2Y64yFiz5hXmQHg6Y7hT74C3yFoLvIJHn P29NdKAGhEma 7SQHXJsh mF1ZhQ

Select the main container and go to Advanced > Padding, unlink the values and add 40px at the top and 80px at the bottom.

Add a Cart widget from your widgets area to the second container.

fFF7s3QTeGdxp1bRRznZ3DEb s6b7q nSnTfomins8yjTex24msPf8uvLqkt o2Qbr3IJ 0WPx8QMK vT yFvAq1rAb8IIw90NE3CKPjtAP3x1ie5s KkRoRdqKnNUoKpVSsesAq2JBscVuxT eGisJT894DnGKCQEfAsocgbk7OuP YSViwyv4FBps3IQ

Note: The Cart widget gives you the option to use either 1 or 2 columns for your cart. That’s in the Edit Cart section on the left under Content > Layout. Here we are using 2 columns.

You can also use the Sticky right column option to stick your Cart totals column so that it stays visible when someone scrolls; this way, even if your clients add like twenty products to their cart and they have to keep scrolling down, they can still keep seeing their totals.

RKpdLw0bfYrYztoNKJ9DKkgY0jU9v oRAp1Qx3LDugBR66s08rnT0KZx bstqssVrtnzuPiriEwfUpFOKL3NHLdfXJmM nO3qqee0XAhrwG1YABlH uUSwYTfEecXIGGuC6VprInOLBEtAM7p1goIPQzfRnW8TrM8

The cart widget also has the Order summary section, the Coupon section; which you can deactivate if you don’t want it,  and the Totals section which you can customize to suit you, for example, you can change the section title, you can customize the buttons, etc.

VsDztNuQrOGnR5H0JWc6MmOjEFShuUKCZ3vZ 4vZ7bgu08XPIi8fnIZ3pRMOvqR qejkzriYqLS2trUH2vs5ohnocfO1bVdMQKmrHto5ByST1zCE59zCBXHXrscT4FtKfWQkUdlSJ7RZfpubHc yyVAcaPlB Y7RaGLvo2vN Bp2ofQtsQg3mmI4uQguAw

In the Edit Cart section on the left, go to Style and change the Background colour to white.

Down on the Links option, change the Radio button colour to yellow on Hover, and leave everything else on default.

Over to the Totals section, change the Titles & Totals colour to black and the Typography to Body text. On the Divider Total, leave the Color transparent and set the Weight to 1px.

Proceed to the Checkout button option and set the Typography to the body text, Text colour to white and Background colour to the secondary colour.

Set the Border type to solid and make its colour transparent.

On Hover, change the Text colour to black and the Background colour to yellow.

When you’re done with the styling, click the Update button.

AiFdhaXwszMfyLIcRzwKew0Xf9TW75Fh7TGnBiGOBx1f4j5PKamaTVH4kplN1o4Awbnqpmq87gFbKGUOoi9AC58W7iDfKd eRgwWjn5 l4t2pmDap19OR4AClR25

Let’s look at the Quantity field in the Cart summary section; we can make these fields more user-friendly by adding quantity buttons (plus and minus buttons) where a user can just add or subtract items and then update their cart.

To do this we need to add a child theme to our Elementor website, and then add a custom function to the theme and style it up the way we want.

#2. Adding a child theme

Back on your WordPress dashboard, go to Appearance > Themes, and click Add New

YTDxfDqV6v aaB

Since we are using the Astra theme, we can use the Astra child theme generator to get a child theme. 

You can just google the Astra child theme generator, and there you’ll be able to generate your child theme, you can even give it a custom name, and then you can generate it by simply clicking the Generate button and your theme will download as a zipped file.

teb6vbP4Ce YNwwiB2f1MySEnL0KI6Pxr3pnALn1RX4V0 KTBH1b9IVMNbfmFrDQEPXWbSApDBkhazb5AAccCr1sx2 9VcOfXFPNGlx0bLzVI6xcF6qhXCHHqLf8uN59Tnkiy eXN2oob74swqKLoano3HJt0VIAd5U PwmfWkaGk7OVtAZ4iN 0 p 9Nw

Back on the Add New Theme page, click the Upload Theme button then drag and drop your child theme there

aOB1nawSy0qmwwuQSOGvyDn7IK7NQkWhFKDeYZGHapcvpma496SrSsGOoYGZL305NWvJFvUtwB71gqAYkP1X8WO aB0gjzRFY7HMNz87zlS02VXNjIE51sFkOUOabPnKg
KY xZVydhL8KwNjzBDbYochB6b69O6MnXkSHx6H3hTAC2ETQhTUDWJdo9e7qib4Ah7eQ9ep0qdEmjVK5D1U i3qb1ik1t1v1o N6LV1hSCVFPfW8vDFSw06urgsx1Y h7hXkmSwW2vv5z1dbnBmZ1AQcOm4EbyZHAEVSx18Acm3GGqGBwO6YD7y TK bUA

#3. Adding a custom function

To add the custom plus and minus functions to your theme, go to Appearance on your WordPress dashboard, and select your theme; in this case, Astra Options then find the  functions.php file, then copy and paste the Plus & Minus buttons code snippet below. (Credit to Rodolfo Melogli at business bloomer for sharing the code snippet)

W7n1NnUqcBtltrvVYnSbktYncdz8A3ffCUweH kgKUdpneBShqopyZ5avbmPEle9TbUkziQBt43MIY0mkvrWV07tJgBsxsVEbAW4QSdbOqbFkUTwc5ud S7c 5IuEoNe6 7QdfT1137cpYhHTq4BqZaKvLaeonM R0KoBC2ZfflBsMTIO0JB5RD7S2LNSw
tdJAtK1MCELqVrCO7kIoWzmz iY9xfGGb9WWxvOSVX6cadks4xrihq39Qn5gG9jjM5a5zbb9RwXXIisvvskZxmg6Ed7vB6IBhfgenmreMBSvTCyXQNzf8u1VX fHFNe8ejhmy6nxNlzhmL7rljDZgdvsXwSn X1yc4
// 1. Show plus minus buttons
  
add_action( 'woocommerce_after_quantity_input_field', 'bbloomer_display_quantity_plus' );
  
function bbloomer_display_quantity_plus() {
   echo '<button type="button" class="plus">+</button>';
}
  
add_action( 'woocommerce_before_quantity_input_field', 'bbloomer_display_quantity_minus' );
  
function bbloomer_display_quantity_minus() {
   echo '<button type="button" class="minus">-</button>';
}

// -------------
// 2. Trigger update quantity script
  
add_action( 'wp_footer', 'bbloomer_add_cart_quantity_plus_minus' );
  
function bbloomer_add_cart_quantity_plus_minus() {
 
   if ( ! is_product() && ! is_cart() ) return;
    
   wc_enqueue_js( "   
           
      $(document).on( 'click', 'button.plus, button.minus', function() {
  
         var qty = $( this ).parent( '.quantity' ).find( '.qty' );
         var val = parseFloat(qty.val());
         var max = parseFloat(qty.attr( 'max' ));
         var min = parseFloat(qty.attr( 'min' ));
         var step = parseFloat(qty.attr( 'step' ));
 
         if ( $( this ).is( '.plus' ) ) {
            if ( max && ( max <= val ) ) {
               qty.val( max ).change();
            } else {
               qty.val( val + step ).change();
            }
         } else {
            if ( min && ( min >= val ) ) {
               qty.val( min ).change();
            } else if ( val > 1 ) {
               qty.val( val - step ).change();
            }
         }
 
      });
        
   " );
}

Note: If you are using Elementor cloud, you’ll find that the Theme Editor has been disabled. So to add a custom function you’ll need to add a plugin called WP Theme Editor, and this will enable you to edit your theme and add a custom function to it. 

You can deactivate and delete the WP Theme Editor plugin after using it.

After installing and activating your plugin, go to the Theme Editor still under Appearance, and in the editor, click on the functions.php file then copy and paste the Plus & Minus buttons code snippet. 

Ian3BBv5evzevLuOI6 XoPP3bobH42S4hiCdSv07jZRytU8mCAq9u99GDxoAy3wc5xG5u0FRsg8r nY9tMgc3W L4DXiSGpI9msFblaT7WLxkU1B7j1Bz

When you’re done adding your custom function, go back to the Elementor editor and reload the page and you should have the plus and minus buttons appearing in your Quantity field.

wEFprB4OHu4i86vhEB9Y9IoKl8OW1PhOpwsdP0vrwyE8g96Sv0bnWh8UZESNTWtMnkDGwXYO84fWItGhEiRnSCMBinOzhO7fpd27zE6KiMCUfdmFUqK0RTufNao0ridu7ZoccGdVhpB5gLtfP CfESXyR0kyLqMKffrgDgZMPmkWJyjdxRzpgtsrl4Gk w

Select the Cart widget and go to Advanced, down on the Custom CSS option, paste the CSS code that will customize the border and padding of the plus and minus buttons. And when you’re done click the Update button, and then preview.

JbhFyDrw6aOa3ZtPVGJGlwkyeD2ZFM CIrCIwNlJp5bJdSmzpMVtheswt UQtReHLVNTTyZHp15B9b9ANbZU4QQ13Z bYY535etwA8vnFJj2BIhx AaImIlSme3luhVIJtCAkbSbNIdWHsQAhx7JcbWk5S6
FI7PdzKBrmowI MSt9i sjMsq4feYDrOjX416nk3 yjHfXZJER6tfA2U0eG6aBfr9rTGb3SG4DD1IfEl375oEWvyCRIfQRjO6ur1 NicYdpQ09Ob9t1VP DhALitCXOF48OjnXwV pY4LjMQlvgME6EnBFAyRwmSf4pXxXAHPk5wrKTgdqXy92 u9KQcEw

Your plus and minus buttons should be ready and functional, and a user should be able to click the plus button to add items or the minus button to reduce/remove the items.

Assign Cart Page to WooCommerce Settings

Click on the hamburger icon(≡) in the upper left corner and go to Site Settings > WooCommerce, under Cart, select the Cart page you’ve created, then click the Update button.

vL6OyVD1NuXM6EtN8BrJR16eyXlzXW udgMWBBYLysAFIta4xXYeSSUbVD SfO8Dmc GBtMxnPzSQnQgIxOvD0WmVGSielGIUbvzs6IpWfe38MFMnXzHBuG5DZlslNWDKFDxwEG kBlxzH6I84gQ

kS6NVFMPeywQOztV5h pAqR4nC lMpCrxZ3odCG9JtwdUIJ1lF5hHZwjlM204BVD8Fusx8HwF 8QtfkXwShScTpIsQs8NzU9bGCHQm8hlpxo2aRl TFMiJJFgtNLoUyJn844FmjXwDnrQ m7mzsV6ZBIsB9qhZ2TeGa6x 7mQkpKkYMlb21snIIuSAyW A

IccAckc6ulbK sMrsZDizHPSOGl3NDwWsuukl8NA4wS CFRddUFyy3YDeed9Iui90UrCSBDZ9tKGrWsL7u pkvZLo3Ygr41YFjbH8p08hMArF7PpMxlYLzqzBCnxS2Jzw57x

Add Cart Page to Menu

Go to Appearance > Menus,  select your menu then add the cart page and drag it to just below the Shop page. 

When you’re done, click the Save menu button.

Back to your preview page, your cart page should be showing after you reload.

XlWCFKZFpZF2BQZcqjG8S1PF19Q1P 6RI0xyFe48ZzSsUBhdlA7ccKUINEjslqujGhOKytb7NCn8cN5lV2JHlhSl8GZEw AMTmyWcc9QlV4xftcb

Elementor Cart Page Responsive Settings

To make sure our cart page is fully responsive on all devices, exit the site settings and go to Responsive Mode at the bottom.

LkML alCJ uUesBGSJ9LEpBEPW4jv3bPineUpm tI6 O0yXBF8MMV8KHybNoks54FbwzAQE8C3eJUoa8zobZh7CpBVImXY6tEBmLiBzDeeKKG0WnmsaxucVmX lDeQek07YGtZbEWqVkKc YccI S0FzoWCz68EvP6foBwOa4 VrHA fA6Bz6FdaSEUH2w

Here, look at the devices (mobile and tablet) and make the necessary changes to the styling; paddings, margins, etc to ensure that they all appear as they should.

When you’re done customizing your cart page on all devices, click the Update button.

Adding Cart Widget to Header

To do this open up Theme Builder, go to the Header section and click on the header.

When it opens up in Elementor, drag the Menu Cart widget into the Header container.

Select the container and under Layout > Direction, select horizontal (), then drag the navigation widget and place it before the cart widget.

On the Justify content option, click to justify the items.

UqcITG6DWwkBonCvuonixmWj cj1FgiEXQ74yHA1RZrzr6m7LEkJ4pdVFdAQC5O9SiqyQV6yCAnBpRsG7GAfWyKvcU7N45pZVAvJr 6RhprzePRICOMWKwcioy48VYGl9VIqq 7PJ3AJJZ9RiugG6mBoDXctMLLhIwSv1sK7dTdd6jcn0b39Z9A1n r3Q

When you select the Menu Cart widget, under Content > Menu Icon, you can choose which icon option you want, in this case, we’ll just leave it at Cart Medium, and you can choose a Bubble as the Items Indicator.

3YjyNVYD7jlFdf4AUVz8L1Bjw7me1wT3OPQjld6duCQ5pKMWN 8hMqZjYC7COgpCxR RdSoVv0wRAEp6Xe EDWTFesKLCbrHhj4RLDi 5c miH2c2NuTtEhNOkMaptjS5AaAeNKK9WjqzfqGpV83UWvalkoniBvYqCLozdj6sHYPgMeDzYEHv3RQVXCVw

Go to the Cart option, Cart type select side cart, and select Open cart on click. This way, when someone clicks on the Cart in the menu, it opens up on the side. Leave everything else on default.p8J8JsapPaE 2um ylaFmjRzN2JD9xV4GPeOkvfXSNWhojmfk o9Hm7WI6DVQHAe6gEwiU8IqSOG947 wAaox01dD41ijyCBSieZX3ZS93ParbVUaxEqbjBg yuPfIFQ IFottJa0uU2LnA5 CVqmTIFQHckdyuLqNZNu TF0jYCvNxw kTackCaCIv SA

Under Style;

Set the Text colour to black, Icon colour to blue (secondary).

Under Items Indicator set the Text colour to white and yellow for the Background colour.

Select the entire Header container and go to Advanced > Layout, under Z-Index add a 20. 

Be sure to go to Responsive mode and ensure the menu cart looks good on other devices; tablet and mobile, and make customizations to that effect where necessary.

When you’re done, click the Update button then preview your cart page.

Q1ge1yJtRcZeiz4eKicY12 DROg7naOulO5eCDipXM9Ritd8 1ctQKe 50NkSGx059XQZbBYvfLq6HlSWPgGAe41LnMYXFtdeqsEg56ge QACWzr 0GmQ0FWHw24Hm3IF6dF5rX7RiS FBf4G6EFyKcZt75AG0 f5c4Wd4to546a9WuRVrTmCtdd4ullFQ

In conclusion

That’s how you can use Elementor to create a cart page and customize it to suit your WooCommerce shop.

If you have any comments or questions please use the comments section below. Don’t forget to subscribe to my newsletter and Youtube channel for more tips and tutorials.

Also Read. . .

6 Best SCUM server hosting services

If you are an avid survival gamer and are thinking of venturing into the intense world of SCUM, then you know that having the right server may either make or break your gaming experience.  The

Read More »
Newsletter Subscription (EF)
Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users