Product Custom Attributes is a built-in plugin for Nitro theme package. This plugin allows you to make visual variations on your single product page. Let’s see how can we setup a variable product with this plugin.
Open Product Custom Attributes
To open Product Custom Attributes, click on Dashboard > Products > Attributes.
Below are all settings for Product Custom Attributes. Here you can add new attributes, or manage custom attributes.
There are 3 steps to setup a variable product with many attributes.
- Add a new attribute
- Add new terms for that attribute
- Add a new product including above attributes (with each attribute as a variation)
Add/manage custom attributes
Add an attribute
Here is a product using Product Custom Attributes.
To add a new attribute, open Product Custom Attributes, then fill in below fields:
Name: enter attribute’s name. This name will be shown on your live site. Please notice that you cannot change attribute name later.
- Slug: insert a slug name for the attribute. You can also leave this field blank to auto-generate slug name
- Enable Archives: turn this on if you want to show the attribute on filtered product list for that attribute. You can see which attribute is marked as achieved on attribute list.
- Types of attributes: excluding default “text” attribute, there are 3 types of custom attributes:
- Default sort order: pickup a sorting order for attributes
- Custom ordering: with this sorting type, you can drag and drop terms in any order you want.
- Name: with this sorting type, all terms are sorted based on alphabetical order
- Name (numeric): this sorting type is for numbers only. By choosing Name (numeric), you can sort all terms (numbers) based on number order.
- Term ID: each term goes with an unique ID. By choosing this sorting type, you can sort all terms based on their IDs
Manage attributes
To view your attribute, back to Product Custom Attributes screen by clicking Dashboard > Plugins > Attributes. Here you can see all attributes that you have created, with their details on including Slug, Type, Order by, and Terms.
Terms
An attribute consists of many terms. Each term displays a specific value for your product.
Let’s say you have 4 color variations for a tote bag: “black”, “white”, “blue”, “red”.
So “color” is an attribute for the tote bag, and “black, “white, “blue”, “red” are 4 terms for the attributes “color”.
You can add, edit, or delete any term you want by clicking on “configure terms” button.
Add a term
First, choose an attribute that you want to add that term. Here I choose “Color” attribute. Then you’ll see a screen to add new terms.
Please notice that each type of attribute has a different “add a term” screen. Let’s see how we can add a term for a specific type of attribute:
Text label
To add a new term with text label attribute, you have to fill these fields. Here I want to add “36” term to “size” attribute.
- Name: This is your term name. Choose a name that best matches with your term content. Here I named this term “36”.
- Slug: just like attribute, a slug will create a URL-friendly text for your variation’s URL.
- Parent: create a new term under an existing term
- Description: description text for you term. Use this field to insert note about your term. This description will not be shown on your live site.
- Label: fill in the text that you want to display on your variation. Here I want to display the text “36” on Size variation, so I enter “36”.
Tooltip: this text will appear when you hover on that term on live product page. In this case, I entered “36” for “36” term.
Color picker
To add a new term, you have to fill in these following fields. Here I want to add “blue” term to “color” attribute.
- Name: This is your term name. Choose a name that best matches with your term content. Here I named this term “blue”.
- Slug: just like attribute, a slug will create a URL-friendly text for your variations URL.
- Description: description text for you term. Use this field to insert note about your term. This description will not be shown on your live site.
- Color: pick a color for your term. You can choose a color from the color palette, or enter your custom color code. Here I choose blue.
- Product gallery images: add multiple product gallery images for each color variation
Image select
People usually use image select to display variations for a product that has patterns. In this case, I want to display “polka dots” variation.
- Name: This is your term name. Choose a name that best matches with your term content. Here I named this term “polka dots”.
- Slug: enter attribute for term
- Parent: pick up a parent atribute (optional)
- Description: description text for your term. Use this field to insert note about your term. This description will not be shown on your live site.
- Image: select an image for your term. You can upload a new image, or choose an image from your Image Library.
- Tooltip: this guide text will appear when you hover on that term on live product page. In this case, I entered “polka dots” for “polka dots” term.
- Product gallery images: add multiple product gallery images for each image variation
Manage terms
Here you can view terms information, including name, description, slug, as well as number of products that go with each term. You can also add, edit, or delete any term you like.
If your default sort type for the attribute is “custom ordering”, you can even drag and drop to sort any term in any order you want.
Use custom attributes to make product variations
To display variations on your live product page, you have to configure custom attributes for each product that you want to display variations.
Step 1: Choose a product
First, you have to choose a product to add variations. Click on Dashboard > Products, then find a product that you want to configure variations.
Click on product name, or “Edit” to edit that product.
Step 2: Change product data
To add variations for this product, you have to change product data from “simple product” to “variable product”.
On product editor page, scroll down and find “Product Data”, choose “Variable product”.
Step 3: Add attributes
Expand the attribute.
On “Value(s)” field, add terms for the attribute that you want to use for variation. You can select all saved terms in that attribute, or delete your selection by clicking on “select none”. Check “visible on product page” to display your terms, and “use for variations” to confirm using all chosen terms for variations. Finally, clicking on “Add new” to save your choice.
Add variations
Step 1: To add variations from selected terms, click on “Variations” tab, then choose “Create variations from all attributes”.
Step 2: A popup window will appear to confirm your selection. Click on “OK” to add variations.
Step 3: Now you can see a list of variations that you have created. Total number of variations displays at the top of your variation list. Here I have 74 variations.
Delete a variation/multiple variations
You can delete a variation, or all variations.
Delete a single variation
To delete a variation, click on “Remove”.
Delete all variations
To delete all variations, on “Product Data” dropdown menu, choose “Delete all variations”.
Add variation’s information
Enter information for the variation. You can also upload the image for each variation.
Note:
In order to get product price displayed, you must enter “regular price” for all variations (even if all variations are the same price).Choose default variation
Product gallery images
For image select attribute and color picker attribute, you can upload product gallery images for each product attribute.
Choose default variation
By default, your variations’ information, especially price, will not be displayed on your product page if customer hasn’t chosen a variation.
To avoid confusing, you need to pick up a default product variation. Choose your default variation from the dropdown menus on “Default Form Values”.