Theme design guidelines

This page covers general guidelines and best practices to follow so your theme experience aligns with ecommerce industry standards and WooCommerce. A strong theme design should support a great online shopping experience, maximize sales, remain easy to use, integrate cleanly, and encourage strong UX adoption.

We recommend you review the UI best practices for WordPress to ensure your theme is aligned with the WordPress theme requirements.

Make sure your theme fits one or more industries currently available in the WooCommerce themes store. The theme should offer enough originality and distinctiveness in its design, while keeping it familiar, to be distinguished from other themes on the WooCommerce theme store. Your theme should avoid copying existing themes on the WooCommerce theme store or other WordPress theme marketplaces.

Design

High-quality design is an important aspect of an online store, and that is driven by the theme design and content. The design of the theme should be simple, consistent, uncluttered, memorable, intuitive, efficient, and functional. When designing a new theme for WooCommerce, pay special attention to the following areas.

Layout

The theme should be up to industry standards in terms of hierarchy, flow, content balance, and white space.

Theme authors must ensure that store pages, such as shop, product page, categories, cart, checkout, and profile pages, fit seamlessly with the theme since they are the central point of a WooCommerce theme.

The theme is expected to be fully functional and optimized for common device types such as laptops, tablets, and smartphones.

Typography

The theme should provide elegant and legible font pairings that promote a comfortable reading experience.

Consistent and harmonious font sizes, line widths, and spacing must be employed across all pages and device types.

The theme typography must consist of a small number of typefaces that complement each other, generally no more than two.

Use proper capitalization, avoiding all caps with the exception of some UI elements such as buttons and tabs.

Iconography

Icons used in the theme should portray a direct meaning of the actions or situations they represent and be used consistently regarding sizing, positioning, and color.

Color

The theme must follow a harmonious and consistent color scheme across UI elements and all pages. The color scheme should consist of a small number of colors that contain:

• A primary or accent dominant color
• One or two secondary colors that complement the primary color
• Neutral colors, such as white, black, and gray

The color palette used in text and graphical UI components must be compliant with the WCAG AA conformance level or above.

Patterns

The theme must employ a consistent set of patterns that are used across pages, such as:

• Navigation, sidebars, and footer
• Content blocks, such as titles, paragraphs, lists, product details, reviews, and image showcases
• Forms structure and elements, such as fields, drop-downs, and buttons
• Tables
• Lists
• Notices

Accessibility

Your theme must meet the WordPress Accessibility Coding Standards.

For more information on accessibility, check out the WordPress accessibility quick start guide.

Branding

The theme must not contain any branding or references to theme authors in locations that interfere with the normal operation of an online store. Theme authors can include links to their websites on the theme footer. Affiliate linking is not permitted.

The interface should solely focus on the experience. The usage of notices, banners, large logos, or any promotional materials is not allowed in the admin interface.

Customization

This section applies to development of non-block themes only. For more specific guidance on development of block themes, refer to the WordPress Developer's Guide to Block Themes.

Themes have to rely on the customizer for any type of initial setup. Specific onboarding flows are not permitted.

Any customization supported by the theme, such as layout options, additional features, block options, etc, should be delivered in the customizer or on block settings for blocks that are included in the theme.

Themes should not bundle or require the installation of additional plugins/extensions or frameworks that provide additional options or functionality. For more information on customization, check out the WordPress theme customization API.

On activation, themes shouldn't override the WordPress theme activation flow by taking the user into other pages.

Demos and sample content

Upon submission, theme authors must provide a way for the theme to be showcased and tested. The sample content or demo should refrain from using custom graphics or assets that will not be present in the deliverables to avoid merchant confusion and broken expectations, such as using logos or illustrations. When creating a theme for a specific vertical, theme authors should consider using sample content that aligns with the vertical.

All imagery and text should be appropriate for all ages and family-friendly. The theme author should consider using imagery that is inclusive of ages, nationalities, etc. The theme should refrain from using imagery that looks like stock photography.

The theme must be distributed and cleared of all the necessary licenses for assets such as images, fonts, icons, etc.