The ability to override WooCommerce templates is available to alter HTML and CSS. It isn't terribly great when adding extra logic with PHP or rearranging different templates. Many of the templates are hooked in. What this means is that there is a placeholder in the template that will usually look similar to the following code:
/** * woocommerce_single_product_summary hook * * @hooked woocommerce_template_single_title - 5 * @hooked woocommerce_template_single_rating - 10 * @hooked woocommerce_template_single_price - 10 * @hooked woocommerce_template_single_excerpt - 20 * @hooked woocommerce_template_single_add_to_cart - 30 * @hooked woocommerce_template_single_meta - 40 * @hooked woocommerce_template_single_sharing - 50 */ do_action( 'woocommerce_single_product_summary' );
From the comments in the code, you can see where the developers have programmed certain pieces of functionality. However, they're not easy to move unless you know how to use WordPress hooks.
The regular product page looks as shown in the following screenshot:
For our example, we'll be moving the product rating lower down the product page, after the product SKU and category.
This recipe only has two lines of code, but both of those lines have a lot of parameters in them. Follow the recipe to see how the hooks work. At the end of the recipe, there will be a link to provide more explanation on each line of the code.
There are only two things you can do with hooks: add something to them or remove something from them. Using the following steps, we'll start by removing one of the actions from a hook:
- Open up your theme's functions.php file or a custom WooCommerce plugin.
- At the bottom of the file, add the following code:
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
This code removes a specific action on a certain hook at a certain priority. If you get one of the preceding three parameters wrong, it won't work.
Now that we've removed the review, we want to add it back in after the category and SKU information.
- Below the last line of code, add the following:
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 45 );
- Save and upload the file.
The rating is now below the Category and SKU, as illustrated in the following screenshot:
The hooks in WooCommerce use the hooks system built into WordPress. You can learn all about hooks on Wordpress.org at http://codex.wordpress.org/Plugin_API/Hooks.