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.
Add a new page and give it a name; Cart, click the Publish button then Edit with Elementor.
In the Elementor editor, we are going to be adding a hero section first, which we’ll copy from the product archive page.
Back on your Cart page, paste the Hero section, and click the Update button.
#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.
Back in your widgets area, add another container inside the one you just created, and then drag the heading widget to the first container.
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.
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.
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.
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.
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.
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.
Back on the Add New Theme page, click the Upload Theme button then drag and drop your child theme there
#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)
// 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
