Woocommerce Cart Page Template

Posted onby admin

Simply turn on Menu Cart for your WooCommerce store and select which menu you’d like to display a WooCommerce cart in, or add a Cart items anywhere using the Menu Cart shortcode. Set the cart to display only on WooCommerce Shop pages or to only show if the cart contains products. Sep 05, 2019 The cart template file is called cart.php. But if we change it directly, all our work will be lost (overwritten) once we update the WooCommerce plugin. The update-safe way to do this is to copy the file we want to change to our theme folder and change this copy. WooCommerce detects the custom file and uses it instead of the default one.

The checkout page on your WooCommerce shop is where you get paid, so it’s important to get it just right.

The default configuration is pretty good, but you may need to customize it out of necessity, or to test for a higher conversion rate.

There are 2 ways to customize the page, with a plugin, or with custom code. We’ll go over both of those here.

Custom Checkout Template

Most customizations can be done using hooks and filters, but if you’d like to edit the markup on the checkout page, you can do that in a theme.

A word of warning: moving around the markup on the checkout page can cause problems with other plugins that use hooks and filters. I would not recommend removing any action hooks, or editing the markup aggressively.

According to the WooCommerce documentation, you can copy the checkout template to your theme by in a folder structured like this: woocommerce/checkout/form-checkout.php.

You can then customize form-checkout.php as desired, and it will load instead of the default template.

Customizing with CSS

CSS classes may change based on your theme or plugins, but the default classes are usually available.

You can customize these classes using custom CSS in a child theme, or the customizer. Here are the main high level tags, with classes and IDs you can use.

Example:

To see all classes on the checkout page, use a browser inspector.

Checkout Action Hooks

Action hooks can be used to add or remove elements from the checkout page.

There are 9 action hooks on the checkout page:

  • woocommerce_before_checkout_form
  • woocommerce_checkout_before_customer_details
  • woocommerce_checkout_billing
  • woocommerce_checkout_shipping
  • woocommerce_checkout_after_customer_details
  • woocommerce_checkout_before_order_review
  • woocommerce_checkout_order_review
  • woocommerce_checkout_after_order_review
  • woocommerce_after_checkout_form

There are also 7 additional hooks that may be available, depending on your layout:

Woocommerce
  • woocommerce_checkout_before_terms_and_conditions
  • woocommerce_checkout_after_terms_and_conditions
  • woocommerce_before_checkout_billing_form
  • woocommerce_before_checkout_registration_form
  • woocommerce_after_checkout_registration_form
  • woocommerce_before_checkout_shipping_form
  • woocommerce_after_checkout_shipping_form

Checkout Hooks Visualized

Woocommerce checkout page template plugin

It helps to get a visual idea of where the hooks are located.

Here’s the standard WooCommerce checkout page, using the Storefront theme.

Here are many of the various hooks you can use, visually placed on the checkout page above.

Action hooks are used to add markup to the page. For example, we can add a message to the customer about shipping details using the woocommerce_before_checkout_shipping_form hook.

That looks like this:

Woocommerce Checkout Page Template Edit

PluginCustomize

You can find documentation on all of the hooks here.

Moving, Adding, or Removing Checkout Fields

The easiest way to customize checkout fields is to use the Checkout Field Editor plugin.

This plugin provides a simple UI to move, edit, add, or remove any checkout fields. You can edit anything about the fields, including type, label, position, and more.

After installing and activating this plugin, you can visit WooCommerce => Checkout Fields to begin editing.

To edit a field, simply change the desired value and save. To add a field, click Add Field, and to remove, check the field and click Disable/Remove.

Custom Code

Custom code is a bit trickier, but if you only want to make a small edit without purchasing a plugin, here’s how you do it.

WooCommerce has several filters available to edit checkout fields, including woocommerce_checkout_fields, woocommerce_billing_fields, and woocommerce_shipping_fields.

You can use the woocommerce_checkout_fields filter to manipulate all the checkout fields.

Remove the billing phone number field

Add Shipping Phone Number Field

To edit a field, you can access the field attributes. For example, let’s change the placeholder for Zip to Postal Code.

Change Field Placeholder

Woocommerce Template Page

For more examples, view the WooCommerce documentation here.

WooCommerce Checkout Extensions

There are a variety of extensions available to customize the checkout page, here are just a few.

Page

This extension allows you to put a checkout form on the same page as your product, making it a one-step payment process.

Page Template Wordpress

The normal WooCommerce flow is: go to the single product, click add to cart, go to the cart page, then go to checkout. One page checkout allows you to change that to: go to the product page => checkout.

This extension allows you to add paid services or products at checkout. Examples would be, gift wrapping, priority boarding, setup services, and more.

This extension allows customers to use their social accounts to login at checkout, so they don’t have to create a new account manually.

It integrates with most major social networks, such as Facebook, Twitter, Google, and more.

This is not specific to checkout, but it can help purchase conversions. Show sale notification popups on your WooCommerce site with the Holler Box FOMO plugin.

Conclusion

Editing the WooCommerce checkout page is something you should do with care.

Sometimes your reason is a mandatory client request, other times you may have your own intuition as to what will work better. If you are making changes that aren’t critical to your business, just make sure to keep an eye on your conversions using a Google Analytics conversion funnel, or an A/B testing tool.

The last thing you want to do is make a change that will hurt your conversions instead of help them.