Different layout by category - a demonstration using actions.
WooCommerce uses actions and filters to enable customisation of the layout of product listings. Last year I wrote about changing the layout of the single product page by changing the hook execution order. As I didn’t change any template files the code will not need any changes when a new version of WooCommerce is released.
Last month I read a Facebook post where someone asked about changing the product category archive for different categories. I suggested using actions. I was on holiday at the time so could not write up a demo. Now I have time.
While the screenshots are of the Storefront theme with demo content the code should work with any theme.
The code makes a single change to the ‘Accessories’ category and three changes to the ‘Hoodies’ category. Like with the product page layout example, this code does not change any template files so will work forever (well, until WooCommerce changes the actions used in the category archive).
For the ‘Accessories’ category I simply remove the category description.
For the ‘Hoodies’ category I demonstrate some more adventurous changes. Removing the result count (e.g. ‘Showing all 4 results‘) is a straightforward ‘remove_action()‘ call.
Moving the title to above the product thumbnail is a two step process – ‘remove_action()‘ for the original location and then ‘add_action()‘ to the new location.
Adding the second ‘Add to cart‘ button demonstrates that a function can be called multiple times – the original call does not have to be removed.