Add, remove, re-order items on Woocommerce single product page

Posted by on Apr 28, 2014 in Blog, E-Commerce, Woocommerce | No Comments

The title says it all. This is not a thorough tutorial. Just some handy code with a very quick explanation.

I was working with the free MyStile theme from Woothemes (v1.3.0) and Woocommerce (v2.1.7) on WordPress 3.9. This solution should work for most themes I believe, although I can not guarantee it.

Remove Woocommerce items

It is pretty obvious what removes what. This would remove basically everything, so obviously you would use only select lines.

You would find these items being added with ‘remove_action’ in your themes functions.php. Your theme may layout things in a different order. The numbers effect the order in which things appear on the page as well as ‘woocommerce_after_single_product_summary’ and ‘woocommerce_before_single_product_summary’ To be clear the numbers do not refer to a physical location, they are the order in which the actions run, lower numbers first. This then effects the order in which things are created and drawn to the page, thus effecting where they appear. More on priority can be found here.

<?php
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );//ALL tabs
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );// Button
?>

Add things back and re-order example

As an example you could use the first 4 lines above to remove the Product tabs, Up-sell display, Related Products and Product Title from AFTER all of the Price and Add to cart Button etc. Then add the Title and Product Tabs back in BEFORE the Price and Add to cart Button etc.

<?php
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_template_single_title', 25 );
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_output_product_data_tabs', 30 );

If you want to remove the Woocommerce Tabs but keep the description text see this post.

Tools:

You may edit your PHP outside WordPress and upload it to your server. You must use an appropriate code editor NOT microsoft word or anything like that which adds a lot of invisible formatting and will be a disaster.
If you do not have one, 2 excellent free ones are…
TextWrangler for Mac, http://www.barebones.com/products/textwrangler/
Notepad++ for the PC http://notepad-plus-plus.org/

Child Themes

You want to change code in a way that will not be over-written when you update your theme. So if you do not already have one you should setup a child theme. I always do this if I am making any changes to the main theme, even if it is only CSS. That is not the topic of this post so here is a link to a tutorial on creating a child theme, you will find the WordPress codex article here.

Leave a Reply