When offering products, you might want to let the customer configure the product of his choice before he adds it to the cart. In BreezingCommerce, there are different ways on how to add configurations to a product.
Content:
1 - THINGS TO KNOW ABOUT OPTIONS
3 - ASSIGNING OPTION SETS TO A PRODUCT
4 - VARIATIONS: IF YOU ONLY SELL RED SHOES OF SIZE 8" AND YELLOW SHOES OF SIZE 7"
5 - READY-ONLY PROPERTY SETS: SETTING UP AS CHARACTERISTICS
When defining a more complex product, you'll find yourself thinking what options you need to let a customer choose from distinct properties and attributes. Properties are entities that define a product itself, such as "color" or "size", while attributes are non-product defining entities but can be attached to it. This separation of concerns has been implemented into BreezingCommerce and are an important core-part of the application.
It is also important to know that properties are communicated as "options" throughout BreezingCommerce, while attributes are labelled "accessories".
Side-note: In the BreezingCommerce source code, we'll stick to the technical terms properties and attributes but this is not part of this tutorial.
1 - Things To Know About Options
Options come in 3 flavours:
- Simple Options: Let the user choose from options like "color" and "size" and it really doesn't matter to the order what combination the customer is choosing.
- Variations: More complex way to add options. This should be used when the combinations of selectable options actually matter. This is called "variations" throughout BreezingCommerce. Each variation may have its own stock amount, set of plugins and price overrides.
- Read-Only Options: So to say the opposite of selectable options. Here the admin defines simple options but instead of letting the customer choose from them, they are actually fixed to the product. This can for example been used for displaying information such as characteristics (see the characteristics BC Plugin shipped with BreezingCommerce).
Options are unique across product types:
Options are defined once, detached from any specific product in so called Option Sets. Option Sets should bundle typical properties for different product types. By this you will prevent options being mixed together that don't really belong to each other.
E.g. a red coloured shoe is still something different than a red coloured notebook. Although both share the same property "color", they are different things. This way of thinking has been implemented right into options to make clear what kind of option belongs to what product and prevent side-effects when editing options.
2 - Setting Up Option Sets
When opening the "Options" menu item in the BreezingCommerce administration, you'll see a list of available option sets that you created or an empty list if there are none yet.
The list shows just a few columns such as ID, name and if the Option Set is ready-only or not. By clicking on "New", you may want to create a new set of options.
Let's create one for shoes:
- Click on "New" from the top menubar of the options list view.
- Give the Option Set a name on the right-hand "Option Name".
- Add your first set of option values below by entering the key "Color" (will be shown as label for drop-downs).
- Then add the colours, "red", "blue", "yellow". One per row.
- Click "Save".
- Add another key called "Size".
- Add the sizes 9", 8", 7".
- Click "Save".
What we just did was creating two different options a customer may choose from, namely Color and Size. These options will display as drop-downs in the product details, so the customer will be able to configure the product he wants to buy.
Also note the drop-down at the top of the option-set saying " - Special Operations - ". Here you can export your properties to existing products and publish them. This is relevant if you have products that already use items from this option set and you want to update them from within the options setup rather doing it product-by-product.
Important: If you need to edit options keys or values, always make sure to check the checkbox beside to confirm the change.
3 - Assigning Option Sets To A Product
Given you already created a product, e.g. a shoe, please enter the product and choose the tab "Options". As Option Set, pick the set you created in the steps above and save the product. Then again in the "Options" tab, click on "Edit Options".
A modal box will open showing you the list of previously created keys. Publish all keys, as we need them. Then enter each key and publish all of the values as we need all of them to display in the front-end. Optionally, you may choose what value should be pre-selected, override the product price (replace or add amount) and use a custom value that will displayed instead of the one defined in the main option set.
If you now enter the details of the product in your shopping cart's front-end, you will see two drop-downs that you can choose colours and sizes from. If you don't require all keys or values, then simply un-publish the non-required ones. Products that will be added to the cart will now always carry the selected options throughout the order process, invoices included.
4 - Variations: If You Only Sell Red Shoes Of Size 8" And Yellow Shoes Of Size 7"
Since we already assigned an option set to the product but don't sell all the combinations that a customer can choose from, we want to limit the selectable combinations somehow.
This is done by defining and using Variations.
To enable Variations, simply set "Use Variations" to "yes", save the product and then click on "Edit Variations". In the modal box that opens you can create a new variation by click on "New" on the top menu-bar.
For now, we only need two variations, one for red shoes of size 8" and yellow shoes of size 7".
After clicking "New", you will see a list of features that might remind you of setting up a product and in fact, you are defining a variation of the main product. Unlike approaches like the "child-products" strategy that other shopping carts use, variations are in fact mix-ins (merged properties of an entity, in this case, a product).
Now choose a name for the variation, a price (not mandatory) and from Color choose "red" and from "Size" choose 7".
Below are further options like stock, weight, dimensions and plugins that you can use just like in the main product. Once the variation will be added to the cart, it will override the settings from the main product.
Now save the variation, close and publish it.
Then create another variation for yellow shoes of size 7" and save and publish again.
If you now reload your product in the front-end, you will see just one drop-down instead of two but each item representing the variations you just created. From there, just like with simple options, the information about the variation will be carried throughout the order process.
Important: When creating new variations, please make sure the keys and values are published in "Edit Properties", otherwise they won't appear as options to create a variation from.
5 - Ready-Only Property Sets: Setting Up As Characteristics
A use-case for the above mentioned read-only option sets are characteristics that come into play if you want to display further information for your product in list form but also being able to filter by these options at the same time.
For this, simply check the red cross for the option set that you want to be ready-only in the Options list view and get back to the product's Options tab. There choose it from "Option Set (readonly)" and proceed like you would create regular simple options.
Then make sure you install and publish the BC Plugin bc_plugin_productdetails_characteristics.zip from the BreezingCommerce main download zip in BreezingForms => Plugins.
Once you did all of the above and reload the product in the front-end, you will see a list of characteristics appearing underneath the product price. Read-only options and regular options may both be used at the same time for a product.
Also be aware that the readonly options will also appear in the filter module and can be disabled/enabled in the filter module settings as desired.
