Overriding the cart template safely

WooCommerce ships pre-coded templates for the shop, product, account, checkout and cart pages, and creates the matching WordPress pages on install. The cart template lives inside the plugin directory, so editing it in place is not an option: a plugin update will overwrite your work. WooCommerce instead expects you to copy the template into your theme and register support for it, for example from functions.php or a functionality plugin.

add_theme_support('woocommerce');

Use a child theme for this, particularly with a third-party theme, so theme updates leave your copy intact.

The file to copy is cart.php, found under the plugin's own folder:

/wp-content/plugins/woocommerce/templates/cart/cart.php

Opening it, the header comment spells out the override path directly:

/**
 * Cart Page
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/cart/cart.php. // highlight
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 3.8.0
 */

Recreate that path in the theme and drop the copy in:

/wp-content/themes/[your-theme]/woocommerce/cart/cart.php

You can also reach the same files through a hosting file manager or the WP File Manager plugin; its free tier covers everything described here.

The target layout

The default cart is single-column and full width:

The customized version below is what we're building:

Three things change. The layout becomes two columns, which frees the cart totals to sit at the top where they stay visible on large screens. A benefits block — free shipping, easy exchanges, customer support, security — is placed under the product list as reassurance. And a FAQ accordion sits below the products so customers get answers without leaving the page or contacting support.

Inserting the new markup

Benefits and FAQ go into the template after the cart's closing table tag:

</table>
<!-- Custom code here -->
<?php do_action( 'woocommerce_after_cart_table' ); ?>

What matters is placement, not the specific HTML you write for those blocks. With both in place the page holds every element we need:

Splitting the columns with flexbox

No extra wrapper markup is required — the existing structure already exposes two elements suited to a two-column grid: .woocommerce-cart-form and .cart-collaterals. Turning their parent into a flex container does the rest. Because other templates use the .woocommerce class as well, scope the rules to the cart page body class WooCommerce provides.

.woocommerce-cart .woocommerce {
  display: flex;
}

WooCommerce's own guidance is to drop these styles into the theme's style.css, though other WordPress approaches to overriding styles may be safer or more maintainable depending on your setup. The column split itself looks like this:


/* The table containing the list of products and our custom elements */
.woocommerce-cart .woocommerce-cart-form {
  flex: 1 0 70%; /* 100% at small screens; 70% on larger screens */
  margin-right: 30px;
}
/* The element that contains the cart totals */
.woocommerce-cart .cart-collaterals {
  flex: 1 0 30%; /* 100% at small screens; 30% on larger screens */
  margin-left: 30px;
}
/* Some minor tweak to make sure the cart totals fill the space */
.woocommerce-cart .cart-collaterals .cart_totals {
  width: 100%;
  padding: 0 20px 70px;
}

The result is a cleaner layout closer to what Amazon and other large stores use:

Establishing button hierarchy

WooCommerce styles every button identically — same size, same background — so nothing signals which action matters most:

Look at all that blue!

Recoloring the buttons fixes that. The "Proceed to checkout" button keeps its default blue to remain dominant, "Update cart" gets a grey background that recedes into the white page, and "Apply coupon" is reduced to a text link. The CSS below produces that ordering:

/* The "Apply Coupon" button */
.button[name="apply_coupon"] {
  background-color: transparent;
  color: #13aff0;
}
/* Fill the "Apply Coupon" button background color and underline it on hover */
.button[name="apply_coupon"]:hover {
  background-color: transparent;
  text-decoration: underline;
}


/* The "Update Cart" button */
.button[name="update_cart"] {
  background-color: #e2e2e2;
  color: #13aff0;
}
/* Brighten up the button on hover */
.button[name="update_cart"]:hover {
  filter: brightness(115%);
}

Here is the complete stylesheet for the design:

@media(min-width: 1100px) {
  .woocommerce-cart .woocommerce {
    display: flex;
  }
  .woocommerce-cart .woocommerce-cart-form {
    flex: 1 0 70%;
    margin-right: 30px;
  }    
  .woocommerce-cart .cart-collaterals {
    flex: 1 0 30%;
    margin-left: 30px;
  }
}


.button[name="apply_coupon"] {
  background-color: transparent;
  color: #13aff0;
}


.button[name="apply_coupon"]:hover {
  text-decoration: underline;
  background-color: transparent;
  color: #13aff0;
}


.button[name="update_cart"] {
  background-color: #e2e2e2;
  color: #13aff0;
}


.button[name="update_cart"]:hover {
  background-color: #e2e2e2;
  color: #13aff0;
  filter: brightness(115%);
}

Other routes into the cart

Template overrides and stylesheet overrides are one approach; WooCommerce hooks, the WooCommerce API and conditional tags can streamline customizations in cases this tutorial doesn't cover. Further starting points sit in the WooCommerce docs, including a set of pre-made snippets.