How to Customize the WooCommerce Cart Page on a WordPress Site

Most e-commerce websites have some common pages: product pages, store pages that list products, and pages for user accounts, checkout processes, and shopping carts.

WooCommerce makes setting up these pages on a WordPress site very simple because it provides the corresponding templates and can create these pages directly. This allows you to easily start your store in minutes by setting up some product and payment processing details. WooCommerce is very practical in this regard.

But this article is not to praise WooCommerce's strengths. Instead, let's see how to customize part of it. Specifically, I want to take a look at the shopping cart. WooCommerce is extremely scalable because it provides a lot of filters and operations to hook, and a way to overwrite templates in WordPress themes. The problem is that these require at least some intermediate development skills and may not be feasible for some. And, at least in my experience, shopping cart pages are often the hardest to understand and customize.

Let's see how to change the WooCommerce cart page by implementing different layouts. Here is the look of the standard default cart page:

We will change to the following:

The difference is:

• We adopt a two-column layout instead of a single column full-width layout of the default template. This allows us to display the "Car Total" element more clearly on the large screen.
• We strengthen customer confidence by adding some benefits below the product list. This reminds customers of the value they earn on their purchases, such as free shipping, easy exchanges, customer support and security.
• We include a range of FAQs in accordion format below our product list. This helps customers get answers about their purchases without leaving and contacting support.

This tutorial assumes that you can access your topic file. If you are not familiar with logging into your host server and accessing the file manager, I recommend you install the WP File Manager plugin. Just use the free version and you can do all the things explained here.

First, let's create our own template

One of the many advantages of WooCommerce is that it provides us with pre-designed and coded templates. The problem is that these template files are in the plugin folder. If the plugin is updated in the future (which will almost certainly happen), any changes we make to the template will be lost. Since editing plugin files directly is a taboo in WordPress, WooCommerce allows us to modify them by copying them in the theme folder. This works as long as we do this somewhere in functions.php or the function plugin:

 <code>add_theme_support('woocommerce');</code>

When making such changes, it is best to use sub-themes, especially when using third-party themes. This way, when a topic update is published, no changes made to the topic folder are lost.

To do this, we first have to find the template we want to customize. This means going to the root of the site (where you save the site files if you work locally, which is a good idea) and opening the /wp-content of the WordPress installation location. There are several folders there, one of which is /plugins. Open it and jump to the /woocommerce folder. This is the home directory for all WooCommerce-related content. We need the cart.php file, which is located at:

 <code>/wp-content/plugins/woocommerce/templates/cart/cart.php</code>

Let's open the file in a code editor. The first thing you will notice is a few lines of comment at the top of the file:

 <code>/** * 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 */</code>

The highlighted line is exactly what we are looking for – instructions on how to overwrite the file! It was great that the WooCommerce team noticed this for us in advance.

Let's copy the file and create the file path they suggested in the topic:

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

Put the copied file there and we can start processing it.

Next, let's add our own markup

The first two things we can deal with are the benefits and FAQs we identified earlier. We want to add them to the template.

Where do we put our mark? To make the layout look like we showed at the beginning of this post, we can start below the end table of the shopping cart as follows:

 <code><?php do_action( &#39;woocommerce_after_cart_table&#39; ); ??></code>

We will not introduce the specific HTML that makes up these elements. It is important to know where the mark is placed .

After completing this we should get something like this:

Now we have all the required elements on the page. All that's left is to set the style so that we have two column layouts.

OK, now we can override CSS

We can add more tags to the template to create two columns. But the existing tags are well organized and we can use CSS to do what we want...this is thanks to flexbox!

The first step is to make the .woocommerce element a flex container. It is an element that contains all of our other elements, so it is a good parent element. To make sure we modify it only in the cart and not other pages (as other templates do use this class), we should limit the style to the cart page class, which WooCommerce also provides conveniently.

 <code>.woocommerce-cart .woocommerce { display: flex; }</code>

These styles can be placed directly in the style.css file of the theme. This is what WooCommerce suggests. However, remember that there are many ways to customize styling in WordPress, some are safer and easier to maintain than others.

In the .woocommerce element, we have two child elements that are perfect for our two-column layout: .woocommerce-cart-form and .cart-collaterals. The CSS we need to split the content is as follows:

 <code>/* 包含产品列表和自定义元素的表格*/ .woocommerce-cart .woocommerce-cart-form { flex: 1 0 70%; /* 小屏幕上为100%；大屏幕上为70% */ margin-right: 30px; } /* 包含购物车总计的元素*/ .woocommerce-cart .cart-collaterals { flex: 1 0 30%; /* 小屏幕上为100%；大屏幕上为30% */ margin-left: 30px; } /* 一些小的调整，以确保购物车总计填满空间*/ .woocommerce-cart .cart-collaterals .cart_totals { width: 100%; padding: 0 20px 70px; }</code>

This gives us a pretty clean layout:

It looks more like Amazon’s shopping cart pages and other popular e-commerce stores, which is definitely not a bad thing.

Best Practice: Make the Most Important Elements Stand Out

One problem I have with WooCommerce default design is that all buttons are designed the same way. They are the same size and background color.

There is no visual hierarchy for actions users should take, so it is difficult to distinguish, for example, how to update your cart with continuing checkout. What we should do next is to make this difference clearer by changing the background color of the button. To do this, we write the following CSS:

 <code>/* “应用优惠券”按钮*/ .button[name="apply_coupon"] { background-color: transparent; color: #13aff0; } /* 填充“应用优惠券”按钮背景颜色并在悬停时下划线*/ .button[name="apply_coupon"]:hover { background-color: transparent; text-decoration: underline; } /* “更新购物车”按钮*/ .button[name="update_cart"] { background-color: #e2e2e2; color: #13aff0; } /* 悬停时使按钮更亮*/ .button[name="update_cart"]:hover { filter: brightness(115%); }</code>

In this way, we create the following hierarchy:

1. Continue to checkout almost remains as it is, using the default blue background color to make it stand out because it is the most important action in the cart.
2. The Update Cart button gets a gray background that blends with the white background of the page. This reduces its priority.
3. "Apply Coupon" is more like a text link than a button, making it a less important of these three operations.

The full CSS you have to add to create this design is as follows:

 <code>@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%); }</code>

Summarize!

Not bad, right? WooCommerce is scalable, but without some common guidance, it can be difficult to know how much you can customize. In this example, we see how to override the plugin cart template in the theme directory to protect it from future updates, and how to overwrite the styles in your own stylesheet. We might also consider using WooCommerce hooks, the WooCommerce API, or even using WooCommerce conditions to simplify customization, but these may be suitable for later articles.

Meanwhile, enjoy the e-commerce experience on your custom WordPress website and spend some time in your WooCommerce documentation at any time – there are plenty of goodies out there, including pre-made code snippets of all kinds of things.

The above is the detailed content of How to Customize the WooCommerce Cart Page on a WordPress Site. For more information, please follow other related articles on the PHP Chinese website!