How to edit WooCommerce product page programmatically
Looking for ways to customize the product page in your eCommerce store? In this guide, we’ll show you how to edit the WooCommerce product page programmatically.
Customizing the Product Page
Even though you can customize anything on your store, the two main pages where most customizations occur in WooCommerce are the shop page and the products page. If you want to boost your sales and optimize the beginning of the purchase process, you need to work on both. We’ve already seen how to customize the Shop page, so today we’ll show you how to edit the Product page programmatically (with code).
A neat design that focuses on providing the best customer experience will help you improve the overall purchase process and increase your conversion rates.
There are two main ways to customize the Product page:
- With plugins
- Programmatically
Even though some plugins can help you, finding the one that has all the features you want can be a long process. So if you have some basic developer skills, an excellent option is to edit the WooCommerce product page programmatically. Not only can you avoid installing any third-party tools but you’ll also have much more flexibility to customize anything you want.
How to edit the WooCommerce product page programmatically
In this section, you will learn how to edit the WooCommerce product page for single products. We’ll cover the following topics.
- Using hooks
1.1 Remove elements
1.2 Reorder elements
1.3 Add new elements
1.4 Apply conditional logic
1.4.1 Logged in user and user role
1.4.2 Product IDs and taxonomies
1.5 Edit Product tabs
1.6 Support for variable products - Override WooCommerce template files
2.1 Edit the meta-information
2.2 Switch to a custom template for a specific product category
2.2.1 Edit the single-product.php file
2.2.2 Create a new content-single-product.php file
2.2.3 Create custom template editing your new content-single-product.php file - Customizing the product page with CSS scripts
WooCommerce Product Page Layout
Before starting with the tutorial, let’s have a look at the default product page in WooCommerce for single products and identify each element. Pay attention to the different sections in the template and how the information is organized because we’ll refer to them later in the guide.
There are two main WooCommerce files responsible for the product page’s output.
- single-product.php: It builds the required template for the current layout
- content-single-product.php: This file prints the content in the template
Both files can be overwritten using a child theme. This is common practice to overwrite WooCommerce template files. However, you should try to use WooCommerce hooks instead of overwriting template files where possible because it’s one of the best practices that WordPress recommends when customizing your site. On the other hand, for complex tasks that include functions or objects, you might need to edit the template files.
Combining both techniques you should be able to achieve nearly any customization you want. So in this tutorial, we’ll show you how to edit the WooCommerce product page using both methods. Before we start, make sure you create a child theme to test your scripts or use a plugin to generate one.
Let’s see some practical examples so you can learn how each one of these techniques works to make the most of your store.
1) Edit the WooCommerce product page using hooks
NOTE: If you’re not familiar with WooCommerce hooks and how to use them, check out this guide.
1.1) Remove elements
There are several WooCommerce hooks you can use to remove any element on a single product page. Each of them will work with a group of specific elements, so you need to use the right hook, the right WooCommerce callback function, and the right priority value.
For example, if you want to remove the title of all products pages, you will use the following script in the functions.php
file of your child theme.
remove_action(/* hook -> */'woocommerce_single_product_summary',/* callback function ->*/ 'woocommerce_template_single_title', /* position ->*/5 );
You will find all hooks and their related parameters here or in comments in the content-single-product.php
file of the WooCommerce plugin.
Now, let’s have a look at some other sample scripts to remove different elements and customize the product page.
// 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);
1.2) Reorder elements
Reordering the elements of the product page is quite simple. First, you need to remove the hook in the same way we’ve done before, and then you need to add it again with a different priority/order number.
For example, the following script will move the product description right below the title:
// 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 );
As you see, we remove the action and then add it again with a different priority (6 instead of 20). Why did we choose a priority/order of 6? We know that the title element has a priority value of 5, so this allows us to know the priority value we need to assign to our customized hook to display the callback element right after the title (6).
Using the information we provided you in point 1.1, you can do the same with any hooks and callbacks and place them in any order you want.
1.3) Add new elements
If you need to customize the WooCommerce product page by adding new content, you might need to consider overriding the template files. However, you can also use the following hook to add new content:
add_action('woocommerce_before_single_product_summary',function(){printf('<h4><a href="?added-content">Congratulations, you\'ve just added a link!</a></h4>');});
Alternatively, you can create your own function:
add_action('woocommerce_after_single_product_summary','QuadLayers_callback_function'); function QuadLayers_callback_function(){ printf(' <h1> Hey there !</h1> <div><h5>Welcome to my custom product page</h5> <h4><a href="?link-to-somewere">Link to somewere!</a></h4> <img src="https://img.freepik.com/free-vector/bird-silhouette-logo-vector-illustration_141216-100.jpg" /> </div>'); }
1.4) Conditional logic on a single product page
We’ve previously seen how to add conditional fields on the checkout page but you can also add them to the product page. You can create conditional logic to meet the requirements you want using any of the WordPress native functions. Let’s have a look at a few examples.
1.4.1) Logged in user and user role
The user_is_logged_in()
is a default WordPress function used to validate website visitors. Additionally, we can use the wp_get_current_user()
function to retrieve all the information related to the logged in user.
In the following script, we are simply adding some content based on if the user is logged in and their role, but you can add your own custom functions for more complex functionalities
add_action('woocommerce_before_single_product','QuadLayers_get_user'); function QuadLayers_get_user() { if( is_user_logged_in() ) { $user = wp_get_current_user(); printf ('<h1>Howdy ' .$user->user_nicename.'!</h1>'); $roles = ( array ) $user->roles; if($roles[0]=='administrator'){ echo "<h4><b>You are $roles[0]</h4></b>"; } } else { return array(); } }
1.4.2) Product IDs and taxonomies
Similarly, we can retrieve the product ID and/or product categories. The difference is that we are going to use the global WP $post object to get the ID and the get_the_terms()
function to obtain the product categories.
add_action('woocommerce_before_single_product','QuadLayers_get_product_taxonomies'); function QuadLayers_get_product_taxonomies(){ global $post; $term_obj_list = get_the_terms( $post->ID, 'product_cat' ); $terms_string = join(', ', wp_list_pluck($term_obj_list, 'name')); if($terms_string=='Posters'){ echo " <h1>This is one of our best $terms_string</h1>"; echo "<h2>Product ID: $post->ID"; } }
The above script will return a single category. If you need to retrieve multiple categories or tags, you will need to create a more complex function. You’ll have to loop over taxonomies before applying your conditionals as shown below:
add_action('woocommerce_before_single_product','QuadLayers_get_multiple_taxonomies'); function QuadLayers_get_multiple_taxonomies(){ global $post; $args = array( 'taxonomy' => 'product_tag',); $terms = wp_get_post_terms($post->ID,'product_tag', $args); $count = count($terms); if ($count > 0) { echo '<div class="custom-content"><h4>Tag list:</h4><ul>'; foreach ($terms as $term) {echo '<li>'.$term->name.'</li>';} echo "</ul></div>"; } }
1.5) Edit product tabs
The woocommerce_product_tabs
filter hook allows us to remove, add, reorder, or add a new tab in the Additional Information section. The following script will remove the Description tab and its content, rename the Reviews tab, and change the priority of Additional information to the first place.
add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 ); function woo_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; }
To edit the content of a tab, you need to use a callback function like this:
add_filter( 'woocommerce_product_tabs', 'woo_custom_description_tab', 98 ); function woo_custom_description_tab( $tabs ) { $tabs['description']['callback'] = 'woo_custom_description_tab_content'; // Custom description callback return $tabs; } function woo_custom_description_tab_content() { echo ' <h2>Custom Description</h2> '; echo 'Here\'s a custom description'; }
Similarly, we can create a new tab as follows:
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' ); function woo_new_product_tab( $tabs ) { // Adds the new tab $tabs['test_tab'] = array( 'title' => __( 'New Product Tab', 'woocommerce' ), 'priority' => 50, 'callback' => 'woo_new_product_tab_content' ); return $tabs; } function woo_new_product_tab_content() { echo '<h2>New Product Tab</h2><p>Here\'s your new product tab content</p>.'; }
In this example, we’ve just created a new tab called “New Product Tab”. This is how it looks in the frontend.
1.6) Support for variable products
Product variations is a WooCommerce default feature and you can create and use variable products without any kind of customization. However, you must follow WooCommerce guidelines to make a custom solution compatible with product variations.
It’s important to note that any custom solution must be integrated with the overall website and not with a single page. So, keeping this in mind, we can still use some of the available hooks related to variable products.
These hooks will only trigger when they’re in a variable product page.
woocommerce_before_variations_form
woocommerce_before_single_variation
woocommerce_single_variation
woocommerce_after_single_variation
2) Customize the product page overriding WooCommerce template files
The second alternative to edit the WooCommerce product page programmatically is to override the template files. As this method is a bit riskier than the previous one, we recommend that you create a full backup of your site before starting. If you aren’t sure how to do it, check out this guide on how to back up a WordPress site.
Overriding WooCommerce template files is similar to overriding any other file in your child theme, so to avoid losing your customizations when you update your theme, we recommend you create a child theme or use any of these plugins if you don’t have one.
2.1) Edit the meta-information
To edit the meta-information, we need to override the template file responsible to print the corresponding data. The meta.php
file located in the WooCommerce plugin follows this path:
woocommerce/templates/single-product/meta.php
Now, edit your child theme files directory and create a WooCommerce folder. Then, create another folder inside it called single-product and paste the meta.php
file there:
Child_theme/woocommerce/single-product/meta.php
After this, you should be able to edit the meta.php
file and see your changes in the frontend.
The following meta.php
sample file will:
- Change the label of SKU to ID
- Change the tags to Published under
- Remove the category label
global $product; ?> <div class="product_meta"> <?php do_action( 'woocommerce_product_meta_start' ); ?> <?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ) : ?> <span class="sku_wrapper"><?php esc_html_e( 'ID:', 'woocommerce' ); ?> <span class="sku"><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ); ?> </span> </span> <?php endif; ?> <?php echo wc_get_product_category_list( $product->get_id(), ', ', '<span class="posted_in">' . _n( '', '', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?> <?php echo wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( 'Published under:', 'Published under:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?> <?php do_action( 'woocommerce_product_meta_end' ); ?> </div>
2.2) Switch to a custom template for a specific product category
Now let’s try a more complex task. We will override the single product template only when the current product belongs to a specific category.
2.2.1) Edit the single-product.php file
First, copy the single-product.php
file and paste it in your child theme folder, in the WooCommerce directory:
Child_theme/woocommerce/single-product.php
Then, open the file and check line 37: wc_get_template_part('content','single-product');
This is how the content-single-product.php
file comes into action, printing all the elements of the current product to complete the loop and build the layout. We want to override this file only when the product belongs to the specified category, so we will delete line 37: wc_get_template_part( 'content', 'single-product' );
and replace it with the following script:
$terms = wp_get_post_terms( $post->ID, 'product_cat' ); $categories = wp_list_pluck( $terms, 'slug' ); if ( in_array( 'posters', $categories ) ) { wc_get_template_part( 'content', 'single-product-posters' ); } else { wc_get_template_part( 'content', 'single-product' ); }
Note that we are using the sample products provided by WooCommerce, so there is a category called “Posters” which we are using for this example. Simply replace “posters” with an existing product category of your website. Remember that you can find the slug of all your product categories in the main WordPress dashboard > Products > Categories.
2.2.2) Create a new content-single-product.php file
Now we need to create a new file that will override the default content-single-product.php
one. This file will have the category slug in its name. Have a look at the above example to see how the content-single-product-posters.php
file is called. This is important because the name of the file must match the code in the previous step, so your file should be called content-single-product-/*YOURCATEGORYSLUG*/.php
.
This way, wc_get_template_part( 'content', 'single-product-YOURCATEGORY' )
will trigger the content-single-product-YOURCATEGORY.php
file and will override the default WooCommerce template file.
Simply paste the default content-single-product.php
file in the WooCommerce folder of your child theme, rename it following the instructions explained above and make some editions to test it.
2.2.3) Create a custom template editing your new content-single-product.php
file
This is a sample product page that will be displayed only when the current product belongs to the “posters” category. You’ll see that we’ve added some content, added and removed elements, reordered them, and run some shortcodes.
Despite being a basic example, it will give you an idea of what you can do on a template page and will allow you to explore new possibilities.
// remove product summary elements remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 ); remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 ); remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 ); remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 ); remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 ); // Custom content printf('<h1>This is the <b>'.$post->post_name.' </b>poster</h1>'); printf('<h4>A full customized product page for the "posters" category products</h4>'); // Description printf('<h5>'.$post->post_excerpt.'</h5>'); //thumbnail do_action( 'woocommerce_before_single_product_summary' ); //add meta do_action( 'woocommerce_single_product_summary'); // shortcodes echo do_shortcode('[
add_to_cart id="'.$post->ID.'" show_price="false" style="border:none;" class="my-addtocart"]
'); echo "<h3>Contact:</h3>".do_shortcode('[wpforms id="1082"]'); echo "<h3>More posters:</h3>".do_shortcode('[
product_category category="posters" orderby="desc" limit="4"]
');
Now if we check the frontend, we’ll see the following:
Note that we are using the global post object. var_dump($post);
to show you all the available information related to the current product. You can use any of its data just like we’ve done in the sample script with the description of the product: $post->post_excerpt
.
3) Customize the product page with CSS script
Another handy and simple way to edit the WooCommerce product page (and any other page) programmatically is by using CSS code. This will help you style the product page and give it the look and feel of your business.
-
- First, you need to create a new file in your child theme with the .css extension so you can add your CSS scripts there. We recommend you name it
single-product.css
or something similar so it’s easy to find. - Then, place the file in the child theme main folder at the same level as
functions.php
andstyle.css
files. - After that, paste the following script in the
functions.php
file of your child theme and replace the name of your CSS file if necessary.
- First, you need to create a new file in your child theme with the .css extension so you can add your CSS scripts there. We recommend you name it
add_action( 'wp_enqueue_scripts', 'load_custom_product_style' ); function load_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'); } }
The if(is_product())
conditional will check if the current page is a product page. This prevents unnecessarily loading the CSS file when it’s not a product page.
4. After adding this snippet, you should be able to edit the style of the product pages by adding your custom CSS rules to your CSS file.
Even though this method is quite simple and will provide you with a fast and easy solution, it might not be ideal for some cases. As CSS can be edited from the frontend, if a user knows how to use the browser developer tools, they could easily make visible any hidden element by editing the CSS.
Conclusion
In summary, customizing your online store is key to stand out from your competitors. Product pages are some of the most important pages in any store and there’s a lot you can do to improve customer experience and boost your sales.
Even though you could use plugins for this, we recommend you edit the WooCommerce product page programmatically if you have some coding skills. It provides you a lot of flexibility to customize any element of your store without the need of installing any additional tools.
In this guide, we’ve seen how to customize the product page in three different ways:
- Using hooks
- Overriding WooCommerce templates
- With CSS scripts
When possible, you should try to use WooCommerce hooks instead of overwriting template files. It’s one of the best practices that WordPress recommends and it’s less risky. However, for complex tasks that include functions or objects, you might need to edit the template files. If you manage to combine both techniques, you’ll be able to customize anything you want in your store.
Finally, have a look at the complete child theme that includes all the sample scripts we’ve used in this tutorial.
For more information on how to customize your store, check out the following guides:
- How to Customize the WooCommerce Shop Page
- How to customize Shop Page in WooCommerce
- Customize the Add to Cart button in WooCommerce
- How to edit the WooCommerce Checkout (Coding & Plugins)
Did you have any issues following our tutorial? Let us know in the comments section below and we’ll do our best to help you out.