Store Design

WordPress E-Commerce with WooCommerce

Chapter 3 · Store Design

Chapters 1 and 2 covered what a product is underneath. This chapter covers how it actually gets shown to a shopper — WooCommerce's own theme-override system, the official Storefront theme, page-builder compatibility, and the store-specific shortcodes and blocks used to place shop content anywhere on the site.

WooCommerce's Own Template Override System

WordPress Intermediate/Advanced 2 already covered the WordPress template hierarchy — how single.php, page.php, and similar theme files decide how content renders. WooCommerce extends that same idea with its own parallel hierarchy: every page it renders (Shop, single product, Cart, Checkout, My Account) comes from a template file bundled inside the WooCommerce plugin itself, under woocommerce/templates/.

A theme can override any of these by copying the file into an identically-structured woocommerce/ folder inside the theme, and editing the copy:

# the plugin's own original file wp-content/plugins/woocommerce/templates/content-product.php # the theme's override — same relative path, inside the theme's own folder wp-content/themes/your-theme/woocommerce/content-product.php

Every override is a fork you now own

Once a template is copied into the theme, WooCommerce stops using its own version for that page and uses the theme's copy instead — permanently, until it's removed. If WooCommerce later updates that same file (a bug fix, a new feature, a security fix), the theme's own frozen copy never receives it automatically. WordPress Intermediate/Advanced 5's plugin-development chapter already introduced actions and filters as a lower-risk alternative for smaller changes — Chapter 8 of this course returns to that exact idea specifically for WooCommerce, since a hook survives an update that a copied template file doesn't.

Storefront — The Official WooCommerce Theme

Storefront is a free theme built and maintained by Automattic (the same company behind WooCommerce itself), designed specifically around WooCommerce's own template structure rather than adapted to it afterward. It isn't the only theme that works with WooCommerce — any reasonably modern WordPress theme will render a store in some form — but it's the reference implementation worth understanding first.

Storefront (WooCommerce-native)	A general-purpose theme with basic WooCommerce support
Store layout, cart icon, and checkout flow designed around WooCommerce from the start	WooCommerce pages render, but may need real CSS work to match the theme's own design language
Maintained by the same team that ships WooCommerce itself — updates track each other closely	Compatibility depends entirely on that theme's own developer keeping pace with WooCommerce's changes
A minimal, deliberately unopinionated starting point — expected to be customized further	Often more visually distinctive out of the box, at the cost of a less predictable WooCommerce integration

Page Builders & WooCommerce

Popular page builders (Elementor, Beaver Builder, and similar) generally offer dedicated WooCommerce widgets — a product grid, an "Add to Cart" button, a mini-cart — built specifically to read real store data rather than treating a store as static content. Elementor's own paid "Pro" tier, for example, includes a full WooCommerce Builder for customizing the product and archive templates visually, instead of copying and editing PHP template files by hand.

A page builder doesn't replace this chapter's own override system — it wraps it

Under the hood, a page builder's WooCommerce widgets are still rendering the same underlying template structure this chapter already covered; the builder just provides a visual editor for it instead of requiring direct file edits. The same update-safety trade-off named above still applies to any heavy customization made through a builder.

Store-Specific Shortcodes & WooCommerce Blocks

Two separate mechanisms exist for placing store content on any ordinary page — a legacy shortcode system, and the newer WooCommerce Blocks built for the Block Editor WordPress Fundamentals 4 already covered in depth.

[products limit="4" columns="4" category="hoodies"] [add_to_cart id="123"] [woocommerce_cart] [woocommerce_checkout] [woocommerce_my_account]

Shortcodes (legacy)	WooCommerce Blocks (current)
Plain text tags, typed or pasted in	Native Gutenberg blocks — Products, Cart, Checkout — configured through the block editor's own sidebar, matching WordPress Fundamentals 4's own block-editing workflow
Still fully supported — most existing stores still use some of them	The direction WooCommerce itself is actively investing in, including a newer block-based checkout
Configuration lives entirely in the shortcode's own attribute syntax	Configuration is visual, with live preview inside the editor

A real, recent shift worth naming precisely

A block-based Checkout (and Cart) block, built as a genuine alternative to the older [woocommerce_checkout] shortcode-driven page, became broadly available starting with WooCommerce 8.3 (late 2023) and has continued to mature since. New stores are increasingly built on the block-based checkout by default; Chapter 4's own cart/checkout material applies to both approaches, since the underlying order and cart logic is identical either way — only the front-end rendering mechanism differs.

Hands-On Exercises

Exercise 1

A developer copies WooCommerce's own content-product.php into their theme's woocommerce/ folder to change how each product card looks. Six months later, a WooCommerce update fixes a bug in that same file — but the store's product cards still show the old bug. Explain why.

📄 View solution

Exercise 2

Explain what a page builder's own WooCommerce widgets are actually doing "under the hood," according to this chapter, and why they don't eliminate the same update-safety consideration that applies to a manually copied template file.

📄 View solution

Exercise 3

A store owner wants to display a grid of 4 products from a specific category on an ordinary WordPress page, without using the Block Editor. Which mechanism from this chapter should they use, and what would the equivalent Block Editor approach be called?

📄 View solution

Chapter 3 Quick Reference

WooCommerce renders every store page from its own template files under woocommerce/templates/ — a theme overrides one by copying it to an identical path inside your-theme/woocommerce/
A copied template stops receiving WooCommerce's own future updates to that file — Chapter 8's hooks are the lower-risk alternative for smaller changes
Storefront — the official, WooCommerce-native theme, maintained by the same team as WooCommerce itself
Page builders (Elementor, etc.) provide visual WooCommerce widgets, but still render the same underlying template system — not a separate mechanism
Shortcodes ([products], [woocommerce_checkout], etc.) are the legacy mechanism; WooCommerce Blocks are the current, actively-developed one, including a block-based checkout since WooCommerce 8.3
Next chapter: Cart, Checkout & Order Flow