Our brand, and how we use it.
This is the WooCommerce style guide. Here you'll read about our lovingly crafted brand, its graphic assets, as well as internal guidelines for using these various resources.
Trademark Guidelines
Automattic Inc. owns and oversees the trademarks for Woo™, WooCommerce®, and WooThemes® names, logos, and related icons (aka the “Woo Marks”).
The goal of these guidelines is to prevent Woo Marks from being used to trick or confuse anyone looking for official WooCommerce or WooThemes resources, and to clarify how legitimate Woo-related businesses and projects can legally use Woo Marks.
We want to encourage legitimate Woo-related products and services, but we reserve the right to take action against anyone who uses any Woo Marks improperly and/or without authorization.
The Details
There are some cases where you can use Woo Marks without asking permission, and some for which our advance permission is required.
You can use Woo Marks without advance permission to:
- Truthfully describe WooCommerce or WooThemes products.
- Report news or information about WooCommerce, WooThemes, or Automattic.
- Link to our sites.
Whenever you use our marks, please always follow the Woo Style Guide below.
If you’d like to use a Woo Mark for reasons other than those listed above, please ask our permission by contacting us via the handy form at the bottom of this page. We’ll review all requests and grant permission to high-quality projects that further the WooCommerce and WooThemes communities. Please note that we do not allow the use of Woo Marks in advertising.
Here are more examples of when you need and don’t need our permission to use a Woo Mark.
You can use a Woo Mark without permission if you want to: | You need our permission before using a Woo Mark if you want to: |
Describe your products or services. E.g., “We offer consulting services for small businesses using WooCommerce.” |
Include it in your company name, logo, or branding. E.g., “The WooCommerce Consulting Company.” |
Refer or link to the official products. E.g., “We provide services for products available at WooCommerce.com.” |
Use it in any way that suggests a relationship with or endorsement from Automattic. E.g., "WooUpgrade," "Woo Consulting,” or "WooThemes Bundles.” ("Bundles for WooThemes" would be ok.) |
Engage in non-commercial projects that promote the spread of official products. E.g., Using the WooCommerce logo to advertise a free class sponsored by a nonprofit. |
Use it in commercial projects to sell products. E.g., Reselling our plugins or themes using our logos. |
Use "Woo" in a domain name, provided that it is not a reference to WooCommerce or used in a way that suggests an affiliation to Automattic. E.g., TechWoo.com may be ok if your site/product has nothing to do with WooCommerce and does not suggest any affiliation to Automattic. |
In a domain name, use the marks "WooThemes" or "WooCommerce" in any way, or use "Woo" as a reference to WooCommerce or in a way that suggests an affiliation to Automattic. E.g., BestWooThemes.com, WooCommerceConsulting.com, or TheWooShop.com. |
When in doubt about your use of any Woo Marks, please contact Automattic at trademarks@automattic.com for clarification.
Permission for use of Woo Marks
Please note that we will only grant permission if you provide a comprehensive explanation of how the Woo Mark(s) will be used. If granted, permission will be revocable at any time and is limited to the use specified.
Logo
The WooCommerce™ logo and logo variations are the property of WooCommerce® and the owner retains all rights afforded by US and international Law.
- WooCommerce
WoocommerceWhoocommerceWoo Commerce
Ask First. Permission from WooCommerce is required to use the WooCommerce name or logo as part of or in conjunction with any commercial project, product, service, or event and any domain or company name.
Proceed as you were. You may freely use the WooCommerce name or logo for use in non-commercial endeavors as long as there is no attempt to create the appearance of an official relationship or endorsement between the trademark owner and your endeavor. Please disclose these terms at all times.
Right of Refusal. Trademark owner retains the right to revoke permission and use of protected assets at anytime for any reason.
Download Woo Logo Pack. Contains .eps & .png versions of WooCommerce logo, in both dark and light version.Palette
These are the colors that form the WooCommerce brand & website. Below you will find information about each color and how best to use it.
-
WooCommerce
Used to distinguish WooCommerce from the rest of our Product range. Used for all WooCommerce related call-to-actions.
#96588a -
Dark Grey
Secondary background color.
#3c3c3c -
Green
Used for 'high priority / call-to-action' buttons & text links. Works well as contrasting color on light blue background.
#71b02f -
Light Grey
Subtle background color. Used for table alt rows, inactive buttons and to highlight content blocks on a white background.
#f7f7f7 -
Border color
Used for all borders and separating elements.
#e6e6e6 -
White
Plenty of whitespace. Less is more.
#ffffff
Typography
We use one typeface on WooCommerce.com, namely Proxima Nova.
Proxima Nova is used for body copy, and headings (h1, h2, h3, h4, h5, h6).
- Proxima Nova Light
- Proxima Nova Regular
- Proxima Nova Semi-Bold
- Proxima Nova Bold
Loaded via Typekit.
Website Style Guide
Here you will find all the common HTML elements used accross the site.
Coding Standards
As we're a WordPress based company, we prefer to follow their coding standards as well. This applies to both here on WooCommerce.com, as well as our product range. Please refer to this guide for CSS coding best practices.
Typography
This is an H1 heading
Avoid using full page width paragraphs as much as possible. Try to keep to a maximum of 12 words per line for best legibility.
This is an H2 heading
Our huge portfolio of WordPress themes covers most niches. All powered by our versatile WooFramework you get a beautiful site with incredible flexibility. The perfect building block for designers and developers. Our huge portfolio of WordPress themes covers most niches. All powered by our versatile WooFramework you get a beautiful site with incredible flexibility. The perfect building block for designers and developers.
Icons
Font Awesome
-
-
-
-
There are hundreds more icons in the FontAwesome library.
You can use these icons anywhere using the '.iconbefore' and '.iconafter' LESS functions and setting the CSS content property to the character you want.
Example:
SVGs
SVGs can be used anywhere you use normal images. You can load them via HTML, or set them as CSS background images. They are infinately scalable and offer great flexibility and customisation options. You can read more about the advantages of using SVGs here.
Forms
Tables
Order | Subscription |
---|---|
18924 | Standard Subscription |
18925 | Standard Subscription |
Notifications
- A WooCommerce info message with a list
- Another list item inside this message
- Testing what a text link will look like.
- A WooCommerce error message with a list
- Another list item inside this message
- Testing what a text link will look like.