Customize your WooCommerce product page

Unfortunately, it is difficult to change a WooCommece page as their HTML code is rendered programmatically. In other words, it is not as simple as opening an HTML file and edit it. Instead, the HTML code of a single WooCommerce page is scattered in dozen of files and they are mostly commands that call sub-templates. As if it wasn’t difficult enough these commands are implemented in a “hook” way, which makes WooCommerce layout changes a very difficult task.

If you want to change the contents of a WooCommerce page, you need to work with hooks. You can also work with templates, but they are very limited on what can be changed.

But don’t worry, I will show here how to change the HTML of the product page (both templates and hooks). You can use this knowledge to change any other WooCommerce page.

Obviously, the easier way to change a WooCommerce page is by CSS. This solution can even remove elements with a display: none; and add others with :before and :after. But of course, it can’t change the HTML structure, which is the goal of this article.

1. Templates:

Don’t expect to have some “product-page.php” file with the whole HTML code for the page, because there’s no such thing.

All pages are rendered programmatically in WooCommerce. Template files are basically a set of commands like “print_sidebar(); print_title() print_price();” and not actual HTML code.

These commands are actually implemented in a hook way. Something like: “do_action(‘print_sidebar’); do_action(‘print_title’);“.

The “Product page” file:

PS: I have stripped the comments for readability.

Whenever the product page is accessed, WooCommerce loads the actions and then the page template above.

The actions are loaded by the wc-template-hooks.php file. This file is called for ALL WC pages, not just the “product page” and it is no more than a collection of “add_filter()” commands:

After the hooks are loaded, the template content-single-product.php file (above) is called.

1.1. Changing the template files:

The template files are all in the plugins/woocommerce/templates folder:

You SHOULD NOT change any of these files directly. Instead, copy the file to wp-contents/themes/{yourtheme}/woocommerce/ and change the copy.

For example, let's say you want to edit single-product/price.php: copy this file to wp-contents/themes/{yourtheme}/woocommerce/single-product/price.php (and edit the copy).

There are few cases you may want to change a template file. You can do it if want to change a DOM element from "<p>" to "<span>", for example. But in most cases, you will want to manipulate the actions and filters in order to change the page HTML.

2. Hooks:

If you look again at the content-single-product.php file, you will notice it has 5 "do_action()". By default, these actions are hooked on the wc-template-hooks.php (called on all WC pages).

The wc-template-hooks.php file sets ALL hooks, for ALL WooCommerce pages. Let's look at the 5 actions used in our "product page" template:

Now, if you want to remove a page element, remove its hook with remove_action(). If you want to change the order of an element, remove the hook and re-add it with a new priority.

Examples:

Where to put these example codes? Put them in your theme's functions.php:

Remove "Short Description":

In your theme's functions.php:

Price before Title:

Description after Title:

Remove Tabs:

Option 1 - Remove hook:

Option 2 - Empty the "tabs" array:

Reference:

The full wc-template-hooks.php file, called on every WC page. This file loads all hooks for page display:

The "product page" file:

Close Menu