Product, archive, and cart templates without fighting Woo markup. On Bricks Genius projects we treat this as a design-system problem first and a builder-panel problem second. If the system is clear, Bricks is fast. If the system is improvised, every new page invents another exception.
This article is intentionally long and media-heavy so you can stress-test blog typography, embeds, captions, and code chrome. Skim the headings if you only need the checklist; dig into the examples when you are wiring templates.
We will cover structure, CSS ownership, editor experience, and verification. The goal is a pattern you can reuse across service silos without rewriting the same section twelve times.
Context and constraints
Before changing templates for woocommerce, write down what must not break: header/footer inheritance, SEO titles, form endpoints, and any load-where-used CSS chunks. Rebuilds fail when those constraints stay tribal knowledge.
- Keep semantic class names that already have CSS chunks
- Prefer components for repeating blocks
- Do not paste page bodies into Code elements
- Gate decorative motion behind prefers-reduced-motion
- Verify desktop and mobile after each structural change
Working example
The embed below is sample media for player and iframe styling — not a product endorsement. Use it to check aspect-ratio wrappers, focus outlines, and caption spacing in your single-post template.
Implementation notes
Keep configuration close to the template map. When a setting only exists inside a Bricks panel with no documentation, the next builder will rediscover it by breaking production.
// Example config sketch for: WooCommerce
$template = [
'slug' => 'woocommerce-bricks-templates',
'enqueue' => ['base', 'blog', 'faq'],
'components' => ['eyebrow', 'cta', 'related-card'],
'motion' => 'reduced-aware',
];
if (!empty($template['enqueue'])) {
foreach ($template['enqueue'] as $chunk) {
// wp_enqueue_style("bricksgenius-{$chunk}");
}
}CSS ownership
Shared visual rules belong in child-theme CSS chunks keyed to BEM classes. Page-scoped CSS blobs that re-paste entire stylesheets become debt. If a rule is useful on two pages, promote it.
.post-content iframe,
.post-content video {
max-width: 100%;
border-radius: var(--radius-sm, 6px);
}
.post-content pre code {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 0.9em;
line-height: 1.6;
}Interactive / third-party embed
Iframes need explicit titles, lazy loading where safe, and a containing wrapper so wide embeds do not blow out the reading column. Test keyboard focus into and out of the frame.
Video player chrome
Native video elements exercise different UI than YouTube embeds — controls, poster frames, and fullscreen. Style both if your blog design supports media-rich posts.
Editor and content workflow
Editors should change copy and media, not invent structure. Expose component props for text and icons. Keep placeholders labeled. Do not invent client names or metrics for demos that will ship.
Structure before style. Media before decoration. Verification before launch.
- Draft in staging with real featured-image aspect ratios
- Confirm embeds do not cause cumulative layout shift
- Check code blocks for horizontal scroll on mobile
- Ensure iframe titles are descriptive for assistive tech
Verification checklist
When woocommerce work is done, walk this list once on staging and once after deploy. Catching cascade bugs after launch is more expensive than a boring checklist.
- Single post: headings, lists, quotes, code, image, video, iframe
- Archive card: title clamp, thumbnail ratio, excerpt length
- Related loop empty state if category is sparse
- Reduced-motion path still shows media controls without decorative motion
- No console errors from blocked embeds on strict browsers
If you only take one idea from this post: keep media embeds in predictable wrappers and keep CSS in shared chunks. Bricks stays pleasant when the blog template is treated like a product surface, not a dumping ground for one-off HTML.
Addendum for design-testing depth: long-form posts reveal whether your single template can handle sustained reading rhythm, sticky share bars, and mid-article media without collapsing margins. Keep vertical spacing tokenized, and avoid one-off padding on individual embeds.
Also re-check print styles and reader-mode stripping if those matter for your audience. Embeds will disappear in some readers; the surrounding copy should still make sense without the iframe.
Addendum for design-testing depth: long-form posts reveal whether your single template can handle sustained reading rhythm, sticky share bars, and mid-article media without collapsing margins. Keep vertical spacing tokenized, and avoid one-off padding on individual embeds.
Also re-check print styles and reader-mode stripping if those matter for your audience. Embeds will disappear in some readers; the surrounding copy should still make sense without the iframe.
