If a Featured Category block looks correct in the editor but different on the storefront, compare the same saved block under the same theme before adding override CSS. WooCommerce 11.3 expands its styling controls, which makes the distinction between block settings, theme styles and cached output important during upgrade testing.
This is a prerelease staging checklist, checked October 29, 2026. It does not claim that every Featured Category layout has a regression.
Save the smallest reproducible example
Create a private test page with two Featured Category blocks. Use a synthetic category with an image and another without one. Give the second a longer title and a short description. Record which category each block references before modifying any design setting.
Save the page, then compare editor preview with an authenticated preview and the approved logged-out staging view. Use equivalent viewport sizes. A narrow editor canvas and a wide storefront can legitimately wrap text differently; that alone does not establish a rendering bug.
The implementation adds controls across typography, colors, spacing, borders, dimensions and content alignment. Core block supports generate the supported styles, with an inner layout adjustment at rendering. Check the actual control available in your build instead of assuming every WooCommerce block exposes the same settings.
Change one setting at a time
Start with a visible but modest padding change. Save, reload and record the computed result on the storefront. Repeat for text color, border and vertical alignment. If a combined redesign fails, you otherwise will not know which setting created the mismatch.
For each difference, note the block's saved setting, the rendered element carrying it and the winning CSS rule. A theme selector with higher specificity can override a valid block declaration. Conversely, adding more CSS specificity will not fix a value that was never saved or emitted.
| Fixture |
What to inspect |
| Image category |
Text contrast against bright and dark image areas |
| No image |
Background, height and empty-image treatment |
| Long title |
Wrapping, overflow and overlap with the link |
| Long description |
Whether content pushes the call to action out of view |
| Narrow screen |
Padding, readable text and touch target separation |
Featured Category acceptance checklist covers identity, readability, responsive fit and keyboard focus. Synthetic explanatory visual.
Keep category identity and links in the test
Click the category destination and verify it is the intended archive. A visually attractive card linked to a different category is a functional failure. Repeat after duplicating the block and selecting a different category, because copied settings should not preserve the wrong destination.
If nested product details show the wrong item, that is a separate block-context problem. Do not attribute incorrect content identity to styling controls without checking the underlying context.
Where your layout uses Terms Query, test its actual output with several known categories. Avoid making a new catalog architecture part of this styling repair. First demonstrate that one standalone Featured Category behaves correctly, then compare the repeated layout.
Check the source of cached output
When the saved settings appear only to administrators, compare response freshness and the affected page's cache layer. Purge only the relevant page and generated styles through the site's supported controls. Do not delete unrelated uploads or run a full database cleanup to investigate a color mismatch.
Keep a copy of the original block markup and theme version. If you temporarily remove a theme override on staging, change only the relevant rule and retest both fixtures. A default-theme comparison can help identify ownership, but it is not proof that replacing the production theme is necessary.
Define a visual and functional acceptance record
Capture desktop and narrow-screen views showing the saved title, readable description, intended image and working category link. Tab through the interactive elements and confirm focus remains visible. Retest the no-image case so the repair does not depend on one unusually convenient photo.
For the wrong catalog template, follow the Shop template guide. For a confirmed block/theme styling conflict, request a focused WooCommerce layout fix with before-and-after fixtures and the winning CSS rule.
Reference and review date
Primary technical reference. Sources checked October 29, 2026. The proposed procedures and original diagrams are explanatory test aids, not claims of customer testing or measured improvements.