Need to find out how to edit the WooCommerce Cart web page?
WooCommerce is a superb device for constructing eCommerce web sites. It’s straightforward to arrange, tremendous extensible, and extremely scalable. As quickly as you put in it in your WordPress web site, it guides you thru the setup course of and even generates the important eCommerce pages with out you having to create them from scratch.
Regardless of its many positives, there’s a whole lot of room for enchancment. For instance, cart abandonment is a typical downside that almost all eCommerce companies encounter as a result of the design of the Cart web page just isn’t centered on conversions.
Fortuitously, there are a selection of how to increase the conversion fee and scale back cart abandonment in a WooCommerce retailer.
On this article, I’ll present you the actual steps you want to take to enhance the design and performance of your WooCommerce Cart web page.
Let’s dive into the tutorial.
How to Edit the WooCommerce Cart Page
There are a few methods to edit and customise the WooCommerce Cart web page.
You should use the default WooCommerce blocks, WordPress web page builders, or third-party WooCommerce plugins, or you’ll be able to add CSS code manually to customise the web page.
Sadly, these strategies usually are not at all times environment friendly and may find yourself inflicting extra bother than they’re fixing.
As an illustration, customized CSS codes can break your website, web page builders and different plugins can sluggish your website down, and you are able to do solely a lot with the default WooCommerce blocks.
Nevertheless, a well-designed eCommerce plugin comparable to Botiga Professional has been constructed to add highly effective options to WooCommerce shops whereas making certain quick loading pace.
On this tutorial, I’ll present you the way to use Botiga Professional to make customizations which can be confirmed to scale back cart abandonment and increase gross sales. We’ll be finishing up the following steps:
- Enhancing the Cart web page format
- Displaying an off-canvas facet mini cart
- Permitting clients to enhance the product amount in the mini cart
- Displaying a floating mini cart icon
- Displaying a ‘Proceed Buying’ button on the Cart web page
Let’s begin with putting in Botiga in your WordPress website.
1. Set up the Botiga Theme
Botiga is a free WooCommerce theme, whereas Botiga Professional is a premium plugin. To give you the option to use the plugin, you want to set up the free theme in your web site.
On this part, I’ll cowl how to set up the free theme, and in the subsequent one, I’ll present you the way to set up and activate the premium plugin.
First, obtain the free Botiga theme from the WordPress theme repository or our web site.
Then, go to your WordPress dashboard, navigate to Look → Themes → Add Themes, and add and activate the theme:
Alternatively, you’ll be able to go to Look → Themes → Add Themes, kind Botiga into the search bar, and set up and activate the theme:
2. Set up the Botiga Professional Plugin
Botiga Professional is a robust eCommerce plugin loaded with options that may rework your WooCommerce retailer for the higher.
After buying the plugin, obtain it to your native pc, go to Plugins → Add New, and add and set up the plugin:
Subsequent, you want to activate the license key which may be present in your aThemes account.
Go to your aThemes account and replica the license key.
Then, open your WordPress dashboard and navigate to Botiga → Settings → Normal → Botiga Professional License.
Insert the license key and click on the Activate button:
That’s it. By now, each the theme and plugin are activated in your WordPress website.
Nevertheless, earlier than I present you the way to edit the WooCommerce Cart web page, let’s take a fast have a look at the starter websites supplied by Botiga and Botiga Professional and why it’s your decision to import one into your WooCommerce retailer.
3. Import a Starter Website (Non-compulsory)
Starter websites are pre-made web site designs that may be imported into an present WordPress website.
It’s price noting that putting in a starter website just isn’t a prerequisite of Botiga (you may as well create an internet site design from scratch, utilizing the built-in theme choices), however I like to recommend that you simply import one, because it’ll enhance your WooCommerce retailer considerably.
Botiga starter websites come geared up with clear, skilled designs and pre-built pages which can be important for your enterprise. With Botiga Professional, you get entry to a number of starter websites concentrating on numerous eCommerce niches, together with magnificence, attire, furnishings, jewellery, and others.
You possibly can preview the designs by going to Botiga → Starter Websites and clicking the Preview button that seems on the thumbnail of every website.
Select the starter website that you simply like the most, then click on the Import button:
As quickly as you click on the Import button, a popup will seem asking you to select whether or not you need to import the whole web site (together with all the photos) or simply the format with placeholders for the content material parts.
By default, Botiga imports all the widgets, Customizer settings, and pictures of the starter website, however you might have the choice to deselect any of these in case you don’t need to import them.
When you’re executed, click on the Subsequent button and the import course of will start:
Be aware that it’ll take Botiga a couple of seconds to import the starter website.
4. Edit the WooCommerce Cart Page
Now, let’s see how to make the most of Botiga’s built-in Cart web page options to scale back cart abandonment and increase your conversion fee.
The very first thing you want to do is go to Look → Customise → Cart:
You’ll discover that a few of the choices in the Cart panel are already enabled. Maintain them as they’re and proceed to allow or modify the following options:
i. Enhance the Cart Page Format
The first goal of a Cart web page is to transfer clients to the subsequent stage of the gross sales funnel, which is the Checkout web page.
One among the finest methods to gently nudge guests to transfer to the checkout is by exhibiting the checkout button in a distinguished place on the Cart web page.
Nevertheless, the default WooCommerce Cart web page shows the checkout button underneath the merchandise. This implies clients have to scroll down to see it:
With Botiga, you’ll be able to change the location of the button to the proper facet of the web page, which extremely improves its visibility:
All you want to do is go to Look → Customise → Cart and underneath the Format heading, choose the second format:
Be aware that this can be a function of the free Botiga theme, due to this fact it’s additionally accessible with out Botiga Professional.
ii. Show an Off-Canvas Facet Mini Cart
A mini cart is a pop-up window that seems on the display when a buyer clicks the cart icon in the menu:
Including a mini cart to your WooCommerce retailer encourages clients to go straight to the Checkout web page.
In the Cart panel in the Customizer, go to Mini Cart Type and choose the second format, as proven in the picture under.
Then, make it possible for the ‘Open on Ajax Add to Cart’ button is toggled on. This can permit guests to add merchandise to the mini cart with out having to reload the whole web page and inflicting disruption to the purchasing expertise:
Then, click on the Publish button and examine the design of your website’s mini cart:
Vital: For the Ajax Add to Cart choice to work on the mini cart, you want to have the default WooCommerce Ajax Add to Cart choice enabled.
To take action, go to WooCommerce → Settings → Merchandise → Add to cart behaviour, examine the ‘Allow AJAX add to cart buttons on archives’ choice, and save your adjustments:
iii. Permit Prospects to Improve the Product Amount in the Mini Cart
Permitting clients to enhance the product amount in the mini cart will assist increase your retailer’s gross sales.
All you want to do is toggle on the Mini Cart Amount choice in the Cart panel in the Customizer:
Right here’s how the mini cart seemed on our demo website earlier than enabling the Mini Cart Amount choice:
After enabling the choice, the mini cart appears to be like like this:
iv. Show a Floating Mini Cart Icon
As the title suggests, a floating mini cart is a cart icon that floats on the display and encourages clients to go to the Cart web page:
So as to add a floating mini cart icon to your WooCommerce retailer, open the Cart panel and ensure the second type is chosen underneath Mini Cart Type.
Then, toggle on the Floating Mini Cart Icon choice and proceed to configure the icon by clicking the Floating Mini Cart Settings button:
New choices will seem in the Customizer the place you’ll be able to select a mini cart icon, set its show guidelines, and modify its type (e.g. shade, background shade, border radius, shadow, and many others.), dimension, place, and distance from the nook of the web page:
v. Present a ‘Proceed Buying’ Button on the Cart Page
As I discussed earlier than, the major goal of the Cart web page is to transfer clients to the Checkout web page.
Including a ‘Proceed Buying’ button to the Cart web page might seem to be contradictory recommendation — nevertheless it’s identified to considerably enhance the conversion charges for some WooCommerce shops.
So I extremely advocate that you simply experiment with a Proceed Buying button. Allow it in your retailer and see if it improves your conversion fee.
So as to add a Proceed Buying button to your Cart web page, go to the Cart panel in the Customizer, toggle on the Show Proceed Buying Button choice, and proceed to modify the textual content of the button in case you really feel the want to:
Conclusion
Customizing your WooCommerce retailer’s Cart web page is an effective way to scale back cart abandonment and enhance your conversion fee.
Whereas there are a selection of how to customise the WooCommerce Cart web page, not each method will make a distinction in your income.
On this article, I coated 5 Cart web page customizations which can be confirmed to increase conversion charges:
- Use a horizontal format for the Cart web page to make the checkout button simpler to discover.
- Show an off-canvas facet mini cart that features a Checkout button.
- Permit clients to the enhance product amount in the mini cart.
- Present a floating mini-cart icon to encourage clients to transfer to the Cart or Checkout web page.
- Experiment with a ‘Proceed Buying’ button to see if it really works in your retailer.
With Botiga Professional, you’ll be able to implement all of those strategies simply — with out having to write any code.
It’ll take a couple of weeks to see any discount in cart abandonment and a rise in your conversion fee.
In the meantime, you probably have any questions on how to edit the WooCommerce Cart web page, tell us in the remark part under.
