How to Edit the WooCommerce Single Product Template Programmatically

Despite the fact that you can customize every aspect of your store, the single product template is the main page where most customizations take place in WooCommerce. You must focus on it if you wish to maximize revenue and strengthen the beginning of the buying process. We’ll show you how to programmatically modify the WooCommerce single product page in this post.

How to edit the WooCommerce single product template

The following topics will be discussed:

• Using hooks
• Override WooCommerce template files
• Customizing the product page with CSS scripts

The output of the product page is handled by two key WooCommerce files:

• single-product.php
• content-single-product.php

WooCommerce Single Product Template Hooks: Actions and Filters

“wc” equals “woocommerce“

• wc_before_single_product
• wc_before_single_product_summary
• wc_single_product_summary
• wc_before_add_to_cart_form
• wc_before_variations_form
• wc_before_add_to_cart_button
• wc_before_single_variation
• wc_single_variation
• wc_before_add_to_cart_quantity
• wc_after_add_to_cart_quantity
• wc_after_single_variation
• wc_after_add_to_cart_button
• wc_after_variations_form
• wc_after_add_to_cart_form
• wc_product_meta_start
• wc_product_meta_end
• wc_share
• wc_after_single_product_summary
• wc_after_single_product

Edit the WooCommerce single product template using hooks

Check out this guide if you’re unfamiliar with WooCommerce hooks and how to use them.

Removing elements

You may use a variety of WooCommerce hooks to delete any feature from a single product template. Each one can operate for a particular set of items, so make sure you use the right hook, WooCommerce callback function, and a priority value. Both hooks and their associated parameters can be found above or in comments in the WooCommerce plugin’s content-single-product.php file.

// remove title
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
// remove rating stars
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
// remove product meta 
remove_action( 'woocommerce_single_product_summary','woocommerce_template_single_meta',40 );
// remove description
remove_action( 'woocommerce_single_product_summary','woocommerce_template_single_excerpt',20 );
// remove images
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images',20 );
// remove related products
remove_action( 'woocommerce_after_single_product_summary','woocommerce_output_related_products',20);
// remove additional information tabs
remove_action('woocommerce_after_single_product_summary','woocommerce_output_product_data_tabs',10);

Reorder elements

It’s easy to rearrange the elements of the single product template. You must first delete the hook in the same fashion as before, and then re-add it with a different priority/order number.

// change order of description
remove_action('woocommerce_single_product_summary','woocommerce_template_single_excerpt',20);
add_action('woocommerce_single_product_summary','woocommerce_template_single_excerpt',6 );

Add elements

To add new content, use the following hook:

add_action('woocommerce_after_single_product_summary','pe_after_single_product_summary');
/**
 * Add some text after the product summary text.
 *
 * Hook: woocommerce_after_single_product_summary
 */
function pe_after_single_product_summary() {
	echo '<div class="pe-after-product-summary">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
		  </div>';
}

Edit product tabs

We can delete, reorder, or add a new tab in the Additional Information segment using the woocommerce product tabs filter hook. The following script will remove the Description tab and its contents, rename the Reviews tab, and transfer Additional information to the top of the priority list.

add_filter( 'woocommerce_product_tabs', 'pe_remove_product_tabs', 98 );
function pe_remove_product_tabs( $tabs ) {
    unset( $tabs['description'] );    	// Remove the Description tab
    $tabs['reviews']['title'] = __( 'Ratings' );	// Rename the Reviews tab
    $tabs['additional_information']['priority'] = 5;	// Additional information at first
    return $tabs;
}

Overriding WooCommerce template files

Overriding the template files is the second way to programmatically edit the WooCommerce single product template. Since this approach is a little riskier than the previous one, we suggest that you back up the whole website first.

Overriding WooCommerce template files are close to overriding every other file in your child theme, so if you don’t have one, we suggest creating a child theme or using one of these plugins to prevent missing your customizations when you upgrade your theme:

1. Child Theme Configurator (Free and Premium)
2. Child Theme Generator (Free)
3. Childify Me (Free)
4. Child Theme Wizard (Free)
5. WPS Child Theme Generator (Free)
6. Generate Child Theme (Free)
7. Child Theme Creator by Orbisius (Free and Premium)
8. WP Child Theme Generator (Free)

Edit the single product template

Edit your child theme files directory and create a WooCommerce folder. Then, copy the single-product.php file and paste it in your child theme folder, in the WooCommerce directory.

child-theme/woocommerce/single-product.php

Open the file and notice this line: wc_get_template_part('content','single-product');

This is where the content-single-product.php file comes into play, printing all of the current product’s elements to finish the loop and create the layout. If you want to override this file and create something different you can do that here. Be careful and always backup your files.

Customizing the product page with CSS scripts

CSS code is another convenient and easy way to programmatically update the WooCommerce single product template (or any other page). This will assist you in styling the single product template and making it the company’s look and feel.

To start, build a new file with the .css extension in your child theme to which you can add your CSS code. To make it easier to search, call it single-product.css or something similar. Then, in the child theme’s main folder, put the file on the same level as functions.php and style.css. Then, in your child theme’s functions.php file, paste the following script, replacing the name of your CSS file if required.

add_action( 'wp_enqueue_scripts', 'pe_custom_product_style' );
function pe_custom_product_style() {
        if ( is_product() ){
        wp_register_style( 'product_css', get_stylesheet_directory_uri() . '/single-product.css', false, '1.0.0', 'all' );
          wp_enqueue_style('product_css');
      }
}

In conclusion

To summarize, customizing the online shop is critical for standing out from the crowd. Brand pages are some of the most critical pages in every shop, and there’s a lot you can do to enhance the consumer experience and maximize revenue by improving them.

We’ve seen three different ways to configure the single product template in this post:

• Using hooks
• Overriding WooCommerce templates
• CSS scripts

Do you have any problems following our instructions? Please let us know in the comments section below, and we will do all we can to assist you.

Relevant Links

• WordPress Codex – Hooks