In WordPress and the block editor, patterns and template parts are useful tools for customizing your online store’s layout and design while avoiding the need to build the same designs over and over.
Patterns are pre-designed sections that you can easily insert into your pages and posts. Patterns can be either synced or independent(unsynced), allowing flexibility in how they are used across your site.
Template parts, on the other hand, are reusable components that are always synced, ensuring consistency across all locations they are implemented. Both patterns and template parts are stored in separate groups, accessible through distinct selection interfaces.
Patterns #
A block pattern is a group of blocks that you combine to create reusable layouts. You can reuse block patterns and place them anywhere in the Editor. WooCommerce also comes with a variety of pre-built patterns that you can use to jump-start your page and template designs. Patterns can be used in post or page content, as well as in templates.
To explore block patterns:
- Navigate to WP Admin Dashboard > Appearance > Editor.
- Click on the + icon located at the top toolbar of your screen.
- Click on the Patterns tab.
In the Patterns tab you can explore block patterns specifically related to headers, footers, buttons, WooCommerce, etc.
Once inserted, you can move block patterns around in the editor or remove them just like you would with any block.
Synced vs. Unsynced Patterns #
Patterns are unique in that they have the option to be “unsynced” for additional customization after they’ve been inserted on your site.
When a pattern is synced, a change made to the pattern will be reflected anywhere the pattern is used. If a pattern is not synced, you can insert it and then customize the content and layout for that specific location. Once an unsynced pattern is added to a page, it behaves like a regular collection of blocks. You can change the content of the unsynced pattern, which will only apply to that location.
Adding and Managing Your Own Patterns #
The team at WordPress.com has created an excellent walkthrough for creating and managing custom patterns on your site. Which applies to using patterns around your shop for WooCommerce. We highly recommend reviewing the WordPress.com guide on patterns.
Template Parts #
Block template parts are groups of blocks that are meant to be reused within templates across your site. Using template parts ensures that standardized content, such as headers and footers, stays the same across your site. In contrast to patterns, template parts are always synced, so a change to the template part affects all locations where that template part is used.
To add a template part to a template or page that you’re customizing, you can follow the same process as when adding a block. Use the aptly named “Template Part” block to choose an existing block template part, or create a new one. More information on the Template Part block can be found in the WordPress.org documentation here. Template parts are only available to be added when editing a template, and can’t be added directly to post or page content.
To view all available template parts:
- From your WP Admin area, navigate to Appearance > Editor,
- Click on Patterns,
- Scroll down in the left sidebar to see Template Parts,
- Click “Manage all template parts” to see all template parts, including ones added by WooCommerce.
From here you can create new template parts or manage existing ones!
Questions and support #
Do you still have questions and need assistance?
This documentation is about the free, core WooCommerce plugin, for which support is provided in our community forums on WordPress.org. By searching this forum, you’ll often find that your question has been asked and answered before.
If you haven’t created a WordPress.org account to use the forums, here’s how.
- If you’re looking to extend the core functionality shown here, we recommend reviewing available extensions in the WooCommerce Marketplace.
- Need ongoing advanced support or a customization built for WooCommerce? Hire a Woo Agency Partner.
- Are you a developer building your own WooCommerce integration or extension? Check our Developer Resources.
