JC WooCommerce Advanced Attributes plugin

Author: James Collings
Version: 2.0.7
Created: 11/01/2015
Updated: 05/07/2017

About

Take control of WooCommerce product attribites and easily replace the default variable product dropdowns with Images, text, and Colour Swatches with JC WooCommerce Advanced Product Attributes. Select the default square, or modern circular attribute styles on a per attribute basis, giving your complete control of the look, if this is not enough the display can be tweaked further using the build in style settings page.

With the display of improved attributes on your website, make it easier to manage product attributes with the introduction of attribute groups, allowing you to create sets of attributes that can be simpily loaded onto products with the click of a single button, saving you time and effort.

Features

Installation

  1. Download a copy of the plugin
  2. Copy the jc-woocommerce-advanced-attributes folder to your wordpress plugins directory, usually /wp-content/plugins/
  3. Goto plugins page within Wordpress and activate JC WooCommerce Advanced Attributes plugin

Documentation

Table of Contents

  1. Attribute Grouping Management
  2. Group Simple Product Attributes
  3. Product Attribute Images and Colour Swatches
  4. General Settings

Attribute Group Management

Manage attributes easily by creating attribute groups which can easily be added to products, removing the repetitive task of individually adding each attribute manual per product.

Attribute groups can be managed under Product > Attribute Groups, similar to posts management you are shown a paginated list of all attribute groups, where you can edit/delete exsiting attribute groups by hovering over the group name, or create new ones by clicking on the Add new Attribute Group button displayed at the top of the page.

Attribute Group Management

Add/Edit an attribute group

Once you have clicked on the add or edit button you should see a page where you can set the group title, and list attribites in the current group. You can manage the attributes exactly the same as you would do when editing a product.

Attribute Group Edit

Loading an Attribute Group on a Product

To use an existing attribute group, goto the edit screen of the product you wish to edit and load up the product data attribute tab. Select the previously saved attribute group from the drop down (highlighted below) and click on the button labeled Load to add the attribute group to the exsiting product attributes.

Load an Attribute Group Toolbar


Group Simple Product Attributes

Enabled Product Attribute Grouping

To group product attributes on the product information tab, Start by creating a new attribute by going to "Products > Attributes" and entering the following:

  1. Name - since we want to create a attribute which is nested under a group we want to prefix that attribute with the group name e.g. (Attitude.Bank, Attitude.Elevation), this name will be used to uniquely identify that attribute within the admin area.
  2. Under the advanced attributes display settings labelled Custom Label - enter the Name which you want it to appear under the Group e.g. (Bank, Elevation), this name will be displayed on the product information tab.
  3. Check the Check box under the advanced attributes display settings labelled grouped
  4. Repeat this for all attributes you want to group, keeping the same Group Prefix on attribute names, as this prefix will be used to group them.
  5. To display attribute groups seperated by headings, check the general setting Enable Theme Attribute Template Override

Enabled Product Attribute Grouping


Product Attribute Images and Colour Swatches

Transform your product pages and replace the default variation dropdowns with images, colour swatches, and text (as shown below).

Attribute Variation Output

Transform your product information and include image and colour swatches in the attribute output section (as shown below).

Attribute Variation Output

Change the output of an attribute

To change how terms within an attribute should be output, goto the add/edit screen for that attribute. You should see a new set of fields under the section titled Advanced Attribute Display Settings.

Attribute Group Save

These settings will change how the attribute terms are displayed on the website.

Selector type:
Change what format the attribute terms will be output (image, colour, text and default).

Selector size:
Change the size of attribute terms (small, medium, large). These sizes can be changed in the general settings page.

Selector style:
Change the style of the attribute terms, (default, rounded courners);

Add image or colour swatcher to attribute terms

Once you have configured the attribute display settings in the previous section, depending on the selector_type choice above will determine what is used to output the attribute term.

Attribute Group Save

Colour:
click on the input field and manually enter a hexadecimal colour code or select from the colour picker widget that loads up.

Thumbnail:
Click on Upload/Add Image button to load up wordpress media uploader to select or upload an image, Click on Remove Image to clear the current selection.

Settings

Plugin core settings can be accessed from WooCommerce > Settings > Advanced Attributes.

General Settings

The general settings section allows you to enable/disable featured of the plugin.

General Settings

Enable Attribute Display:
Toggle on/off the functionality of replacing product variation dropdowns with images, colour swatches, and text.

Display attributes on non variable products: Toggle on/off the display of product attubutes on simple products before the add to cart button.

Enable Attribute Groups:
Toggle on/off the functionality of attribute group management features.

Enable Plugin Styles:
Toggle on/off the none core plugin styles.

Enable Custom Plugin Validation: Enable the advanced attribute validation on variable products.

Enable Theme Attribute Template Override: Enable plugin to override woocommerce attribute list, meaning for better display of grouped attributes.

Attribute Display Settings

Modify the look and feel of product attributes on product varions and product additional information tabs.

Display Settings

Attribute Output

Border Size:
Set the numeric value of the outside border in pixels

Default Border Color:
Set the color of the outside border

Active Border Color:
Set the color of the attribute border when selected or hovered.

Padding Size:
Set the numeric value of the inside padding in pixels

Padding Color:
Set the color of the inside padding

Disabled Attribute Opacity:
Set the opacity of a disabled option 0-1, 0 = 0% and 1 = 100%

Enable on Additional Information Tab:
Toggle on/off the display of advanced attributes on the additional information tab.

Choose Grouped Attributes Output: Display grouped attribute terms as list or table on product information tab.

Attribute Display Sizes

Set the size of advanced attributes.

Small image size:
Set the size in pixels of the small attribute size.

Medium image size:
Set the size in pixels of the medium attribute size.

Large image size:
Set the size in pixels of the large attribute size.

Changelog

2.0.7

2.0

1.5.10

1.5.8

1.5.7

1.5.6

1.5.5

1.5.4

1.5.3

1.5.2

1.5.1

1.5

1.4

1.3.1

1.3

1.2.6

1.2.5

1.2.4

1.2.3

1.2.2

1.2.1

1.2

1.1

1.0.2

0.2

0.1