Hooks and filters are a core feature of WordPress and used extensively in WooCommerce. This post demonstrates changing the layout of the single product page by changing the hook execution order. Simple, but powerful.
WooCommerce uses templates to simplify the customisation of the layouts of the various pages by the theme or by plugins. Additionally much of the functionality of WooCommerce can be controlled through the use of hooks and filters. Hooks and filters are a core feature of WordPress and my favourite feature.
WooCommerce Single Page Template
The single product page is assembled using actions. The page is made up of multiple small blocks combined together. The easiest way to change the layout is by changing the order that the actions are executed.
The comments in the single product page template list the actions attached to the various hooks and the order that they will be executed. You can see most of them being added in wc-template-hooks.php.
Change Action Execution Order
To change the execution order you must first disable the code with remove_action() and then add_action() again with a different priority number.
In the code below I removed all the actions (leading to a quite empty page) and then added most of the back, but in a very different order. The price is displayed first, followed by the category and tag info, then the short description. Only then did I add the title, and finished off with the ‘Add to cart’ section. It is a crazy layout but it is just to demonstrate what can be done.
Similarly you could remove_action() just a few items e.g. the ‘woocommerce_template_single_sharing’ code or even the short description (via ‘woocommerce_template_single_excerpt’).