Customize your WooCommerce product page

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.

I will show here how to change the HTML of the product page (both templates and hooks), but you can use this knowledge for 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 with :before and :after. But of course, it can’t change the HTML, 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 file comments for readability.

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

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

Put the codes 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