Attributes are mostly useful for searching and filtering products, and hence by assigning attributes to products, users can quickly filter them and narrow their search on your shop.

What are product attributes?

Generally speaking, WooCommerce allows you to set global attributes that can be applied later to any new or existing products.

As an example, if you are in a fashion or clothing business, you might have a different size chart per product variation and could make an attribute for size accordingly. Doing this will enable your customers who are looking for medium size clothes to quickly find the relevant t-shirt, hoodie, or pants with medium size attribute.

Are attributes same as variations?

Attributes are often get confused with variations, but in fact, they are entirely different.

Variations are not typically used for searching or filtering products and, the original purpose of defining them is to allow users to choose different options of a product to purchase.

Attributes and variations often rely on each other to work as expected, and in fact, variations are defined based on attributes, therefore, creating attributes is an essential first step before creating variations or any variable product.

Add or edit attributes

Attributes can be managed by navigating to the Products » Attributes screen and similar to categories on your products, you can add, delete, and edit product attributes as well.

woocommerce-product-attributes
Managing WooCommerce product attributes
  1. Log into your WordPress website and navigate to Products » Attributes.
  2. Enter a Name.
  3. Optionally, enter a Slug.
    • This is the URL-friendly version of the name.
  4. Optionally, Enable Archives.
    • If enabled, you can view a page with all products having this attribute.
  5. Optionally, alter the Default sort order.
    • Name — Sorts alphabetically.
    • Name (numeric) — Sorts based on numerical value.
    • Term ID — Sort by generated term ID.
    • Custom ordering — You can drag and drop the terms in this attribute to determine the sort order of the terms on the front-end shop product pages.
  6. Optionally, specify type of the swatch to use for this attribute.
    • Image — Display a preview of each variation’s actual appearance.
    • Color— Display product’s color options in one place.
    • Text — Display product attributes as clickable text-based options.
  7. Click Add attribute button to save your new attribute.
  8. The attribute will be added in the table on the right, but without values.

Attribute archives

As an example, in case you have this option enabled, and black is one of the terms under color attribute, you may add https://www.example.com/pa_color/black to your menu to only display black clothing.

In the above URL structure pa stands for product attribute.

Attribute swatch fieldset

By default attributes of a variable product are shown within drop-downs and transforming these fields into labels, images, or color swatches would make your product page more eye-catching as your customers can preview what exactly they’re purchasing when they click on a variation. CONJ PowerPack’s built-in attribute swatches gives you a variety of swatch types to choose from:

attribute-swatch-fieldset
Editing attribute swatch fieldset
  • Shape — Shape of the swatches to be displayed on archive and single product pages.
    • Round
    • Square
  • Size — Size of your swatches on the front-end.
    • Width in pixels ― Default 30.
    • Height in pixels ― Default 30.
  • Enable tooltips ― Displays a tooltip to specify extra information when the user moves the mouse pointer over a variation element.
  • Display in archives ― Displays available swatches of this attribute in the catalog listing (archive) for each product.
  • Append to filters ― Injects this attribute to the WooCommerce layered navigation filter widget.
  • Groups ― Enables you to split attribute terms into different groups to provide a better user experience.

Configure terms for attribute

Once you have created an attribute, you would be able to add variations (terms) of it. Select the Configure terms text to add attribute values.

attribute-configure-terms
Configuring terms for a product attribute

Follow the steps below to assign a term to the selected attribute:

product-attribute-add-terms
Managing terms for an existing product attribute
  1. Enter a Name.
  2. Optionally, enter a Slug.
    • This is the URL-friendly version of the name.
  3. Optionally, enter a Description.
  4. Depending on your attribute swatch type you may find an extra option to define color or image of the new term.
    • Color — Select a color using color-picker or type in the HEX value for the color.
    • Image — Upload an image or thumbnail via media library.
  5. Click Add new [attribute] button to save your new term.

Table of terms

This table lists all of your product attribute terms by row and contains the following columns:

  • [ ✔] — A checkbox that when clicked (checked), selects that particular brand to be deleted with a bulk action.
  • Swatch — Color or thumbnail of the swatch.
  • Group — Group label or name.
  • Name — The name of the term.
  • Description – Terms may have an optional description.
  • Slug — The slug of a term, and usually in lower case letters.
  • Count — The number of products which are members of the term.

Note that deleting a term will remove it from all products and variations to which it has been assigned and recreating a term will not automatically assign it back to products.

Search through terms

Above the table, to the right, is a search box where you can enter a word, or series of words, and click the Search [attribute] button to search and display all the terms meeting your search words.

Quick edit

The following fields can be modified via the Quick Edit section:

product-attribute-term-quick-edit
Quickly editing product attribute terms
  1. Term name — To reiterate, the term name must be unique.
  2. Term slug — Again, the term slug also must be unique.

Screen options

The Screen Options allow you to choose which columns are displayed, or not displayed, in the underlying Table. Clicking on the screen options tab will show a list of columns with a check-box next to each column.

Also, the number of terms to display in the Table of Terms can be set and modified from here.

Sorting terms

Attribute terms can also be reordered or sorted by dragging and dropping. The term color or thumbnail will then be organized in the same order that they appear in the back-end.

product-attribute-term-sorting
Sorting attribute terms by dragging and dropping

This order is used by default on the front end whenever the terms are listed. This includes both widgets and the single product page view on your shop.

Assigning global product attributes

While adding a new or editing any existing variable product via Products » Add Product, you can select one or multiple attributes by following the steps below:

assign-product-attributes
Adding product attributes to use for variations
  1. Navigate to Products tab.
  2. Click the Add New sub-tab or edit an existing product.
  3. Scroll down to the Product Data section.
  4. Select the Attributes tab.
  5. From this tab you would be able to choose any of the global attributes that you’ve created in the drop-down menu.
  6. Select one from the drop-down and Add.
  7. Choose Select all to add all attributes to the variable product (if applicable).
  8. Check the Used for variations checkbox to notify WooCommerce that these terms will be used for variations later.
  9. Click Save attributes button.

Creating custom product attributes

per-product-attributes.
Adding custom product attributes to individual product
  1. Select the Attributes tab.
  2. Select Custom product attribute from the drop-down menu and click Add.
  3. Name the attribute (e.g. Size)
  4. Set values separated by a vertical pipe (e.g. small | medium | large)
  5. Check the Used for variations checkbox to notify WooCommerce that these terms will be used for variations later.
  6. Click Save attributes button.

Creating product variations

product-variations
Creating product variations
  1. Select the Variations tab.
  2. Select Create variations from all attributes from the drop-down menu, and click Go.
  3. To change additional data, click the triangle icon ˅ to expand the variation.
  4. Edit any available data.
    • The only required field is Regular Price.
  5. Click Save changes button.

Overriding global swatches

override-product-attribute-swatches
Overriding existing global swatch type
  1. Select the CONJ PowerPack tab.
  2. Locate the Attribute Swatches section.
  3. Click the triangle icon ˅ to expand the attribute you’d like to modify or override — e.g. Color.
  4. Select the new Swatch Type you’d like to use.
  5. Selecting a visual swatch type such as color or image will append a few extra fields to alter depending on how many attributes you defined previously.
  6. Edit any other available data.
  7. Click Update or Publish button to save changes.

Filter attributes by widget

Filter Products by Attribute is a powerful widget that lets users drill-down through your catalog of products via attributes, effectively helping them find what they’re looking for quickly.

filter-products-by-attribute-widget-front-end
Filter product attributes by widget
filter-products-by-attribute-widget
WooCommerce Filter Products by Attribute widget
  1. Navigate to Appearance » Widgets.
  2. Locate “Filter Products by Attribute” widget and drag it to the sidebar area where you wish it to appear or click the widget, (select a destination sidebar) and then, click the Add Widget button.
  3. Choose an attribute to filter by.
  4. Select “List” from “Display type” drop-down field.
  5. Choose AND or OR query type:
    • AND ― If a user selects two attributes, only products which match both attributes will be returned.
    • OR ― If a user selects two attributes, products which match either attribute will be returned.
  6. Click the Save button.

Last updated: 3 weeks ago

We use cookies to personalize your experience. By continuing to visit this website you agree to our use of cookies ― Learn more

Accept