How to Create and Customize WooCommerce Templates?

In this blog article, we will study how to create and customize WooCommerce templates for WooCommerce plugins.

Specifically, to build a truly distinctive WooCommerce store, you often need to move beyond theme settings and directly customize the templates that control your shop’s HTML output.

This guide explains safe and effective ways to customize WooCommerce templates, from simple overrides to advanced hook usage, helping you tailor your store’s frontend to match your exact vision.

Prerequisites & Development Setup

Before customizing templates, ensure you have:

– A solid understanding of WordPress, PHP, HTML, and CSS

– A local development environment (Local, XAMPP, or similar)

– A code editor (VS Code, PHPStorm, etc.)

– Crucially, a child theme activated – never modify theme files directly

Getting Started

To begin with, WooCommerce is a versatile e-commerce plugin for WordPress that makes it easy to sell products online.

As a result, by creating custom templates, you can control the layout, design, and functionality of your e-commerce pages.

Quick Child Theme Setup:

If you don’t have a child theme, create one with a `style.css` containing:

/*
Theme Name: Your Theme Child
Template: your-parent-theme
*/

And a basic `functions.php` with:

<?php
add_action('wp_enqueue_scripts', 'enqueue_parent_styles');
function enqueue_parent_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri().'/style.css');
}

Core Concept: The Template Hierarchy & Overrides :

To begin with, WooCommerce uses a template hierarchy that determines which file displays each page. The magic happens in this order:

1. Your child theme’s `woocommerce/` directory

2. Your parent theme’s `woocommerce/` directory

3. WooCommerce’s plugin templates (`wp-content/plugins/woocommerce/templates/`)

This means you can copy any template from the plugin to your child theme’s `woocommerce/` folder, modify it, and WordPress will use your version instead.

This method preserves your changes during WooCommerce updates.

Customizing Existing WooCommerce Templates

When it comes to template customization, it’s essential to adhere to best practices. 

In particular, we’ll explore techniques for making changes without causing compatibility issues with future updates of WooCommerce.

Template Customization:

However, Customizing WooCommerce templates requires adherence to best practices.

In particular, we’ll explore techniques for making changes without causing compatibility issues with future updates of WooCommerce.

Using Hooks and Filters:

Additionally, Hooks and filters are a part of WordPress’ core architecture.

It is designed to allow developers to modify and extend the functionality of themes and plugins without directly modifying their source code.

They serve as entry points where you can attach your own custom functions or code.

Hooks: Hooks are points in the WordPress code where you can insert your own custom code. There are two types of hooks: action hooks and filter hooks.

• Action Hooks: Action hooks allow you to execute custom code at specific moments in the WordPress lifecycle. Actions are used for performing tasks, such as modifying database records or sending emails.
• Filter Hooks: Filter hooks allow you to modify the data that is passed through them. Filters are used for altering the output or behavior of specific functions, allowing you to customize the content.

Using Action Hooks:

To use action hooks, you typically do the following:

• Identify the action hook that you want to hook into. For WooCommerce templates, common action hooks include woocommerce_before_single_product, woocommerce_after_cart, and many more.
• Use the add_action function to attach your custom function to the action hook. Here’s a simplified example:

function my_custom_action_function() {
    // Your custom code goes here
}

add_action('woocommerce_before_single_product', 'my_custom_action_function');

• Your custom function (my_custom_action_function in this case) will be executed when the woocommerce_before_single_product action is triggered.

Using Filter Hooks:

To use filter hooks, you typically do the following:

• Identify the filter hook that you want to hook into. Common WooCommerce filter hooks include woocommerce_product_price, woocommerce_order_button_text, and more.
• Use the add_filter function to attach your custom function to the filter hook. Here’s a simplified example:

function my_custom_filter_function($original_content) {
    // Modify $original_content as needed
    return $modified_content;
}

add_filter('woocommerce_product_price', 'my_custom_filter_function');

• Your custom function (my_custom_filter_function in this case) will be called when the woocommerce_product_price filter is applied to the content. You can modify the content and return the modified version.

How to Create a Template Override: Step-by-Step

Let’s override the single product template as an example:

1. Locate the original template: Navigate to `/wp-content/plugins/woocommerce/templates/single-product.php.`

2. Create the override path: In your child theme, create the folder structure: `/your-child-theme/woocommerce/.`

3. Copy and modify: Copy `single-product.php` to your new folder. Now you can safely edit this copy.

4. Clear the cache if needed and view your product page to see the changes.

Golden Rule: Always start with a direct copy of the original template. Modify only what you need.

Common Customization Use Cases :

We’ll address common customization scenarios, such as changing product layouts, adding custom fields, and creating unique checkout pages.

You’ll find practical examples and code snippets to guide you.

1. Customizing Product Layouts :

Scenario: You want to change the layout of product pages, such as moving the product title, price, or description to different positions.

Example: To change the layout of the product title and price, you can use the woocommerce_single_product_summary action hook.

For example, the following code snippet moves the price below the product title:

remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10);
add_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 25);

2. Adding Custom Fields to Product Pages

Scenario: You need to add custom fields to your product pages to collect additional information from customers.

Example: To add a custom text field to the product page where customers can enter a special message, you can use the following code:

// Display the custom field on the product page
function display_custom_product_field() {
    woocommerce_wp_text_input(
        array(
            'id' => '_custom_message',
            'label' => 'Special Message',
            'placeholder' => 'Enter a special message',
            'desc_tip' => 'true',
        )
    );
}

add_action('woocommerce_before_add_to_cart_button', 'display_custom_product_field');

// Save the custom field value to the product
function save_custom_product_field($product_id) {
    $custom_message = isset($_POST['_custom_message']) ? sanitize_text_field($_POST['_custom_message']) : '';
    update_post_meta($product_id, '_custom_message', $custom_message);
}

add_action('woocommerce_process_product_meta', 'save_custom_product_field');

3. Creating Unique Checkout Pages

Scenario: You want to create unique checkout pages for different products or product categories.

Example: You can create a custom checkout page for specific products using the woocommerce_checkout_init action hook.

For example, the following code redirects users. to a unique checkout page for a specific product (product ID 123). You can use the following code:

function custom_checkout_redirect() {
    global $wp;
    
    if (is_checkout() && !is_wc_endpoint_url('order-received')) {
        $product_id = 123; // Replace with the product ID you want to customize for.
        $product_in_cart = false;

        foreach (WC()->cart->get_cart() as $cart_item_key => $cart_item) {
            if ($cart_item['product_id'] === $product_id) {
                $product_in_cart = true;
                break;
            }
        }

        if (!$product_in_cart) {
            wp_safe_redirect(home_url());
        }
    }
}

add_action('template_redirect', 'custom_checkout_redirect');

This code checks if product ID 123 is in the cart. If not, it redirects users away from the checkout page.

In conclusion, these are just a few common customization scenarios for WooCommerce templates.

Therefore, depending on your specific requirements, you can leverage various hooks, filters, and customization techniques to achieve the desired layout, fields, and pages for your online store.

Template File Reference :

Exploring Essential Template Files :

In general, WooCommerce relies on a hierarchy of template files to render content on your site.

When WooCommerce loads a page, it searches for specific templates in your active theme directory.

If it doesn’t find a custom template, it falls back to the default WooCommerce templates. Understanding these templates is key to customizing your store.

Keep this as a quick reference for which template controls what:

Template File Reference Guide

Keep this as a quick reference for which template controls what:

Template File	Controls
single-product.php	Individual product pages
archive-product.php	Shop/category listing pages
content-product.php	Individual product in listings
cart/cart.php	Shopping cart page
checkout/form-checkout.php	Checkout process
myaccount/my-account.php	Customer account area
content-widget-product.php	Product display in widgets

Template Tags and Functions :

Additionally, WooCommerce provides a wide array of template tags and functions essential for developers seeking efficient solutions for template customization.

As a result, these tools simplify the process of working with templates, allowing you to create a seamless and unique eCommerce experience.

Here’s an overview of some of the most commonly used template tags and functions:

1. woocommerce_template_part()

• Role: This function lets you include template parts within your custom templates.
• Template parts are reusable sections of code. In this case, you can use it to structure your templates more efficiently.
• Example:

woocommerce_template_part('content', 'product');

This would include the content-product.php template part within your custom template.

2. wc_get_template()

• Role: Use this function to retrieve and display WooCommerce templates within your custom templates.
• It’s a versatile function that allows you to load templates based on their slugs.
• Example:

wc_get_template('single-product.php');

3. wc_get_template_part()

• Role: Similar to wc_get_template()This function loads specific template parts, making it easy to include snippets of code within your custom templates.
• Example:

wc_get_template_part('content', 'product');

4. woocommerce_template_loop_product_link_open() and woocommerce_template_loop_product_link_close()

• Role: As a result, these template tags are used within product loops to open and close the product link element. They help wrap the product’s content and make it a clickable link.
• Example:

woocommerce_template_loop_product_link_open();
// Product content
woocommerce_template_loop_product_link_close();

5. woocommerce_template_loop_product_title()

• Role: As a result, this tag outputs the product title in a product loop. It’s commonly used within loops to display the product name.
• Example:

woocommerce_template_loop_product_title();

6. woocommerce_template_loop_price()

• Role: As a result, this tag displays the product’s price in a product loop. It’s useful for showing the product’s pricing information.
• Example:

woocommerce_template_loop_price();

7. woocommerce_template_single_title() and woocommerce_template_single_price()

• Role: As a result, these template tags are used to display the product title and price on a single product page, making it easy to customize the layout of these elements.
• Example:

woocommerce_template_single_title();
woocommerce_template_single_price();

8. woocommerce_template_single_add_to_cart()

• Role: As a result, this tag generates the “Add to Cart” button on a single product page. In this case, you can use it to customize the button’s appearance and functionality.
• Example:

woocommerce_template_single_add_to_cart();

9. woocommerce_template_cart() and woocommerce_template_checkout()

• Role: As a result, these template tags allow you to insert the shopping cart and checkout templates into your custom templates, making it easy to create custom cart and checkout pages.
• Example:

woocommerce_template_cart();
woocommerce_template_checkout();

10. woocommerce_cart_totals()

• Role: As a result, this function displays the cart totals section, including the subtotal, shipping, and total price, on the cart and checkout pages.
• Example:

woocommerce_cart_totals();

In conclusion, these are just a few examples of the many template tags and functions available in WooCommerce.

As a result, by using these tools in your template customizations, you can streamline the process and create a more tailored shopping experience for your customers.

Whether you’re developing custom product pages, altering cart layouts, or enhancing the checkout process, these functions and tags are valuable resources for efficient template customization.

Internationalization and Localization:

Identify Text to Translate:

Initially, start by identifying all the text that needs to be translated within your custom WooCommerce templates.

Specifically, this includes product descriptions, cart labels, checkout messages, and any other customer-facing content.

Translate WooCommerce Strings:

Additionally, WooCommerce itself is translatable, and you can translate its strings via translation files; WooCommerce themes should be set up to load translations as well.

• In your theme’s functions.php file, you can load the WooCommerce text domain like this:

function load_theme_textdomain() {
    load_theme_textdomain( 'your-theme-domain', get_template_directory() . '/languages' );
    load_plugin_textdomain( 'woocommerce', false, plugin_dir_path( __FILE__ ) . 'languages' );
}
add_action( 'after_setup_theme', 'load_theme_textdomain' );

• Place your translation files in the /wp-content/themes/your-theme/languages/ folder and name them using the appropriate locale code (e.g., en_US.mo for American English).

Use Translation Functions:

Accordingly, in your custom templates, replace static text with translation functions provided by WordPress and WooCommerce.

The most common one is __() or esc_html__(). These functions wrap the text you want to translate and provide a key for translation.

Example in PHP:

<p><?php echo esc_html__('Welcome to our store', 'your-theme-domain'); ?></p>

Generate Translation Files:

To generate translation files for your custom WooCommerce templates, in this case you can use a translation plugin like Loco Translate. Here’s how you can do it:

• Open the loco Translate home page and create a new catalog for your theme.
• Scan your theme directory for translatable strings.
• Add translations for the strings in different languages.

Test and Verify Translations:

Finally, after creating your translation files, test your website with different languages.

Therefore, ensure that the translations are working correctly and that the layout and design accommodate the translated text.

Accordingly, pay attention to any text expansion or contraction that may affect the design.

Best Practices & Conclusion

Your Customization Checklist:

1. Always use a child theme

2. Prefer hooks/filters over full template overrides when possible

3. Document your customizations in a `readme.md` file

4. Test after WooCommerce updates – some hooks may change

5. Make all user-facing text translatable

Two Paths to Customization:

1. Template Overrides: Best for major layout/structural changes

– Copy from: `plugins/woocommerce/templates/.`

– Paste to: `your-child-theme/woocommerce/.`

– Modify the copied file

2. Hooks & Filters: Best for functional/logical changes

– Add to child theme’s `functions.php.`

– More upgrade-friendly

– Easier to manage

Support

If you need any technical assistance, please reach out to us by mail at [email protected] or Hire WooCommerce Developers for your project.