WooCommerce uses the custom post type to manage products. The default template for products is the single.php file. However, we can have a different template for each custom post type by using a single-{custom post type}.php file. Once a product has been viewed, WooCommerce loads single-product.php files inside the templates folder of the WooCommerce plugin. This file loads a partial template called content-single-product.php within the templates folder of WooCommerce. We can modify this plugin or entirely replace it with a custom template to change the built-in product page design.

First, we copied the content-single-product.php template from WooCommerce to the woocommerce folder of our Twenty Twenty child theme. Once copied, WooCommerce will use the file within the theme, instead of the built-in template. The template doesn't contain any display code for the browser. Instead, it uses action hooks to generate the output for the product page. Let's take a look at the available action hooks in the product page and their functionality:

• woocommerce_before_single_product_summary: This action is used to display the sale of flash products and the images for the product. These two features are loaded by another two action hooks, which are listed in the comments section of the original template. When a product is on sale, there will be a highlighted section at the top of the product image displaying the percentage of the discount. The main image and the image gallery of a product are loaded within this section. We can modify this action to change the design as well as product image functionality.
• woocommerce_single_product_summary: This action is used for displaying the main content of the product such as title, price, summary, add to cart buttons, and metadata. Each of the main items is loaded by an item-specific action hook. We can use this section to remove existing items, change the positioning of existing items, or add new items.

• woocommerce_after_single_product_summary: This action is mainly used to display product tabs and related product sections using its own hooks. This section is generally displayed under the images and product summary section. The tabs section will display descriptions, attributes, and reviews by default. We can use these hooks to customize each of these sections.
• woocommerce_after_single_product: This action doesn't load any product-specific content by default. We can implement this action to display any content after a product tabs section.

In the recipe, we removed the woocommerce_before_single_product_summary action from our custom template in order to illustrate its functionality. Once removed, product images and the gallery will be hidden and, hence, a blank area will be displayed for that section. Then, we added the code back to display the images.

After that, we looked at the possible locations where we can customize the product. We implemented the following scenarios:

• Adding custom content after the Add to Cart button
• Adding custom content between existing items

Let's take a look at how the implementation works for each of these two scenarios.