How to Create and Customize WooCommerce Templates?

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

Creating and customizing WooCommerce templates is a fundamental aspect of developing powerful and personalized e-commerce solutions on WordPress.

In this comprehensive dev doc, we’ll explore the steps and techniques you need to master to create and customize a WooCommerce theme for your plugin.

Prerequisites

Before diving into WooCommerce template customization, you should have a solid understanding of WordPress and WooCommerce.

You should be comfortable with PHP, HTML, and CSS, and have a development environment set up.

Getting Started

WooCommerce is a versatile e-commerce plugin for WordPress, that allows you to sell products online with ease.

However, to make your online store truly unique, you may need to create and customize WooCommerce templates.

By creating custom templates, you can control the layout, design, and functionality of your e-commerce pages.

Understanding WooCommerce Templates

WooCommerce templates are the building blocks of your online store’s design.

They determine how your product pages, cart, checkout, and other e-commerce elements are displayed to customers.

By understanding and customizing these templates, you can create a unique shopping experience that aligns with your web page template.

Template Hierarchy:

WooCommerce uses a template hierarchy that determines which template is used to display content. Understanding this hierarchy is crucial for customization.

Template Overrides:

Explore the structure of WooCommerce templates and learn how to identify and work with template files.

Template Structure:

Explore the structure of WooCommerce templates and learn how to identify and work with template files.

Creating Custom WooCommerce Templates

Setting Up Your Development Environment :

Before you start creating custom templates, you’ll need a development environment.

We’ll guide you through setting up a local WordPress installation and a code editor to ensure a smooth development process.

Template Structure :

We’ll provide an overview of the essential components of a WooCommerce template, including the header, footer, and content sections.

Understanding this structure is crucial for creating cohesive and visually appealing templates.

Creating Your First Custom Template :

In a practical step-by-step tutorial, you’ll create your first custom WooCommerce template.

We’ll walk you through the process, from creating a blank template to integrating it into your WooCommerce-powered store.

Customizing Existing WooCommerce Templates

Template Customization:

Customizing WooCommerce templates requires adherence to best practices.

We’ll explore techniques for making changes without causing compatibility issues with future updates of WooCommerce.

Using Hooks and Filters:

Hooks and filters are a part of WordPress’ core architecture, 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.

Common Customization Scenarios :

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. Changing 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. Here’s a code snippet to move 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.

Here’s an example that redirects users to a unique checkout page for a specific product (product ID 123):

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.

These are just a few common customization scenarios for WooCommerce templates.

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 :

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.

1. single-product.php

• Role: This template file controls the layout of a single product page.
• Impact: Customizing this file allows you to control how individual product pages are displayed. You can change the layout, add product-specific information, and alter the product’s appearance.

2. archive-product.php

• Role: This template file governs the layout of product archive pages, such as product category and shop pages.
• Impact: Customizing this template enables you to change how product listings are presented. You can modify the product grid, filter options, and sort order.

3. content-product.php

• Role: This file handles the individual product loop within product archives.
• Impact: By modifying this template, you can change the structure of product listings, including how images, titles, prices, and descriptions are displayed.

4. cart.php

• Role: This template controls the layout of the shopping cart page.
• Impact: Customizing cart.php allows you to adjust the cart layout, including the cart items, subtotal, and cart totals. You can also add custom cart messages and instructions.

5. checkout/form-checkout.php

• Role: This file is responsible for the layout of the checkout page.
• Impact: Modifying this template allows you to change the structure of the checkout process. You can customize the billing and shipping forms, order reviews, and payment options.

6. checkout/thankyou.php

• Role: This template controls the appearance of the order confirmation page.
• Impact: Customizing this file lets you adjust the design of the order confirmation page and include custom messages or additional information for customers.

7. myaccount/my-account.php

• Role: This template governs the user account page.
• Impact: Modifying this file allows you to personalize the user account area, providing additional instructions, links, or other custom content.

8. content-widget-product.php

• Role: This template file manages the display of products within widgets.
• Impact: Customizing this template affects how products are shown in widgets, such as recent products, top-rated products, or product search results in the sidebar.

9. email/header.php and email/footer.php

• Role: These templates define the header and footer of WooCommerce email notifications.
• Impact: By altering these files, you can customize the branding and style of emails sent to customers, making them more consistent with your store’s appearance.

10. email/order-details.php

• Role: This template controls the order details section within email notifications.
• Impact: Customizing this file allows you to add custom information to order confirmation and notification emails, ensuring that customers receive essential details.

11. emails/email-styles.php

• Role: This template contains the styles used for email notifications.
• Impact: Modifying this file allows you to fine-tune the appearance of email notifications, making them align with your store’s branding.

12. global/quantity-input.php

• Role: This template manages the quantity input field on product pages.
• Impact: Customizing this file lets you change the appearance and behavior of the quantity input field, which can improve the user experience.

13. global/flash-sale.php

• Role: This template controls the flash sale countdown timer.
• Impact: By modifying this file, you can alter the design and placement of the flash sale countdown timer, creating a sense of urgency for customers.

Common Use Cases for Customization :

Customizing WooCommerce templates allows you to tailor your online store to specific business needs and create a unique shopping experience.

Here are some common use cases for template customization, along with insights into how to achieve them:

1) Creating a Custom Product Page:

• Use Case: You want to design a product page that showcases your products in a unique and compelling way, different from the default WooCommerce layout.
• How to Achieve it: To create a custom product page, you should customize the single-product.php template.
• You can modify the layout, display additional product information, add custom product tabs, integrate video or interactive content, and apply unique styling.
• Use template hooks and filters to insert custom content where needed.
• Additionally, consider using custom fields to store and display product-specific data.

2) Altering the Cart Layout:

• Use Case: You need to change the appearance and functionality of the shopping cart page to match your brand and customer preferences.
• How to Achieve it: Customize the cart.php template to alter the cart layout.
• You can redesign the cart items, adjust the subtotal and totals section, or add custom messaging and instructions.
• Utilize hooks and filters to modify cart content and calculate totals dynamically.
• You can also implement AJAX functionality to update the cart without reloading the entire page, providing a smoother user experience.

3) Changing the Checkout Process:

• Use Case: Your business requires a unique checkout process that differs from the default WooCommerce flow.
• How to Achieve it: Customize the checkout/form-checkout.php template to modify the checkout page.
• You can rearrange form fields, add custom input fields for additional information, and integrate third-party payment gateways.
• Utilize hooks and filters to manage the order of checkout steps, modify shipping options, and implement custom validation and data processing.
• Consider adding custom JavaScript for real-time address validation or custom checkout features.

4) Customizing Email Templates:

• Use Case: You want to personalize order confirmation and notification emails to match your store’s branding and include essential information.
• How to Achieve it: Customize the email templates located in the emails directory, such as header.php, footer.php, and order-details.php.
• This allows you to change the appearance and style of email notifications, ensuring they align with your brand.
• You can add custom headers and footers, include additional order information and modify the email styles.
• Utilize hooks and filters to insert dynamic content into email templates, such as order details, customer information, and personalized messages.

5) Customizing Widgets:

• Use Case: You need to create custom product widgets or modify the appearance and functionality of existing widgets.
• How to Achieve it: Customize the content-widget-product.php template to control how products are displayed in widgets.
• You can design custom product widgets that showcase specific product categories, featured items, or deals.
• To enhance widget functionality, use hooks and filters to modify widget output, enabling you to present products in unique ways or add custom filters and sorting options.

6) Implementing Flash Sales:

• Use Case: You want to introduce flash sales with countdown timers to create a sense of urgency and boost sales.
• How to Achieve it: Customize the global/flash-sale.php template to manage the appearance and behavior of the flash sale countdown timer.
• You can modify the timer’s design, choose where it’s displayed, and configure its countdown duration.
• Additionally, use JavaScript to create dynamic countdowns that update in real-time and automatically trigger sale events when the timer expires.

Customizing WooCommerce templates empowers you to address specific business needs and enhance the user experience.

These common use cases provide a starting point for your template customizations, but the possibilities are vast. Remember to follow best practices

Template Tags and Functions :

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

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 that you can use 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: 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: 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: 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: 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: This tag generates the “Add to Cart” button on a single product page. 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: 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: This function displays the cart totals section, including the subtotal, shipping, and total price, on the cart and checkout pages.
• Example:

woocommerce_cart_totals();

These are just a few examples of the many template tags and functions available in WooCommerce.

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:

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

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

Translate WooCommerce Strings:

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:

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, 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:

After creating your translation files, test your website with different languages.

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

Pay attention to any text expansion or contraction that may affect the design.

Conclusion

This comprehensive guide should provide you with the knowledge and skills needed to create and customize WooCommerce templates for your plugin effectively.

Whether you’re a beginner or an experienced developer, understanding and mastering template customization is a valuable asset for enhancing your e-commerce solutions.

Support

If you need any technical assistance, please reach us by mail at support@webkul.com or Hire WooCommerce Developers for your project.