Dorokhov.codes

Templates

WooCommerce uses a template system to control how various elements of an online store are displayed, such as product pages, cart, checkout, and emails. These templates are PHP files that WooCommerce loads to generate the front-end display.

WooCommerce Template Structure

WooCommerce templates are stored in the plugin directory under woocommerce/templates. They are organized into subdirectories, such as:

  • cart/ for cart-related templates
  • checkout/ for checkout-related templates
  • emails/ for email templates
  • single-product/ for individual product pages

Each template file corresponds to a specific part of the WooCommerce store, for example:

  • single-product.php for individual product pages
  • cart.php for the cart page
  • email-order-details.php for email order details

Overwriting WooCommerce Templates

To customize a WooCommerce template without modifying the plugin files (which would be overwritten during updates), follow these steps:

  1. Create a Theme Directory
    Go to your active theme (or child theme) directory, and create a folder named woocommerce if it doesn’t already exist.

  2. Copy the Template File
    Find the template file you want to customize in the woocommerce/templates directory. Copy it into the corresponding path inside your theme’s woocommerce folder. For example:

    • Original: woocommerce/templates/single-product/add-to-cart/simple.php
    • Custom: your-theme/woocommerce/single-product/add-to-cart/simple.php
  3. Customize the Template
    Edit the copied file in your theme folder to make your customizations. WooCommerce will automatically load your modified template instead of the default one.

  4. Check for Outdated Templates
    WooCommerce updates its templates periodically. If your customized template becomes outdated, WooCommerce will notify you in the admin panel. Compare the custom template with the latest version to ensure compatibility.

Checkout

The checkout templates are located in woocommerce/templates/checkout/.