Search

WC Brands

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:

  1. Download the extension from your dashboard
  2. Upload the plugin folder to your /wp-content/plugins/ directory
  3. Activate ‘WooCommerce Brands’ from the Plugins menu within WordPress

Usage ↑ Back to Top

Creating brands

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:

Add a brand here

Add a brand here

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:

Assign brands

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

[product_brand]

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.

[product_brand]

Possible Args
  • width – Define image width – should be written with a suffix ‘px’, i.e. width="64px"
  • height – Define image height – should be written with a suffix ‘px’, i.e. height="64px"
  • class (default: aligncenter)
    • 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 class="customclass"

[product_brand_list]

Shows an A-Z index of brands with links to archive pages.

[product_brand_list]

Possible Args
  • show_top_links (default: true) – Show top links refers to “back to top” links under each brand section.
  • show_empty_brands (default: false)
    • 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.

[product_brand_thumbnails]

Shows a list of product brand thumbnails with links to their archives.

[product_brand_thumbnails]

Possible Args
  • 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)

Combining Shortcodes

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:

[product_brand_list show_empty_brands="true"]

Using Shortcodes

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:

Set to align right, 64px by 64px

Set to align right, 64px by 64px

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

Brand Description

This widget shows the description for the currently viewed brand archive.

Brand Nav

This widget provides layered navigation for products based on brand.

Brand Thumbnails

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 > Products. 

  • 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.

Screenshot on 2014-09-23 at 11-50-34

FAQ ↑ Back to Top

How do I order the brands on the front end as it is showcased on the Admin Panel?

In \wp-content\plugins\woocommerce-brands\classes\class-wc-brands.php, add to Line 22:


add_filter( 'woocommerce_sortable_taxonomies', array( $this, 'sort_brands' ) );

And then add this function after the constructor:

/**
* sort_brands function.
*
* @access public
*/
function sort_brands( $sortable ) {
$sortable[] = 'product_brand';
return $sortable;
}

Please note: We do not support customizations, please use the above snippet at your own risk.
Back to the top