WooCommerce Composite Products v3.6
Composite Products v3.6 has landed, after 177 commits and more than 5000 lines of new code. The new release delivers some highly requested features, as well as a little treat for all WooCommerce developers out there: A JavaScript API to interact with its front-end single-page app.
But first things first – let’s have a quick look at some of the new features included in the new version:
Cart Editing
Composite Products v3.6 finally makes cart editing possible. The feature can be activated on a product basis by checking the new Edit in Cart option.
With cart editing enabled, the first change you will notice is a subtle “Edit” link next to the product title of the Composite product in the cart. Clicking on it will take you 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 http://www.your-site.com/your-composite/#step-slug.
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.
This been the same with Composite Products. Previously, when Sold Individually was enabled, it was possible to 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, allowing you to precisely control the behavior of this option:
- 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.
Viewing Component Options as “Radio Buttons”.
Composite Products JS API
One of the biggest challenges that WooCommerce developers have faced with Composite Products so far has been the difficulty in interacting with its rather outdated, jQuery-based front-end app. For WordPress developers coming from a pure PHP background, JavaScript can be a real challenge – more so if you are looking at a 5000-line spaghetti of jQuery event handlers.
v3.6 introduces a completely rewritten JavaScript single-page app based on Backbone.js, neatly tucked under a WordPress-inspired Actions and Filters 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.
For v3.6 and to ensure backwards compatibility, we have left the entire PHP templates hierarchy almost untouched, leaving JavaScript templates completely out of the equation. Still, the reworked script should now yield a snappier user experience, with further improvements expected soon.
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!
Looks like everything I need in the front end. Back end I’d like to know how the order arrives once placed online. Is it easy to read the details of the customer, options requested, quantity and so forth? My customer wants to print the job ticket straight from the web and Send it straight to her production floor. Possible? Thank you.
Hey Brenda,
WooThemes has a 30-day money-back guarantee, which allows you to get some real hands-on experience with an extension and see if it suits your requirements. See https://www.woothemes.com/refund-policy/
If you already have some basic experience with WooCommerce, I would recommend giving Composite Products a try to have all your questions answered in an environment that you feel comfortable with (preferably a test/staging site that you’ve set up for your own tests).
Nice plugins. Especially the composite products. That looks overly useful. I will be using this however I need to add a subscription to it. I don’t need any of the missing features in your mini-extension “SUBSCRIBING TO ALL THE THINGS” so it could be useful for me however it is still in beta. Do you suggest perhaps using the force upsell plugin instead to add that subscription product? I am not going live until a least 1 month from now so would love to hear from you regarding beta -> production of the plugin. Thanks
Hey Philip,
Unfortunately CP is not compatible with Force Sells due to a WordPress core limitation that I hoped would have been lifted by now. And Subscriptions support is a bit out-of-scope for Composite Products (would complicate the codebase quite a bit, so unless the demand for Subs support in Composites becomes significant, CP will remain an extension focused on non-subscribed product types).
The SATT mini-extension will probably not allow you to add a single subscribed product to a Composite – it is more focused on selling a collection of items (a Composite) on a subscribed basis.
I can’t rely to your message so will add the comment as a reply to mine. I wanted to say thank you for your quick and detailed reply. It help me avoid some headache. Now looking at your other great plugin (bundles) to see if I can use that instead.
Thanks one again.
I’d like to see a base shipping option added like the base price. I have composites whose base product is very heavy then lighter options that add extra to the shipping cost. Currently if a buyer selects just the base option on no other composites there is no shipping method associated and so the customer can check it out with no shipping charge applied. Unless I’m missing something?
Hey Stefan,
Good point. In v3.6, this is only possible using filters.
v3.7 makes this really simple: It allows you to set specific Components to be “Shipped Individually” from their container, while the “base” product can have its own physical properties, as well.
This means that you can have some (or all) Components “packaged” in the base product, and some (or all) shipped individually.
v3.7 is scheduled for release in about 1-2 weeks.
Hi Manos,
The plugin looks great – I was considering using it in my site to build complex kits with a wide variety of options and quantities of each step/option. However, to make the idea work, I need to allow the user to be able to add the composite product to cart, and then request a quote, rather than just processing the order.
There’s several plugins out there that offer quoting (Woo CPQ, for example), would CP work with any of these?
Thanks.
Hey John,
To be honest I haven’t used any of them, so can’t recommend a specific quoting plugin for use with CP.
In principle, any of them should work with CP as it’s been built in a way that makes it quite cooperable with third-party code/plugins.
Can I build composite products in bulk with CSV import?
Hey Ray,
The extension supports the Import/Export functionality built into WooCommerce 3.1+. However, some CSV fields are exported in JSON format, which means that if you want to build Composite Products in bulk like this, you’ll need to understand the format of these JSON-encoded fields.
Most developers comfortable with JSON should be able to understand what’s in there by looking at the REST API fields schema: https://docs.woocommerce.com/document/composite-products/composite-products-rest-api-reference/
However, there are some differences in the way some data is represented in CSV, for example instead of product IDs, the Importer works with SKUs (when available).
For creating Composite Products in bulk, your best bet would be to use the REST API. I’d need to confirm, but I have the impression that the existing integration of Composite Products with the WooCommerce REST API works via WP-CLI as well.
Great plugin,
I just purchased it a few weeks back and trying to build a customizer for a bike product. One thing I could not do was add something like an Accessories component and have people select multiple accessories (eg, lock, seat, bag etc) to add on to the bike. Right now you can only select one option since they are all radio button groups, is there any way to configure it so I could make those checkboxes and just have them add onto the price all under the single component? thx
Hey Ameet,
See https://docs.woocommerce.com/document/composite-products/composite-products-advanced-configuration/#multiple-options
Currently this is handled via an integration with the Product Bundles extension. In the future, we will add native support for multiple selections in Composite Products, however this shouldn’t be expected soon 🙂
Sold!! And works like a charm in my composite product with optional product bundle. thx Manos,
I do have another question about composite products and trying to get a handle on what to hook into. Like i mentioned, I have a bike customizer. Whenever someone selects a new component, I would like to hook into the selections and then update the Main Product image on the left. I was thinking I could construct all the skus into a long string and then map it to an image that would then replace the product image. What do i hook into for selections, and where could I filter the main product image? thx again for the superb products.
Hey Ameet,
Thanks for the kind words 🙂
A seasoned WordPress developer with JS skills could utilize the Scenarios API to write conditional logic for overlaying or swapping images. We haven’t built this functionality into Composite Products as we’ve been working on higher-priority feature requests — however it’s definitely possible to do it by writing (a fair amount of) custom code.
One reason we haven’t added this to our roadmap is that there are different requirements from a feature like this, depending on the use case. In some cases it might be preferable to associate images with configurations, and in some cases it might be preferable to overlay images for specific components (or a combination of both). Hopefully we’ll find some time to circle back to this, eventually 🙂
Hi Manos,
I’m want to use components but restrict them to one variation. So for example a camera product with lens as a component. The lens itself has variations (same lens but different mount as a variation) that can be purchased individually. Can I use a product variation as the component? It looks like I have to get the customer to choose the variation themselves?
Hi Hamish,
It’s not possible to get Variations to appear as individual Component Options, at least not without re-writing large parts of the extension. We have no plans to build this feature but you could add this to the Ideas board at http://ideas.woocommerce.com — all features/suggestions posted are voted up by other users, too. We frequently look there to prioritize new features: Some of the biggest recent feature additions were originally added by users in the Ideas board.
Hi Manos,
I ended up writing the js for swaping out the images and it works well, you can see it action here:
https://cero.bike/product/cero-one/
I bought Bundled Products, but am seeing an issue where the Subtotals are not rendering for the items. When I put them in the cart, the Composite products subtotals work, but none of the Accessories (which are a bundle product) show up. I have screenshots of what I am talking about here: https://imgur.com/a/z7lYW
I’ve tried every iteration and for some reason subtotal isn’t getting shown, it makes the final Your Order page look odd see Abus Chain Lock on it. I couldn’t find a tip or a filter to make those show up and wondering if you could provide some insight.
Ηey Ameet,
Could you please open a ticket via WooCommerce.com? Looks like the Product Bundles / Composite Products integration does not properly support the new “Group mode > No parent” option. Would need to take a closer look to confirm. Thanks!