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

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 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.

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, allowing you to precisely control the behaviour of this option:

sold-individually-admin-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.

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!

11 responses to WooCommerce Composite Products v3.6

  1. Brenda

    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.

    • Manos Psychogyiopoulos Post Author

      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).

  2. Philip

    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

    • Manos Psychogyiopoulos Post Author

      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.

    • Philip

      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.

  3. stefan whatcott

    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😀

    • Manos Psychogyiopoulos Post Author

      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.

  4. John B

    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.

    • Manos Psychogyiopoulos Post Author

      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.

    • Manos Psychogyiopoulos Post Author

      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.

Leave a reply

Basic HTML is allowed. Your email address will not be published.