WordPress block themes are the subject of much debate. Are they terribly unpopular, like some analysis suggests, or is it impossible to compare against two decades of classic themes and page builders?
Site editing is not without it’s rough edges, but I’ve seen enough block-based sites in the wild to know that block themes- with work- can beat classic themes on design and performance, with the benefit of full customization in the editor.
In the WooCommerce world, block themes seem to have pretty low marketshare for a number of reasons. One is that WooCommerce frontends are infinitely more complex than a standard publication or marketing site. If you’re just running core WooCommerce, the built-in blocks are extremely powerful and customizable. Of course, few people are just running core WooCommerce without extensions and customizations. The more bespoke you get, the more customization you need.
I’m planning on covering some more block-based Woo customization techniques in the future on this blog, but I want to start with one that’s probably the most common pain point I’ve heard- custom product template pages.
Product pages are landing pages
Product pages are tough. On the one hand, they should feel consistent. They have to include all the expected functionality for picking variations, adding to cart, etc. However, products pages are marketing pages, and sometimes they need some extra content and design flourish.
In the site editor, you can already create one-off custom product templates. It only applies to one product, but it does allow you to create a more customized one-off landing page.
But what if you want custom template for different collections of products, like all products in a specific category, or all subscription products?
For that, we’re going to rely on two core features of WordPress- one that’s very old, and one that’s relatively new.
1. Custom block templates
Let’s start with the plugin template registration API, introduced in WordPress 6.7. It’s a fancy name, but you just need to know one simple function:
register_block_template( string $template_name, $args = array() )Code language: PHP (php)The site editor automatically lets you manage and edit all the templates you need for content types, archives, taxonomy pages, and so on. But if a plugin wants to register a custom block template, this function is the way.
The original goal of this API was to allow plugins to include default template designs for their custom post types, something that traditionally was only allowed in themes. For example, WooCommerce uses it so it can provide default block templates for Products and other pages. This is helpful if your theme doesn’t include templates for WooCommerce pages.
But this function actually lets you register any new block templates to show up in the site editor, whether there’s a specific use for it or not.
2. Type template hierarchy filter
Next, we’re going to use a filter that’s existed since WordPress 4.7: {$type}_template_hierarchy – specifically the single_template_hierarchy filter.
Classic theme developers are very familiar with the template hierarchy, the very flexible way in which WordPress decides what template to use for different parts of your site.
In this demo, we’re going to hi-jack the template hierarchy and insert our custom templates based on the product post object.
Putting it all together
In this example plugin, I put these two techniques together. We register our custom templates, then we inject them into the template hierarchy. I also do a few extra things for convenience and performance.
The example focuses on custom templates for products based on category. However, the logic could be adapted to other conditions, like product type or any other product taxonomy you have.
I only register the templates I know that I’ll need. Technically I could loop through all the product categories and create a template for each one. That’d be expensive, especially when loading the site editor, which loves rendering unnecessary thumbnail iframe previews for some reason.
Or I could have built a settings page where you select conditions for what templates you want. But I didn’t do any of that. I kept it simple.
The original point of this template registration API is not just to render the template, but to provide a default template design, like Woo does. I did things a little differently.
When you want to control the design of the template from your plugin’s code, you include the HTML markup in your plugin and return it as the content parameter in register_block_template(). Built-in version control.
In this example, though, instead of the plugin hard-coding a default design for these templates, it dynamically pulls your site’s Single Product template as the default value. This means that if you don’t override one of these templates, it’ll always fall back to whatever your main Single Product template is. That said, if you don’t plan on customizing the template, don’t bother registering it. Keep it lean.
Interested in trying? Clone the repo. Or point your agent at it and tell it to use this technique. There may be some rough edges, so give it a try and let me know what you think.
Next up, I plan on digging into custom Product fields, and some of the easiest/best ways to include them in your Product page designs.
Leave a Reply