Got a WooCommerce store? The Mad Cow Customizer will help you manage your shop content like a pro. ✨

How to Move Content on a WooCommerce Single Product Page

A white sweatshirt with a tabby kitten on the front hangs from a hanger in front of a purple background.
Image credit: WooCommerce

We often get requests to modify the WooCommerce Single Product Page.

In the past, we used to simply copy the template we wanted to adjust. (In this case, it’s the content-single-product.php file in the templates folder).

However, we quickly learned that while this traditional approach is effective and technically “supported” by the folks at Woo, it can become problematic.


Since learning more and more about hooks, we’ve changed our approach. And now, whenever possible, we simply use functions to handle these WooCommerce Single Product Page content changes for us.


Example IRL: How to move a product’s meta data

In our example, we want to simply relocate a product’s meta data (SKU, categories, tags) to a different place on the Single Product Page.

Let’s get started by taking a look at the code.

Screenshot of code within a GitHub Gist


And for the purposes of this post, I’ll utilize a screenshot so we can talk in more detail.

Screenshot of code within a GitHub Gist

I like to show the code visually since VSCode looks so much better than just plain text.

What do the code comments tell us?

What these incredibly helpful comments are telling us is all the individual functions that Woo is already tying (or hooking) onto the hook “woocommerce_single_product_summary.”

More specifically, on line 56, they are adding the product meta — which is the content we are going to relocate.

Let’s move some Woo content!

Step 1: “remove_action”

So, referencing my code in the first image, you’ll notice that we need to “remove_action” first.

Step 2: Rearrange the train.

The numbers at the end of each of these functions (lines 51-58) are their priority. This is the order in which they are processed by the server and, subsequently, how they end up being spit out (HTML) onto the page.

A smart friend of mine gave me the analogy of a train.

  1. The hook itself (“woocommerce_single_product_summary”) is the engine.
  2. Each of the functions tied to that engine are pulled along in the order specified by their priority number.


So, putting it all together, we are removing the function for the meta data and then putting it back onto the train in a different spot.



Watch the training video ► Relocating Content on WooCommerce Single Product Page

If you watch the training video above, you’ll see we played around a little bit (towards the end) with placing our meta data function in other parts of the page.


That’s right — we’re wild like that! 😆

Want to learn even more WordPress?

Check out our WordPress Training page!