Move product title above the thumbnail in WooCommerce product page

In WooCommerce’s product details page, product title always comes after product image section.
But each website have their own design and many a cases we have seen that product title needs to be shown at the top.

So, how to achieve that without tinkering the template code much ?

Let’s have look at the ‘content-single-product.php’ page. The default code of this page looks like –
If you look at the code closely, you will notice that there are two action hooks –
`woocommerce_before_single_product_summary` and `woocommerce_single_product_summary`.

Now, `woocommerce_show_product_images` function is attached with first hook and `woocommerce_template_single_title` is attached with later.

That’s the reason that image is coming first.

But in template, simply swapping places of those two action hooks are not recommended at all, as other functions are attached with those hooks too. So, the best way to do that is, remove title hook from `woocommerce_single_product_summary` and add it to `woocommerce_before_single_product_summary`.

So here we go, open your theme’s functions.php and add following lines –

remove_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_title’, 5);

add_action(‘woocommerce_before_single_product_summary’, ‘woocommerce_template_single_title’, 5);

As of now, both image and title is added to same action hook but still title will come first. Because image showing function was added with priority 10 (default) and we have added title with priority 5.

So, like price you can re arrange any of the item like price, rating, add to cart button etc.

Hope you have enjoyed the article 😉