Editing Variations on a Page
This lesson assumes you have completed all the preceeding lessons. You should now have a HTML table displaying all the possible variations based on the variations configuration we created earlier. Let us explore this table. The image below highlights the key areas of the output we will be discussing below.
Variations
Each table row represents a single variation. In this case, we have 12 variations. This means given our variations configuration in which we had 2 attributes, the first one of which was Size, with 3 of its attribute values chosen (Small, Medium, Long), and the second attribute being Colour, with 4 of its attribute values chosen (Red, Green, Blue, Purple), we get a total of 12 possible combinations.
Get Variations Link
In the upper left corner, we have the link to Define/Get Variations. We addressed this in a previous lesson. Clicking on that will open a modal window to create or fetch variations. Using that link, we can also change the variations configuration linked to the page we are currently editing.
Variations Per Page
Notice that the table of variations is paginated. Below the above link, we have input to control how many variations to show page (in the table). The table loads very fast!
Variations ID
Our variations table has several columns. Going down the first column, we see each variation is numbered. These numbers are the respective IDs of each variation. Please note that the ID of a variation can change if the order of attributes in a variations configuration are changed.
Pre-Defined Attributes
The next two columns have headings corresponding to the 2 attributes that are included in this page's variations configuration, i.e. Size and Colour. Within their respective HTML table column we see the attribute values, the combinations of which make up a variation. For instance, the first variation is a Small Red Banjo T-Shirt. The tenth is a Long Green Banjo T-Shirt, etc.
Custom Attributes
After the pre-defined attributes, we have the custom attributes we created when setting up this field (in the field's Details Tab). These custom attributes correspond to the custom columns we created, i.e. SKU, Price and Quantity. As previously stated, the values of custom columns/attributes are not pre-defined. They need to be specified when editing the page. As can be seen, the HTML table cells of these 3 custom attributes have inputs. To enter a value for a custom attribute, just click on the respective input and type! For instance, we could give our first variation (the Small Red Banjo T-Shirt) a SKU of BTSR12345, a price of 25 and 1500 as the quantity. Save the page and job done!
Please note that you can enter these inputs on any page in the table, even going back and forth then save when you are done. In other words, your values will not be lost on account of pagination.
Search
On the top right of the table is a search box. Start typing what you are looking for and the variations will be instantly filtered down to only those matching your search terms. Everything displayed on the table is searchable, i.e. variations IDs and both custom and pre-defined attribute values. The search is very powerful and is capable of searching for partial matches. For instance, ong will find Long.
The graphic below shows the results when we searched for 5. To show all variations, either click on the x inside the search box or just delete whatever you typed in the box. Please note that searches persist across page reloads.
Pagination Headline
Near the bottom left corner of the table, the number of variations currently displayed on the table is shown.
Pagination
The pagination navigation appears towards the bottom right of the table.
Variations Configuration Edit Link
At the very bottom of the input, on the left side, text showing the name of the variations configuration linked to the page being edited is displayed. It is followed by a link which when clicked will open a modal with the variations configuration ready for editing. Please note that editing a variations configuration already associated with a page(or pages) could lead to data loss in respect of the page's variations field values. Once in the modal window, you can add/remove attributes, attributes values, edit attributes and their values or change the variations configuration linked to the page.
Please note that only variations where at least one of its custom columns/attributes has a value will be saved to the database.For instance, in our example, if none of SKU, Price or Quantity has a value, that variation will not be saved to the database.
Please also note that (currently), deleting or not specify a value in an integer or float field will return 0 (zero) values since they are sanitised as integers/floats.
In the next section, we discuss how to batch edit variations configurations and attributes.