WooCommerce Show Attributes – Documentation

Getting Started

Installation

WooCommerce Show Attributes is free at WordPress. To install it:

1. Log in to your WordPress dashboard.
2. Go to “Plugins -> Add New”
3. Search for “WooCommerce Show Attributes”.
4. Click to “Install Now” when you find the plugin.
5. Activate the plugin by clicking “Activate”.

↑ Top

Where The Attributes Are Shown

After you activate the plugin, your custom product attributes will automatically be shown at these locations:

• Product page, above Add to Cart (see Troubleshooting for issues)
• Cart page
• View Order page on front end for customers
• Order Emails that goes to the customer
• New Order email that goes to the administrator
• Admin Order Details page on the back end, under Order Items

 

You can disable any of those on the settings page. The settings page is at WooCommerce Settings –> Products tab –> “WC Show Attributes”.

↑ Top

Settings

Main Settings

The settings are located at WooCommerce Settings –> Products tab –> “WC Show Attributes”.

The main settings for WooCommerce Show Attributes let you choose where to show the custom product attributes. Since version 1.4.0, you have more granular control over where to show them.

You can choose to show the attributes at these places:

1. Product Page
   Show attributes on the single product above Add To Cart, and on Grouped products
2. Shop Pages
   This setting will show the product attributes on the main shop page, as well as on the product category and tag archives. You have the option of showing the attributes on these pages above the price, or above the “Add to Cart” button (below the price).
3. Cart Page
   Show attributes on the cart and checkout pages
4. Customer Order Emails and View Order Page
   Show attributes on customer order emails, invoice emails, and receipt emails, and on the customer’s View Order page.
5. Admin New Order Email
   Show attributes on the New Order email which goes to the Administrator.
6. Admin Order Details Page
   Show attributes on the Order Details page on the back end, listed under “Order Items”.

↑ Top

Style Settings

The settings are located at WooCommerce Settings –> Products tab –> “WC Show Attributes”.

The Style options let you make some cosmetic differences to the display of the attributes.

1. Hide the Labels When Showing Product Attributes
   The setting lets you hide the labels and show only the values wherever the attributes are shown.
2. Show Attributes in a span Element
   This will remove the list bullets from the attributes on the single product page. Enabling this option will wrap the attributes in a span element instead of an unordered list. This is an easy way to get get rid of the list bullets, which has been requested by some. However, it is semantically correct to use the list element (li). If you prefer to keep your code semantically correct, while hiding the list bullets, use the following CSS instead of enabling the option:

   ul.custom-attributes {
     list-style-type: none;
   }

3. Remove Colon From Attribute Labels
   Check this box to remove the colon ( : ) from the attribute labels. This is useful for some of you who have requested to remove the colon because you use icons here. This is also useful for RTL languages.

↑ Top

Show Weight and Dimensions

The settings are located at WooCommerce Settings –> Products tab –> “WC Show Attributes”.

These options let you show the product weight and dimensions in various places right along with the custom product attributes. (Or, instead of the custom product attributes.)

You can choose to show both weight and dimensions, or just one or the other at any of these locations:

1. Product Page
   On the single product (and Grouped products) above Add To Cart instead of in the Additional Information tab.
2. Cart Page
   This includes the cart and checkout page.
3. Customer Order Emails and View Order Page
   Show weight/dimensions on customer order emails, invoice emails, and receipt emails, and on the customer’s View Order page.
4. Admin New Order Email
   Show weight/dimensions on the New Order email which goes to the Administrator.
5. Admin Order Details Page
   Show weight/dimensions on the Order Details page on the back end, listed under “Order Items”.

↑ Top

Extra Options

The settings are located at WooCommerce Settings –> Products tab –> “WC Show Attributes”.

Currently, there is only one “Extra Option.”

1. Show Attribute Terms as Links
   This option only applies to Global Attributes. Global Attributes are created in Products -> Attributes. You create the attribute and add the terms on that page. Then, back on the Edit product page, you can add these global attributes to your product. These types of attributes can be made into links. On the other hand, “Custom product attributes” will not appear as links. You can display a mix of both types of these attributes for a product, but only the Global Attributes will be links. In addition, this option only applies to the single product page.

↑ Top

Customizing

Styling the Attributes

This plugin adds several CSS selectors so that you can style the output by adding your own CSS.

(See how to easily add CSS.)

On the “single product page”, the attributes are in an unordered list with the CSS class “custom-attributes”. Each list item has two CSS classes: its attribute name and its value. Within each list item, each attribute label has the CSS class “attribute-label”, and each attribute value has the CSS class “attribute-value”.

For example:

/* target the entire list */
.custom-attributes { }

/* target just 1 attribute */
.custom-attributes li.YOUR-ATTRIBUTE-SLUG { }

/* target all attribute labels */
.custom-attributes .attribute-label { }

/* target all attribute values */
.custom-attributes .attribute-value { }

On the Cart page, Shop page, View Order page, admin Edit Order page, and in the emails, the attributes are wrapped in a ‘span’ element with the CSS class “custom-attributes”. Each attribute name and value pair is wrapped in a ‘span’ which has two CSS classes: its attribute name and its value. Within this span, each attribute label has the CSS class “attribute-label”, and each attribute value has the CSS class “attribute-value”. The CSS for these would be the same as above, except replace the ul with a span.

↑ Top

Make All Labels and Values Italic

How do I make all the labels and values italic?

Add this CSS:

.custom-attributes {
  font-style:italic
}

↑ Top

Make all the Attribute Labels Bold

How do I make all the attribute labels bold?

Add this CSS:

.custom-attributes .attribute-label {
  font-weight: bold;
}

↑ Top

Remove the extra left-margin space

How do I remove the extra left-margin space from the attributes on the single product page?

Add this CSS:

ul.custom-attributes {
    margin-left: 0;
}

↑ Top

Make Attributes Bold in Emails

This applies to emails sent to Admin and to customers. Place the code in any functions file or plugin.

Make only the attribute labels bold:

/**
 * Add some CSS for emails.
 */
function isa_wcsa_email_style( $css ) {
	$css .= '.custom-attributes .attribute-label{font-weight: bold;}';
	return $css;
}
add_filter( 'woocommerce_email_styles', 'isa_wcsa_email_style' );

Make only the attribute values bold:

/**
 * Add some CSS for emails.
 */
function isa_wcsa_email_style( $css ) {
	$css .= '.custom-attributes .attribute-value{font-weight: bold;}';
	return $css;
}
add_filter( 'woocommerce_email_styles', 'isa_wcsa_email_style' );

Make both the attribute labels and values bold:

/**
 * Add some CSS for emails.
 */
function isa_wcsa_email_style( $css ) {
	$css .= '.custom-attributes {font-weight: bold;}';
	return $css;
}
add_filter( 'woocommerce_email_styles', 'isa_wcsa_email_style' );

↑ Top

Troubleshooting

Attributes Not Showing on The Single Product Page

If you want to show the attributes on the single product page, do this:

For each attribute that you want to display, you must check the box for “Visible on the product page.” This has to be checked for the attribute to appear. This is a WooCommerce native option and is found on the Edit Product page (for each product), under the individual attribute setting. If you uncheck that box, the attribute will not be shown for that product.

Important

Make sure that “Used for variations” is not checked for the attribute in question. Attributes which are used for variations will not be shown above the Add to Cart button.

Top

Make Sure You Meet The Requirements

This plugin requires WooCommerce version 3.0 or above.

Support

To request help or report bugs, you can use the official support forum for the plugin at WordPress, or ask a question below.

Fork or contribute on GitHub.

↑ Top

Releases

WooCommerce Show Attributes 1.4.2 is Released

This update adds some fixes and one new option.

1. The attribute values in the emails are now vertically aligned. See this topic for an explanation of this issue.
2. The attribute terms are now displayed as comma separated list instead of separate lines. See this topic for details.
3. Weight and Dimensions would not show up in locations enabled by the settings, unless the option to Show Attributes in that location was also enabled. This is now fixed. For example, you can choose to show only the weight, and no attributes.
4. There is a new option to show attribute terms as links. This only applies to Global Attributes. Global Attributes are created in Products -> Attributes. You create the attribute and add the terms on that page. Then, back on the Edit product page, you can add these global attributes to your product. These types of attributes can be made into links. On the other hand, “Custom product attributes” will not appear as links. You can display a mix of both types of these attributes for a product, but only the Global Attributes will be links. In addition, this option only applies to the single product page. The new option is at WooCommerce Settings –> Products tab –> “WC Show Attributes,” under “Extra Options.”

↑ Top

WooCommerce Show Attributes 1.4.0 is Released

Release date: February 4, 2015

WooCommerce Show Attributes now gives you more control over where to show your custom product attributes. There are 16 new options, including the options to show the product weight and dimensions. While I’ve tried to address many feature requests, there are still many more pending. If I haven’t got to yours, thanks for your patience.

The settings have moved. The settings are now located at WooCommerce Settings –> Products tab –> “WC Show Attributes”. Visit the settings page to see the new options. Or see them here.

One important issue has been fixed:
When “Visible on the product page” was unchecked for a custom attribute, the attribute was still displayed on the Cart. This has been fixed. The “Visible on the product page” setting will now be honored. It will override all of this plugin’s settings. If the “Visible on the product page” is unchecked, that attribute will not be shown.

The .pot localization file has also been updated.

↑ Top

WooCommerce Show Attributes version 1.2.1 Released

Release Date: September 23, 2014

This update adds several new options and one bug fix.

1. The “Visible on the product page” checkbox for each individual product attribute will now be taken into account on the single product page. This is a WooCommerce native option, and is found on the Edit Product page, under the individual attribute settings. With today’s update, if you uncheck that box, then the attribute will not be shown on the single product page. However, it will still show up on the rest of the places as described in the plugin description.
2. A new option is available, “Hide the Labels When Showing Product Attributes”, which lets you hide the labels and show only the values wherever the attributes are shown. The new option can be found on the WooCommerce Settings –> Product tab, under “Product Data.”
3. A a new option is available, “Show Attributes in a span Element”, which lets you remove list bullets from the attributes on the single product page. The option is available on the WooCommerce Settings –> Product tab, under “Product Data.” This option will wrap the attributes in a span element instead of an unordered list. This is an easy way to get get rid of the list bullets, which has been requested by some. However, please note that it is semantically correct to use the list element. If you prefer to keep your code semantically correct, while still removing the list bullets, use the following CSS instead of enabling the option:

   ul.custom-attributes {
     list-style-type: none;
   }

4. This update fixes an error which affected some users while updating to the latest WooCommerce.

↑ Top

[code]

YOUR CODE HERE 

[/code]