WooCommerce Composite Products v3.6
But first things first – let’s have a quick look at some of the new features included in the new version:
It’s pay day, and you have decided to spend big on that brand-new custom skateboard you’ve been eyeing for some time now. You have spent the last couple hours to decide on a deck, trucks, wheels and bearings, until, finally, you pull the trigger. The skateboard is in the cart.
But wait – that deck size doesn’t look right… Nope, can’t edit that skateboard – you have to build it all over again… Bummer… Pause. Another notification pops up on your screen – your inbox is piling up. And you’re wasting your time. Well… you know what? Scrap that skateboard.
When it comes to conversion, the devil is in the details. The ability to edit the contents of a complex product kit after it has been configured and added to the cart is one of those things that can make it or break it. Composite Products v3.6 finally makes cart editing possible.
The feature can be activated on a product basis by checking the new Allow editing in Cart option, which is located under the Advanced product data tab of Composite-type products.
With cart editing enabled, the first change you will notice is a subtle “click to edit” prompt next to the cart item title of the associated Composite product.
Clicking on the product title gets us back to the Composite product page. This time, however:
- The product is configured exactly as it appears in the cart.
- The add to cart button text is replaced by the more appropriate: “Update Cart”.
Once new products or quantities are selected and the Update Cart button is clicked, the cart configuration will be updated to reflect the changes – as expected.
Revamped Composite Summary Widget
Those of you who have some Composite Products experience under your belts (or like reading docs) probably already know that the Composite Summary widget is a great tool for displaying a dynamically updated configuration summary of the currently viewed Composite product.
If you have a sharp eye, you might also have noticed the changes introduced by v3.6 in the last screenshot: The new release comes with a redesigned, more functional Composite Summary widget, which now includes a quantity input field and a dedicated add to cart button. These two elements drastically improve the Stepped layout UX, since it is now possible to add the product to the cart from any step. Additionally, the new widget can now be used with any layout – not just the Stepped one.
Stateful URL Support
The integration of Backbone.js into the Composite Products single-page app has made it possible to sprinkle some Backbone.js magic onto the URLs of Composite-type products. Until v3.5, the URLs of single-product Composite-type pages were stateless – there was no way to know which step is viewed at any time by looking at the URL in your browser, and no way to navigate to a specific step by changing the URL, either.
The new release takes care of this too: When transitioning to a step (using the Progressive, Stepped or Componentized layout) the browser URL is updated to reflect the change. Additionally, if a step is accessible, it is now possible to jump to it by typing its URL – this means that you can use HTML anchor tags to create shortcuts to specific steps, and also that step transitions are registered by your browser’s history. Note that step permalinks in v3.6 rely on a simple hash fragments, such as
Extended “Sold Individually” Options
Those of you who have used Variable Products or Product Add-ons in combination with the Sold Individually option may have noticed that the option does not operate at product-level – rather, it operates at configuration-level by default. This means that if the option is enabled, it is possible to add two instances of the same product to the cart if their Add-ons configuration is different, or if a different combination of Variable product attributes is selected.
The case has been the same with Composite Products – when the Sold Individually option was enabled, you could add two instances of the same Composite Product in the cart, as long as they were configured differently. v3.6 replaces the plain Sold Individually checkbox with 3 options, to allow controlling the exact behaviour of the “individual sale” concept:
- No – Disables the option: any amount of product instances can be purchased together.
- Yes – Enables the option at product-level: It is only possible to purchase a single instance of the Composite at a time.
- Matching configurations only – Enables the option at configuration-level: It is possible to purchase multiple instances of the Composite together, as long as they are configured differently.
“Options Style” Improvements
Prior to v3.6, the extension provided a single Options Style setting to control the appearance of Component Options, which had a Composite-level effect. The setting provided two alternatives:
- Thumbnails, which was used to display Component Options as product thumbnails, paginated and arranged in columns similar to the main shop loop.
- Dropdowns, which was used to display Component Options an upaginated drop-down menu list.
In v3.6, the Options Style setting can be configured independently for every Component, to provide greater flexibility in fine-tuning the user experience. Additionally, the existing two styles are now complemented by a third one: Radio Buttons.
Composite Products JS API
Our intent was to allow WordPress developers experienced with PHP to easily customize the behaviour of Composite Products without having to learn Backbone.js or an unfamiliar JS API.
Well, that sums it up! As always, check out the changelog for the full list of features, tweaks and fixes. Got questions? Comments? Feel free to chime in!