Skip to main content
Back to Blog
WooCommerce block theme customization with product pages in the Site Editor
WooCommerce

WooCommerce Block Theme Customization: Product Pages in the Site Editor

Learn how WooCommerce block theme customization works in the Site Editor: template hierarchy, 10.6 block changes, and synced patterns for product pages.

SE
Summix Editorial Team
· 7 min read

WooCommerce Block Theme Customization: Product Pages in the Site Editor

If your store runs a block theme, the Site Editor replaces the Customizer as the primary tool for WooCommerce block theme customization. That shift changes who can modify product pages and how much developer time each change requires. Understanding the template hierarchy, the blocks available in WooCommerce 10.6, and the locking mechanisms that protect layout integrity helps you build product page templates your team can maintain without filing a developer ticket for every update.

How WooCommerce Template Hierarchy Works in Block Themes

The foundation of WooCommerce block theme customization is understanding which template file WordPress loads for a given product page. The WooCommerce template hierarchy in a block theme follows a specificity-first resolution order. When a shopper loads a product page, WordPress checks for templates in this sequence and uses the first match it finds.

Here is the exact order in which WordPress resolves templates for a WooCommerce product page:

Single product resolution order:

  1. single-product-{slug}.html — a template targeting one specific product by its URL slug (highest specificity)
  2. single-product.html — the standard product page template
  3. single.html — the generic single-post fallback

Taxonomy archive resolution order:

  1. taxonomy-product_cat-{term-slug}.html — a specific category archive (e.g., “running-shoes”)
  2. taxonomy-product_cat.html — the general category archive
  3. archive-product.html — the main product catalog
  4. archive.html — the generic archive fallback

The full set of WooCommerce templates available in the Site Editor includes:

TemplateFileFalls Back To
Single Productsingle-product.htmlsingle.html
Product Catalogarchive-product.htmlarchive.html
Products by Categorytaxonomy-product_cat.htmlarchive-product.html
Products by Tagtaxonomy-product_tag.htmlarchive-product.html
Products by Attributetaxonomy-product_attribute.htmlarchive-product.html
Product Search Resultsproduct-search-results.htmlAlways visible

What the hierarchy does not support: Product-type-specific templates for simple, variable, or grouped products do not exist natively. Product types are taxonomy terms within WooCommerce, not separate post types, so WordPress’s template resolution cannot distinguish between them automatically. GitHub Discussion #44956 explored this limitation and the feature was deferred.

If you need distinct layouts for different product types, you have two workarounds. First, you can create per-slug templates (single-product-{slug}.html) for individual products — practical for small catalogs but not scalable. Second, you can manually assign a template to specific products through the post editor’s template selector. Neither option is automatic, so plan your template strategy accordingly — especially if you are also preparing for structural changes like HPOS migration.

What Changed in WooCommerce 10.6 for Block Themes

WooCommerce 10.6 (released March 10, 2026) introduces several changes that expand what is possible with block theme customization on product pages in the Site Editor.

Add to Cart with Options (Beta). The blockified add-to-cart form now supports all product types, including variable and grouped products. Previously, these types required the Classic Template block or custom code. This is a significant step toward full product page blockification.

Product Collection block improvements. The block now includes searchable picker interfaces for Hand-picked, Category, Tag, and Brand collections. Setting up curated product grids is faster and less error-prone than the previous dropdown-based selection.

Lazy-loaded product images by default. Product images load lazily through the new woocommerce_product_image_loading_attr filter. Store owners no longer need a separate performance plugin for this baseline optimization.

Product Filters. Menu-order sorting now works with core taxonomies, giving store managers control over how filter options display to shoppers.

For a deeper look at how 10.6 handles checkout performance, see WooCommerce 10.6 checkout performance improvements.

Performance data based on WooCommerce 10.6 developer preview; verify against the stable release.

WooCommerce Block Theme Customization: The Developer-to-Manager Handoff

The real value of WooCommerce block theme customization is not just visual flexibility — it is reducing the number of changes that require a developer. The Site Editor supports a handoff pattern where a developer sets up the template infrastructure once, and a store manager operates independently afterward.

The developer-to-manager handoff pattern:

A developer handles the initial setup: converting the Classic Template to blocks (using the “Transform into blocks” action), configuring template locking, and creating synced patterns for components that appear across all product pages.

The key mechanism is contentOnly template locking. This mode hides the block design tools (spacing, alignment, layout controls) while exposing only text and media editing. The store manager sees a simplified interface where they can update copy and images without the risk of breaking the page structure.

Locking ModeWhat It DoesBest For
templateLock: "all"Prevents insert, move, and removeProtecting critical layout sections
templateLock: "insert"Prevents insert and remove; allows reorderAllowing section rearrangement
templateLock: "contentOnly"Only text and media are editableStore manager handoff

What store managers can do without a developer:

  • Update colors and typography through Global Styles
  • Edit synced pattern content (shipping thresholds, trust badges, return policies)
  • Add promotional banners to product pages
  • Configure Product Collection sorting and filtering
  • Create product-specific templates from existing patterns

What still requires a developer:

  • Initial contentOnly locking setup (applied at the code level)
  • Synced pattern strategy and creation
  • Role-based locking permissions (via the block_editor_settings_all filter)
  • Template structure and hierarchy changes

Synced Patterns for Product Page Components

Components like trust badges, shipping policy summaries, and promotional banners belong in synced patterns. When a synced pattern sits inside a contentOnly-locked template, the store manager can update the pattern content (e.g., changing a free-shipping threshold from $50 to $75) and the change propagates to every product page instantly — without touching the template layout.

This combination of template locking and synced patterns is what turns the Site Editor from a design tool into a workflow tool. The developer defines the boundaries; the store manager operates freely within them.

Next Steps

WooCommerce block theme customization in the Site Editor gives store teams a structured way to divide responsibilities between developers and day-to-day operators. Start by understanding your template hierarchy and its current gaps (especially around product types), evaluate what WooCommerce 10.6’s block improvements unlock for your catalog, and invest the developer time upfront to configure template locking and synced patterns. That initial setup pays back every time a store manager ships a change without a developer ticket.

For more on how recent WooCommerce releases improve store performance, see our coverage of WooCommerce 10.5 performance improvements.


Frequently Asked Questions

Do I need a child theme to customize WooCommerce in a block theme?

No. Block themes use the Site Editor for WooCommerce block theme customization, not PHP template overrides. Child themes are a classic-theme pattern. When you edit a WooCommerce template in the Site Editor, your changes are saved to the database and persist through theme and plugin updates.

How do I reset a WooCommerce block template to its default?

Open the Site Editor, navigate to Templates, select the WooCommerce template you want to reset, click the three-dot menu, and choose “Clear customizations.” This reverts the template to the version shipped with your theme or WooCommerce, while keeping all other templates unchanged.

Can I have different product page layouts for different product categories?

Yes, but through taxonomy archive templates rather than single product templates. WooCommerce block theme customization at the category level uses taxonomy archive templates like taxonomy-product_cat-{term-slug}.html in the Site Editor. For individual product pages with different layouts, you need to assign templates manually per product or create per-slug templates — there is no automatic product-type-based template resolution in the current hierarchy.

Can I customize WooCommerce product pages without code?

Yes, for most day-to-day changes. The Site Editor lets store managers update colors and typography through Global Styles, edit synced pattern content (shipping thresholds, trust badges, return policies), add promotional banners, and configure Product Collection sorting — all without writing code. Initial template setup (configuring locking, creating synced patterns, defining role permissions) still requires a developer, but the ongoing maintenance workflow is code-free.