How To Set Woocommerce Cart Page

WooCommerce automatically creates a Cart folio when you lot install the plugin. The appearance of this Cart page is mostly dependent on your theme every bit WooCommerce does not offer much customization options for information technology. If yous are well-versed in coding, you can effort out some code snippets to change the appearance of the Cart page. In this article, we volition await at some of the possibilities to customize WooCommerce Cart folio.

How unlike themes display the Cart page?

According to the theme you choose, the default layout and the appearance of your Cart page will differ. The beneath screenshot displays how a default WooCommerce Cart folio looks like with Storefront.

Customize WooCommerce Cart Page — Storefront offers a simple Cart layout that has some room for comeback.

If yous're using the Twenty Twenty theme, the default appearance of the Cart page changes slightly.

And with 20 Twenty One, it looks quite dissimilar.

At present let's see a few ways to customize the Cart page using different free plugins.

Irresolute the layout of the Cart page

You lot can use the WooCommerce Blocks plugin to endeavour out a new Cart layout. First, get to the Cart page, and remove the default Cart block. So add together the Cart block from the WooCommerce Blocks plugin. The new Cart block is much more user-friendly than the default Cart layout of WooCommerce. The design is minimalistic and conversion focused with just one prominent push for checkout.

You tin can customize the page title also equally move the Cart block up and down, or drag and drop to suit its position when there are other blocks on the page. It is advisable to keep the Cart page ataxia gratis for a smoothen user experience.

Also, you can switch the preview between Total Cart as well every bit Empty Cart, and make more than modifications.

Let's first run across the options for full cart fashion. Select the Cart cake and access the cake settings sidebar. Here yous can enable or disable the shipping charge per unit figurer, evidence the revenue enhancement rate later the proper name of the taxation, and also change the style to suit night background colors.

Empty Cart page

For the Empty Cart page, there are multiple blocks including an image cake, a link to the store likewise as a product grid with the newest products.

With the block editor, you can easily change this folio. For instance, if you prefer a minimalist arroyo, y'all tin simply brandish a text like to the default WooCommerce Cart page along with a button to redirect customers to the Store page.

You can do it by only removing the existing blocks and by adding a new text block as well every bit a button block. Simply customize the text and the button, and you are washed.

Plugins to customize WooCommerce Cart page advent

Yous can also endeavour out some of the page architect add-on plugins, to customize the cart page templates co-ordinate to unlike requirements.

For example, Elementor add-on JetWooBuilder helps y'all with custom templates and layout switchers to hands mix and match elements.

With the Divi Shop Builder plugin, you can easily extend the features of Divi to customize Shop, Cart and Checkout pages.

If you are using WPBakery, WC Builder will assistance you lot build different WooCommerce pages including the Cart folio without using any code.

Calculation Custom Footer and Header

To provide a clean advent to your Cart folio, you may want to offer a custom header and footer to the cart folio different from your other pages. For this, you tin utilize the costless Elementor folio builder along with the Header, Footer & Blocks plugin. Let's do a quick sit-in.

Customize WooCommerce Cart Page

First, we will create a Cart header template. Go to Appearance > Header, Footer & Blocks, and click the Add New push button. Create a Cart Header template and assign it only to your Cart folio, and publish it.

This template volition assist you add a custom header manner to your Cart folio that is different from other pages.

After publishing the Cart Header template, you lot can edit it using Elementor to requite information technology a dissimilar appearance from your other page headers.

Similarly, you tin can create a Cart Footer template and assign custom style for it likewise.

Further styling options

Yous volition find a lot more styling options for the folio, if you are using a folio builder plugin similar Elementor. Also, with the WooCommerce customizer, you tin add additional CSS to add together farther styling.

More plugins to customize Cart features

Yous volition find several costless plugins in the WordPress repository to assist you lot customize Cart features. The WooCommerce Bill of fare Cart plugin helps yous display a Cart button on the navigation bar, which you tin can customize according to your store requirements.

WooCommerce Side Cart plugin offers an option to display Cart differently. Your users may discover it extremely helpful to have an accessible side cart while shopping.

The WooCommerce AJAX Cart plugin allows your customers to change Cart quantity without clicking the Update Cart push every time.

With the XT WooCommerce Floating Cart plugin, you can offer an undisturbed floating Cart to help your customers with a smoother shopping experience.

Check out the video version of this article below: