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 😉
3 Replies to “Move product title above the thumbnail in WooCommerce product page”
I did this but it didn’t change a thing. I actually pasted it in function.php file for my child theme rather than editing my parent theme’s php file. IS there anything else I need to do other than pasting this code in my functions.php file.
Pasting in child theme’s functions.php is actually fine. It should do the trick. Can you please check your HTML to double check their positions. Because some times CSS makes positions look different.
And last but not least check priority param there. Play with it to move back and forth.
Don’t forget to copy it without lay-out (plain text from your wordpad)