It's the quest of all e-tailers: to increase sales but also the average shopping cart on the online shop... Good news, this tutorial will explain you how to create the design of your shopping cart page using the Divi Theme Builder... but not only!
You will also discover a trick to make the Internet user add products quickly, by eliminating all the useless steps that make your customer abandon his cart!
To do this, you will need :
- an already functional shop with WooCommerce
- Divi Theme Builder
- 2 extensions OR a child theme + 1 extension
- 1 - What is a WooCommerce shopping cart page?
- 2 - Composition of the Divi Classic Shopping Cart page
- 3 - Creating a Shopping Cart template with the Theme Builder
- 4 - Optimising the shopping cart page to increase sales
- 5 - Final result: a shopping cart page that converts!
Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.
1 - What is a WooCommerce shopping cart page?
The Shopping Cart page is the last step in the online shopping process, before payment.
It is automatically created when you install and set up the WooCommerce plugin on your WordPress site.
This free extension allows you to convert your website into an e-commerce site.
WooCommerce adds all the useful features to generate sales.
2 - Composition of the Divi Classic Shopping Cart page
The Shopping Cart page is essential to the online shopping process, as you can see... But its appearance obviously depends on the theme you use!
Here, we will talk about the Divi Theme, as you know...
In the screenshot above, you can see what the Classic Cart page looks like when you use WooCommerce with Divi without making any customisations.
I have to admit, it's not that great!
If you are not going to make any special customisations, at least consider removing the right sidebar, or optimising its content.
If you enable the Visual Builder on this Shopping Cart page, you can see that there is nothing but the shortcode [ woocommerce_cart ] that is generated by WooCommerce and that allows you to display the shopping cart functionality.
At this point, you may decide to use the Visual Builder, simply, to add other modules to your layout. This is a solution that works...
But I suggest you use the Divi Theme Builder. This will give you more options:
- Create a specific Header for this page, or even delete it so that the Internet user cannot navigate to other pages,
- Create a specific Footer,
Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE
3 - Creating a Shopping Cart template with the Theme Builder
Let's see how to create the Template of your Shopping Cart page via the Theme Builder :
- Go to Divi > Theme Builder
- Click on "+ Add a new template".
- Select the template to be used: Trolley (basket) then validate by clicking on "Create a template".
- Add a custom body
- Opt for "building a custom body".
You will then enter the interface for creating your layout. This layout will only work within your Shopping Cart page:
Do your own shopping but don't forget the essentials:
- Either you insert the Publish Content module : This module retrieves the existing content of your classic shopping cart page and allows you to change the design of the elements. With this module, you will be able to change the fonts, sizes and colours of the "shopping cart" functionality.
- Either you insert a text module in which you place the shortcode [ woocommerce_cart ]. In this case, you can't really influence the design.
For the rest, I trust your imagination 😉 ! If you lack inspiration, here is an example of a pattern:
- A text module that contains the title of the Shopping Cart page (H1). For example: "Your cart".
- An image: in this case, I used a text module in which I placed an emoji. Then I set the font to 100px and added an animation (rotation) which is not visible on this screenshot.
- A Woo Upsell module : This module allows you to display "upmarket" products. But I could also have simply inserted a shop module.
- A text module: here I have added an H2 "Checkout".
- The Publish Content module: this module dynamically retrieves the content present in the WooCommerce Classic Shopping Cart page, i.e. the shortcode that displays the shopping cart (seen previously).
This screenshot shows you the structure of the Shopping Cart page in "wireframe mode". It is easier to visualise:
- A Code module: I used a code module to add some CSS. It is an optional module. Learn more about the Code module.
- Save twice: save the layout from the interface and also in the Theme Builder so that your changes are taken into account.
Don't delay! Discover the Divi theme here !
4 - Optimising the shopping cart page to increase sales
In the previous chapter, you saw how simple it is to create the template for the Shopping Cart page. Now let's see how to optimise this page and improve the user experience.
On the screenshot above, you can see 2 variations of the Shopping Cart page, the one on the left corresponds to the one created in the previous chapter and the one on the right offers an opportunity to increase your sales!
Because, yes, the Shop, Woo Related Products and Woo Upsell modules offer to display the products but the user will have to visit the product page to be able to add it to his basket.
This solution then adds 2 extra steps. The more steps between selection and payment, the more likely you are to end up with a shopping cart abandonment!
I suggest that you remove these two steps so that the user can add a new item to their basket on a whim! Just before proceeding to payment!
4.1 - Add the "add to cart" button under the product image
First of all, you need to add the "Add to cart" button just under the product image and directly in the product page (without entering the product sheet).
To do this, you will need to add a piece of PHP code :
- Alternative 1: in a child theme. If you are already using a child themefile, simply add the following code to the file functions.php =>
// Add "Add to Cart" buttons in Divi shop pages add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );
- Alternative 2: Using the "Code Snippets" extension. This extension allows you to add PHP to your WordPress site without using a Child Theme. This extension is free, easy to use and is available here.
Once the extension is installed and activated, all you have to do is add the PHP code (the same one you put in the child theme):
The "add to cart" button is now present on all the pages of the site that offer products (loop page, archive page, shop page...).
The only difficulty is when your products are variable products: the "choice of options button will replace the "add to basket" button. In this case, the user will still be redirected to the variable product sheet. And the intermediate steps will not be eliminated...
4.2 - Add the "quantity" button under the product image
Secondly, an important feature is still missing: the possibility to choose the number of items to add to the basket. It's easy to do:
Go to the Extensions tab > Add and install the plugin Quantity Field on Shop Page for WooCommerce. This extension is free and does not require any configuration!
As soon as it is installed, the quantity choice button is available under your products in the shop page and the archive pages.
5 - Final result: a shopping cart page that converts!
This is what your optimized shopping cart page looks like:
Just above the "basket" functionality, 3 products are displayed (thanks to the Woo Upsell module) and the user can click on "add to basket" directly from the basket. This addition is done without reloading the page (in AJAX) and without leaving the basket to visit the product sheet.
This solution is essential to encourage impulse buying.
This should also increase the average basket and your turnover more sustainably!
But more than that, this solution greatly improves your customer's user experience: saving time and effort in finding the ideal products. So you have everything to gain!