WooСommerce – template files and structure

In this article, I show you how to customize WooCommerce template files for your custom project.

WooCommerce template files contain the markup and template structure for frontend and HTML emails of your store. 

The main templates

• archive-product.php – the Template for displaying product archives, including the main shop page which is a post type archive
• content-product.php – the template for displaying product content within loops
• content-product_cat.php – the template for displaying product category thumbnails within loops
• content-single-product.php – the template for displaying product content in the single-product.php template
• content-widget-price-filter.php – the template for displaying product price filter widget
• content-widget-product.php – the template for displaying product widget entries
• content-widget-reviews.php – the template for displaying product widget entries
• product-searchform.php – the template for displaying product search form
• single-product.php – the Template for displaying all single products
• single-product-reviews.php – display single product reviews (comments)
• taxonomy-product_cat.php – the Template for displaying products in a product category. Simply includes the archive template
• taxonomy-product_tag.php – the Template for displaying products in a product tag. Simply includes the archive template

The template files related to display cart

• cart/cart.php – cart page 
• cart/cart-empty.php – empty cart page
• cart/cart-item-data.php – cart item data (when outputting non-flat)
• cart/cart-shipping.php – shipping methods display
• cart/cart-totals.php – cart totals
• cart/cross-sells.php – show products that cross-sell
• cart/mini-cart.php – contains the markup for the mini-cart, used by the cart widget
• cart/shipping-calculator.php – shipping calculator
• cart/proceed-to-checkout-button.php – contains the markup for the proceed to checkout button on the cart

The template files display the payment

• checkout/cart-errors.php – cart errors page
• checkout/form-billing.php – checkout billing information form
• checkout/form-checkout.php – checkout Form
• checkout/form-coupon.php – show coupon form on the checkout page
• checkout/form-login.php – show the login form
• checkout/form-pay.php – show pay for an order form
• checkout/form-shipping.php – shipping information form
• checkout/payment.php – payment section
• checkout/payment-method.php – output a single payment method
• checkout/review-order.php – review order table
• checkout/thankyou.php – display the thank page after payment
• checkout/terms.php – checkout terms and conditions area

The templates display the elements on all pages of Woocommerce

• global/breadcrumb.php – show breadcrumbs
• global/form-login.php – show login form
• global/quantity-input.php – product quantity inputs
• global/sidebar.php – show sidebar
• global/wrapper-end.php – show the end portion of the structure elements surrounding the site
• global/wrapper-start.php – show the start  portion of the structure elements surrounding the site

All the elements in the loop display products of Woocommerce

• loop/add-to-cart.php – the button add to the cart
• loop/loop-end.php – the element end loop, each card only <ul>
• loop/loop-start.php – the element start loop
• loop/no-products-found.php – displayed when no products are found matching the current query
• loop/orderby.php – show options for ordering
• loop/pagination.php – show numbered pagination for catalog pages
• loop/price.php – show price
• loop/rating.php – show the rating product
• loop/result-count.php – display the result count. Shows text: Showing x – x of x results
• loop/sale-flash.php – display the label SALE word on product when the product is discounted

The templates display the account in Woocommerce

• myaccount/dashboard.php – shows the first intro screen on the account dashboard
• myaccount/downloads.php – shows downloads on the account page
• myaccount/form-add-payment-method.php – add payment method form form
• myaccount/form-edit-account.php – Edit account form
• myaccount/form-edit-address.php – edit address form
• myaccount/form-login.php – login Form
• myaccount/form-lost-password.php – lost password form
• myaccount/form-reset-password.php – lost password reset form
• myaccount/lost-password-confirmation.php – lost password confirmation text
• myaccount/my-account.php – template display  My Account page
• myaccount/my-address.php – Template display My Address
• myaccount/my-downloads.php – shows downloads on the account page (Deprecated)
• myaccount/my-orders.php – shows orders on the account page (Deprecated)
• myaccount/navigation.php – My Account navigation
• myaccount/orders.php – shows orders on the account page
• myaccount/payment-methods.php – shows customer payment methods on the account page
• myaccount/view-order.php – shows the details of a particular order on the account page

Product card

• single-product/add-to-cart/external.php – external product add to cart template
• single-product/add-to-cart/grouped.php – grouped product add to cart template
• single-product/add-to-cart/simple.php – simple product add to cart template
• single-product/add-to-cart/variable.php – variable product add to cart template
• single-product/add-to-cart/variation-add-to-cart-button.php – single variation cart button template
• single-product/add-to-cart/variation.php – single variation display template
• single-product/tabs/additional-information.php – additional Information tab
• single-product/tabs/description.php – description tab
• single-product/tabs/tabs.php – single product tabs template
• single-product/meta.php – show product meta data: article, categories, product tags in the product card
• single-product/photoswipe.php – photoswipe markup
• single-product/price.php – show product price
• single-product/product-attributes.php – show product attributes. Used by list_attributes() in the products class
• single-product/product-image.php – show product image
• single-product/product-thumbnails.php – show Product Thumbnails
• single-product/rating.php – show product rating
• single-product/related.php – show related products
• single-product/review.php – review comments template
• single-product/review-meta.php – the template to display the reviewers meta data (name, verified owner, review date)
• single-product/review-rating.php – the template to display the reviewers star rating in reviews
• single-product/sale-flash.php – sale Flash template
• single-product/share.php – product share template. Sharing plugins can hook into here or you can add your own code directly
• single-product/short-description.php – product short description template
• single-product/stock.php – show product stock
• single-product/title.php – show product title
• single-product/up-sells.php – product up-sells template

Templates for working with orders

• order/form-tracking.php – order tracking form template
• order/order-again.php – show order again button
• order/order-details-customer.php – show Customer details
• order/order-details-item.php – show item details
• order/order-details.php – show order details table
• order/order-downloads.php – order downloads
• order/tracking.php – order tracking template

notices – the folder which contains the templates display notification.

emails – the folder which contains the templates displays the notification email.

How to edit files?

You have two upgrade-safe ways:

1. Using hooks.

Each template file contains hooks with which you can change/add or remove content without editing the template files themselves. This method protects against upgrade issues, as the template files can be left completely untouched.

2. Using overrides.

Copy the template into a directory within your theme named /woocommerce keeping the same file structure but removing the /templates/ subdirectory.

For example:

To override the admin order notification, copy: woocommerce/templates/cart/cart.php to wp-content/themes/yourtheme/woocommerce/cart/cart.php.

The copied file will now override the WooCommerce default template file.

Thanks for your reading. If you have any question with this blog, don’t hesitate leave a comment.