How do I customise product pages in WooCommerce

Question

I have created a child theme to work alongside storefront and am struggling to customise the layout of the individual product pages.

Under single-product.php I was expecting to see html markup that I could manipulate but actually what is declared is this:

wc_get_template_part( 'content', 'single-product' );

With no access to the actual code…

Similarly, with my search bar, I need to add code to the individual product search results. But in search.php the following is declared:

get_template_part( 'loop' );

Again, forcing me to use JS and CSS to manipulate the appearance as best I can.

Answer 1

Please have a look at the get_template_part() function: https://developer.wordpress.org/reference/functions/get_template_part/ and the woocommerce template structure: https://docs.woocommerce.com/document/template-structure/

---

With woocommerce you can edit template files in a update-safe way:

1. In the folder of your theme (wp-content/themes/yourtheme) create an empty folder called woocommerce.
2. Go to the template directory in the woocommerce plugin (wp-content/plugins/woocommerce/templates) and copy the file called content-single-product.php.
3. Paste the file into your just created folder called woocommerce in your theme folder.
4. You can now do your adjustments and keep them, even if the woocommerce plugin gets updated.

---

In your search.php file you are loading a file called loop.php which should be in your theme folder (wp-content/themes/yourtheme). Edit this file to do your changes. Maybe there is a subfolder in your theme called template-parts or similar, depending on the theme you are using.