The idea of customizing product pages in WooCommerce can be frustrating if you want more than a plugin offers, but aren’t familiar with how to rework the code and / or the loop via hooks and filters. If you’re familiar with basic PHP, extending product pages beyond the standard format is possible and opens up a world of customizations to specialize your eCommerce site.

Today, I’ll take you through the components of the single product page via the WooCommerce back end so you can learn to add, remove, or reorder new content visible on the front end.

This tutorial assumes you have a basic knowledge of PHP and the file structure of WooCommerce and WordPress themes.

The template framework

WooCommerce has a rather complex system of core files that it uses to create its frontend display. The files we’ll be working with are templates, which are flexible frameworks that have various content inserted depending on the particular page and the loop.

Before starting, I recommend a free plugin called What the File that puts a panel in your admin bar that allows you to view whatever file the site is pulling from and the template parts that are contributing. It’s invaluable to make sure your file is directed correctly to the page you want.

We’ll use template overrides in this guide. They are simpler to implement than using WordPress hooks (actions and filters), but note that using hooks where possible is preferred (though template overrides may have their place). If you override templates, you should keep them updated with every theme and WooCommerce update.

The basics

There are two files that WooCommerce pulls from to create a product page: single-product.php and content-single-product.php.

Single-product.php determines what information is displayed on the page and creates the layout that will display the information. You can view its contents here.

Content-single-product.php pulls the content of the product that’s been organized into hooks withs actions and filters, and nests those into the single-product.php layout. You can view the content-single-product.php here.

In order to make sure that WooCommerce doesn’t erase any customizations that you make, you’ll need to make copies of each of these files and put them in a /woocommerce folder in your child theme (removing the /templates subdirectory in the file path). This avoids any overriding of changes when either WooCommerce or your theme has an update.

This effectively has created a new template for you to edit: WooCommerce will automatically select the single-product.php page in your child theme instead of the default.

When you copy your content-single-product.php into your child theme, you are free to edit that file as you wish to customize all products in the store (see below). For example, I could add a notice above all product pages by inserting a wc_print_notice() call in this template:

?>
<div id="product-<?php the_ID(); ?>" <?php wc_product_class(); ?>>

    <?php // add a notice to all product pages ?>
    <?php wc_print_notice( __( 'Get it soon! This item typically ships in 1-2 days.', 'my-textdomain' ), 'notice' ); ?>

    <?php
        /**
         * Hook: woocommerce_before_single_product_summary.
         *
         * @hooked woocommerce_show_product_sale_flash - 10
         * @hooked woocommerce_show_product_images - 20
         */
        do_action( 'woocommerce_before_single_product_summary' );
    ?>

WooCommerce product content notice

This customization, like many, would be better off using a hook for this change, but more advanced changes can be done by modifying this file.

It’s also possible to create a separate template for particular product categories for further customization.

Note: Just like WooCommerce itself, several plugins and themes provide an extensive collection of custom action and filter hooks, so you don’t often need to copy templates over to your theme. This makes code cleaner and eliminates possible messy file duplication. See this series of posts, particularly the first two articles, for help in getting started.

Category templates

It’s also possible to create custom page templates for specific categories of product and keep other categories with the standard template. To accomplish this requires a little bit of rerouting.

When copying your files from the woocommerce/templates folder to the /woocommerce folder in your child theme, you’ll want to tack on the category slug at the end of the file, so custom templates for the categories “Books” or “Hoodies” becomes content-single-product-books.php and content-single-product-hoodies.php. Make it an easily recognizable name and distinct from other categories. This file will be used to make changes in the loop, add or remove a sidebar, as well as make the single product looks exactly as you want it to look.

Single-product.php contains the loop that determines which products will be shown on the page.

In order to direct the loop to a specific category template, we’ll be editing the single-product.php file and adding a conditional check. The if conditional will check if the product belongs to a specific category, and then load the related custom template you created.

To insert the if conditional, find this code inside the loop of your single-product.php. It grabs the template for the loop using the parameters of $slug and $name:

wc_get_template_part( 'content', 'single-product' );

Delete it and insert this code in its place:

global $post;

$terms      = wp_get_post_terms( $post->ID, 'product_cat' );
$categories = wp_list_pluck( $terms, 'slug' );

if ( in_array( 'YOURCATEGORY', $categories ) ) {
    wc_get_template_part( 'content', 'single-product-YOURCATEGORY' );
} else {
    wc_get_template_part( 'content', 'single-product' );
}

Here’s a basic rundown on what this code accomplishes:

  1. Gets the post object for the current post in the loop (products are a type of post)
  2. Gets the terms, or the items in a taxonomy (in this case, product category), for the post, and holds them in $terms.
  3. Gets the slug for each term and holds it in a $categories array.
  4. The if loops checks to see if the slug for the category is in the array and then calls the template part.
  5. If your category is not in the array,the loop will call the regular single-product template.

Wherever you see YOURCATEGORY, you’ll want to replace that with your actual category slug, which should be the end of your new content-single-product.php file. You’ll also need to replace the name of the file with whatever the name of your new custom template is called.

If you have multiple categories, you can copy and paste the if statement and change the slug of the categories as well as the file names.

Make sure you save your files and to test the rerouting out with a simple h1 tag or something similar to confirm your new files are now working.

Customizing the content

WooCommerce uses a series of hooks to organize its content. A hook is a place in WordPress’ code that can get functionality added to it. One file is not made up of a single template, but is often pulling from many different sources and bits of code. You can use that to your advantage and create custom hooks to insert and rework your site’s front-end appearance.

There are two types of hooks: Actions and Filters.

Action Hooks: Can independently accomplish any sort of custom functionality. Another way to think of them, according to WPCandy, is “When you get to this point, do that.

Filter Hooks: Used to manipulate and modify existing output, like adding a sign-off at the end of every post.

If you’ve not gotten the hang of actions and filters (and their corresponding functions) yet, here are some resources to check out:

Removing elements from a page

When reorganizing the product page, getting an idea of the capabilities and options can be a really useful place to start. This WooCommerce visual hook guide for a product page is an excellent resource to see the hooks laid out spatially on the product screen.

A commonly added change to WooCommerce product pages is removing the star reviews, so I’ll use that as an example.

The woocommerce_template_single_rating function is hooked into the woocommerce_single_product_summary action in your content-single-product.php file (or a custom template name if you made one). WooCommerce has helpfully commented all the functions that exist in the woocommerce_single_product_summary action hook.

The names of the functions tell you that the hook is pulling title, price, and excerpt from the single template. The numbers at the end of each function label note their priority — smallest has the greatest priority and they grow larger from there.

You can’t simply go find the template file with the summary action, copy it over, and remove the review function. You’ll have to overlay a remove_action to counteract the initial (and include a comment to remind yourself why!)

To accomplish that, put this snippet where you keep custom code:

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );


WooCommerce product page changes: Before

Before



WooCommerce product page changes: After

After


Save your files and and check your site to make sure it’s responding. You may need to clear the cache if you have everything correct but see no changes.

Reordering content

Reordering content on your product page is quite simple and can be achieved by reordering the priority numbers I mentioned before. Moving an element in the loop is simply a matter of changing the priority that WooCommerce runs it at.

Let’s say you’d like your product price to be below your excerpt on the product page. You remove the action at the current priority and then hook it back it at a higher (lower number) priority.

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


WooCommerce product page changes: Before

Before



WooCommerce product page changes: After

After


Make sure to add comments to these additions to remind yourself what the purpose of the customization was!

Adding new content

There are a variety of ways to add content to your new templates:

Via functions.php

Similarly to using the pre-made functions to display the content on a product page, you can also make your own function and add it into the hook location you want at whichever priority level you’d like using add_action().

HTML/PHP in your content-single-product.php file

All of the hooks and content are wrapped in divs on the template page, so you can insert titles, captions, or other small bits of information and then style them using classes or ids. This method works well if you have the same piece of content that will be displayed product after product.

Custom fields

If you would like to have WooCommerce pull very specific information for each product into specific product pages, use a plugin such as Advanced Custom Fields or Meta Box.

You can frame a space for content in a div, p tag, or title, and the call the function that grabs the product-specific content to the page. It’s an excellent way for clients to be able to change or input information while also keeping things easy for developers.

For a more extensive explanation, check out How To Use Advanced Custom Fields – An In-Depth Tutorial.

Conclusion

Customizing your product page is easily accomplishable with a plugin or particular theme, but there’s a certain satisfaction one gets by editing at the level of code. The world of templating and hooks really opens up a whole new level of WordPress and WooCommerce, making customizations a lot more in your control.

Any questions about the actions and filters overview discussed in the post? What customizations are you wanting to make on your product page? Let me know in the comments below!


Your WooCommerce store can drive additional revenue by improving your email marketing. Try Jilt for free to increase sales with abandoned cart recovery emails, post-purchase follow-ups, and more!
Articles you may also like:

Posted by Alex Raby

A WordPress and web developer, when Alex Raby isn't coding all the things, she can be seen writing at WP Pros(e) or avidly reading to reach her lofty goal of finishing 75 books this year.

3 Comments

  1. Sophia Rodriguez August 29, 2018 at 6:35 am

    Thanks for the content, such a useful article!

    Reply

  2. Thank you so much..
    Useful and very nice.

    Reply

  3. Thank you for the article! Just building my product page and I don’t like the default view :). will try to implement this.

    Reply

Leave a reply

Your email address will not be published. Required fields are marked *