The brands extension for WooCommerce allows you to create brands for your shop; each brand can be named, described and assigned an image.
Installation ↑ Back to Top
To install the brands extension:
- Download the extension from your dashboard
- Upload the plugin folder to your /wp-content/plugins/ directory
- Activate ‘WooCommerce Brands’ from the Plugins menu within WordPress
Usage ↑ Back to Top
To start adding brands, first browse to Products > Brands. The interface works just like adding categories and tags; the form on the left lets you add a brand and then they are displayed on the right.
Give brands a name, description, and optionally an image. Brands can also be hierarchical:
When you’ve added your brands they will be listed on the right. You can edit them by clicking their names, or re-order them by dragging and dropping.
Assigning a brand to a product
Assigning brands to products is the same process as adding categories and tags:
Please note however, when showing brands on the single page, some of the shortcodes will only pull 1 brand rather than all.
Shortcode Reference ↑ Back to Top
To display the brands, you can use Shortcodes. Shortcodes are fast ways for us to call in complicated code, giving you tons of options with just a few keystrokes.
Each shortcode has a base which determines what you’re trying to display, and optional arguments (args) that set certain features or options.
Possible Shortcode Bases
Shows a brand’s image with a link to its archive page. This only works on product pages, not on posts or other WordPress pages.
width– Define image width – should be written with a suffix ‘px’, i.e.
height– Define image height – should be written with a suffix ‘px’, i.e.
class="aligncenter"– Aligns image to the center of the designated space
class="alignleft"– Aligns image to the left of the designated space
class="alignright"– Aligns image to the right of the designated space
- You can add a custom CSS class through this method – if you had the image class
customclass, then you would set
Shows an A-Z index of brands with links to archive pages.
show_top_links(default: true) – Show top links refers to “back to top” links under each brand section.
show_empty_brands="true"– Lets you show brands which have no products inside.
show_empty_brands="false"(hides brands) – Hide letters for brands with no products, otherwise they are greyed out.
Shows a list of product brand thumbnails with links to their archives.
columns(default: 12) – Set how many columns for your brand images you would like across.
show_empty(default: true) – Lets you show brands which have no products inside.
show_empty="true"(shows brands) – Lets you show brands which have no products inside.
show_empty="false"(hides brands) -Hide images for brands with no products, otherwise they are greyed out.
orderby(default: name) – Sets the order of the listings
exclude– Category IDs to exclude, comma separated (i.e. 2,5,8 will exclude category 2, 5, and 8 from the display)
number(default: all) – Sets the number of brands displayed (leave blank for all)
To put base arguments and optional arguments together, you simply separate them with a space in your shortcode. For example, let’s say we wanted to show the brand image on a product page. We’d like the brand image to be a 64px*64px square, and float to the left side of the description box. To get this effect, we would use:
[product_brand width="64px" height="64px" class="alignleft"]
In another situation, we want to show an A-Z list of all products, regardless of if they have products in them or not. We would use:
To use a shortcode, you would copy the text starting with “[" and ending with "]“, then paste that into your editor. To get the shortcode to display on multiple pages, you would want to add it into a template using the do_shortcode function, as seen here:
// Added to short-description.php Line 17
echo do_shortcode('[product_brand width="64px" height="64px" class="alignright"]');
This would generate a right-aligned 64px*64px brand image right above your item’s Short Description, near the product image.
Adding a Brand Image to the Product Page
In some situations, you may want to display the brand image associated with the product in your product page, as shown below:
There are two ways to implement this, either on a single product basis or applying to all products.
To apply to a Single Product
In the product’s body area, you can add the shortcode
[product_brand width="64" height="64" class="alignright"]
In that example, it would link to the brand of the product, establish the width and height in pixels (each 64), and align it to the right side. The ‘class’ field isn’t required – it’s by default set to ‘aligncenter’, but you can do left or right as well.
To apply to All Products
First, you should make sure that you’re making edits in a child theme – this allows you to customize your content without running the risk of an update removing your work. To learn more about how to customize a child theme, please visit our child theme tutorial, or you can read more about how child themes work in the WordPress Codex.
Then, you would open up the template file in your child theme and enter the following code (wrapped in a PHP tag) where you want the image to display:
echo do_shortcode("[product_brand width="64" height="64" class="alignright"]");
You’ll notice its just the same as the shortcode before, but wrapped in a PHP tag so you can apply it everywhere.
Widgets ↑ Back to Top
To learn more about how to add the Brands Widgets listed below to your site please see our tutorial here: How to Add Widgets
This widget shows the description for the currently viewed brand archive.
This widget provides layered navigation for products based on brand.
This widget lists brands with thumbnails.
Functions ↑ Back to Top
get_brand_thumbnail_url( $brand_id )
Get a brands image for use within PHP code.
get_brands( $post_id = 0, $sep = ‘, ‘, $before = ”, $after = ” )
Gets a comma separated list of brands for a product.
Settings ↑ Back to Top
The settings can be found in WooCommerce > Settings > Catalog.
- Show description – Choose whether or not to show the brand description on the archive. This is useful if you want to show the description in your sidebar via a widget instead.