March 9th, 2015

WooCommerce Composite Products v3

March 9th, 2015

Composite Products version 3.0 is finally here, after 12 weeks of development and 187 commits.

The new version includes many requested features and improvements targeted towards large-scale kitting applications, including:

  • a redesigned, responsive front-end and back-end UI;
  • multiple front-end UX refinements;
  • WP_Query-based retrieval, pagination, sorting and filtering of component options;
  • front-end and back-end performance optimizations;
  • exclusion-based scenario definitions;
  • bundled shipping improvements; and
  • helpful documentation for developers.

What’s New

v3.0 comes with a long list of features and improvements, which allow you to use the extension in kitting and bundling applications that involve hundreds, or even thousands of component options. Here’s a short list:

1. Paginated, Responsive Product Thumbnails

Component option thumbnails are now paginated and arranged in a responsive grid similar to the main shop loop. The extension allows you to tweak various parameters of the layout, such as the thumbnail columns count, results per-page, and much more:

Responsive thumbnails grid.

Responsive thumbnails grid.

2. WP_Query based Retrieval, Sorting and Filtering of Component Options

Component options in v3.0 are always retrieved dynamically through a simple, filterable WP_Query wrapper. This makes it possible to create custom queries for retrieving component options, such as the included category-based method, and additionally, to paginate, sort and filter results dynamically.

The extension now allows you to enable a Sort by field at component level, which provides access to all core sorting methods:

Sort component options by price.

Sort component options by price.

 

Moreover, you can enable layered filters to narrow down results based on attributes, or you can use filter hooks to create and display custom product filters:

Component options layered attribute filters.

Component options layered attribute filters.


3. A Redesigned, Interactive Summary/Review Section

The Summary section has been redesigned to include more detailed information, such as product thumbnails, and provide internal links for reviewing/reconfiguring Components:

A redesigned summary/review section.

A redesigned summary/review section.


4. A Dedicated Configuration Summary Widget

The extension now includes a Composite Configuration Widget, which you can use in combination with the Stepped layout to display an updated summary of customer selections and prices:

The Composite Configuration Summary widget.

The Composite Configuration Summary widget.


5. New Layout: Componentized

The new Componentized layout is built around the heavily redesigned Summary section:

The Componentized layout: Opening a composite reveals an overview of its components.

The Componentized layout: Opening a composite reveals an overview of its components.

 

Components are presented and configured individually, but not necessarily in sequence. The Summary section provides an overview of all Components and lists the chosen options. To configure a Component, the Summary section is temporarily hidden from view. The final configuration can be added to the cart by returning to the Summary.

Componentized layout: Configuring a component.

Componentized layout: Configuring a component.


6. Other UI/UX Refinements

To provide a great user experience across a wide range of devices and optimize conversion, the new version has gone through a a full-blown UI/UX audit. It delivers many small but effective front-end UI/UX improvements, such as:

  • a responsive summary/review section;
  • use of a toggle-boxes to wrap component content, by default when using the progressive layout;
  • effective use of auto-scrolling in response to user input;
  • improved handling of optional components, which can now be skipped without requiring user input;
  • various validation improvements; and
  • a more robust, flexible template structure that makes it easy to change the placement of UI elements, or change various aspects of the default UX design.

7. Redesigned Product Editing Panel

v3.0 features a redesigned admin area UI, which groups component settings in a much more logical manner and directs your attention to the most important options:

Creating a Composite product.

Creating a Composite product.

8. A Comprehensive Actions/Filters/Events API

WooCommerce developers looking to extend or customize Composite Products in depth now have an extensive Actions, Filters and Events Reference, as well as a growing collection of snippets for the most common customizations.

Updated to v3.0? Planning to upgrade soon? Please let us know what you think!

Any issues to report? Please contact WooThemes right away.

Thanks to everyone who contributed to this release with your ideas and feedback!

From: New Releases, WooCommerce

34 responses to WooCommerce Composite Products v3

  1. John Fitzgerald

    I need to be able to have extra fields put onto each component. For instance, we have a 6 pack of care packages. When someone selects each component they need to enter in a ship date and gift message. Any ideas on how to do that? For single orders that info is on the order and I would prefer not to change that.

    • Manos Psychogyiopoulos Post Author

      Hey John,

      extra fields can be added to any product using WooCommerce Product Add-ons. If you are looking to add datepickers with WooCommerce Product Add-ons, this might help.

    • John Fitzgerald

      Thanks. I was hoping to pick a component then have the options for that component display. BUT I don’t want the options there if the component is not part of a composite product. Does that make sense? For example: A user orders a Back to School Care Package alone – no need to enter shipping date and gift message since that happens on the order. A user orders a 4 pack for care packages, selects the Back to School as one of the components – they need to enter a ship date and gift message for that component, etc for components 2-4.

  2. Erik

    Hi
    First of all, l love the composite product plugin but I’ve noticed that not so many themes supports this out of the box. Do you have any suggestions of themes for woocommerce (except storefront) that do support composite products? Any of the themes frpm themeforest?

    Thanks

    Kind regards
    Erik

  3. Jay Hough

    Do you guys have an online demo of this anywhere? I’d like to make sure it does what I need it to before I sink $80 into it…

    Thanks!

    • Manos Psychogyiopoulos Post Author

      Hi Jay,

      We are not maintaining any demo online – WooThemes has a 30-day money back guarantee, so if the extension doesn’t work as you expect you can contact them and ask for a refund.

      Hope this helps!

  4. Jason

    I am converting my website from shopify to wordpress woocommerce, If I use composite products, can I also choose flavors for example, I want the user to be able to pick a protein supplement and there are 20 options, each of these options have 5-6 flavors. After choosing the option can they pick the flavor of protein before moving on to the next supplement.

    • Manos Psychogyiopoulos Post Author

      Hey Jason,

      Yes, this is definitely possible using Composite Products. You could set up the 20 options as variable products, each with its own set of flavours.

  5. Charles

    Hi Manos, I have a client who is selling some hardware, where the hardware piece has some different attributes: style, finish, width, hinge, ends. Client would like the user to first pick the style, followed by the finish (swatches) and then the width, hinge and ends option. [the only thing that would really change the price would be the “width” and the “style”] the rest are just free options.

    It sounds like your composite product plugin might work perfectly for this type of application. Do you see any issues with it not working, or possibly how challenging it would be to set up? If the Client wanted to update their products through CSV import, would this be possible, or would they need to manage their catalog solely through WordPress?

    Thank you for any info

    • Manos Psychogyiopoulos Post Author

      Hey Charles,

      Sounds like a valid case for the Variable product type, which is part of WooCommerce core. Is there anything that prevents you from using a Variable product?

    • Charles

      I’ve tried setting up variable products, however, the client deals with “containers” and wants a method of selecting like so:

      User picks a container-top style
      User then pics and specific finish to the container (could be 7 to 9 finishes)

      Then the user is able to pick from standard containers like so:
      Container A (can have multiple widths, different hinge for the top)
      Container B (same as above)

      The issue is I see no viable way of allowing the user to choose a “style” and “finish” before even adding a product to the cart, but those global selections should still appear in the cart.

      How I currently have it configured is that “Style” and “Finish” are parent categories, but this means I would have to repliate Container A across all Style and Finish categories and subcategories, and I don’t know of anyway to tell woocommerce which category path the products were added from.

      Perhaps the client is just creating something too complicated?

    • Manos Psychogyiopoulos Post Author

      Hey Charles,

      If you need a unique SKU for each of these products, including their top-style and finish, then the best option would be to use a Variable Product to manage your inventory accurately.

      You could build this as a Composite by creating a separate product to populate the Top-Style options (Step 1) and a separate one to populate the Finish options (Step 2), and then use Scenarios in order to enable the matching products in Step 3. It might be a bit tricky to set up, but it’s certainly possible.

      Otherwise, if you can code, the most flexible solution might be to use a custom landing page to handle Step 1/2, and use the input to run your own product query and display the matching results in Step 3.

    • Charles

      Thanks for the info Manos, I can code, however, very tight budget, so was hoping for a “close to out of box” solution. I think with some creative naming and using a CSVImport tool I can get it organized in a way that meets my client’s expectations.

      Thanks for all the advice

  6. Bill

    Hello Manos,

    Great extension! I have a project we want to use this extension for. We want our visitors to be able to configure a chassis to their needs and this will require scenarios but we would also like an SKU # tied to the final configuration and a unified part description which would consist of all of the short descriptions of the composite items chosen. Is this something that can be easily customized with your extension?

    • Manos Psychogyiopoulos Post Author

      Hey Bill,

      By default, each item in the final configuration is represented as a separate line item in the cart & orders, and line items appear as “grouped” under a container line item. Modifying the final/configured container item SKU to consist of all “contained” item SKUs would require some custom coding.

  7. Matyas

    Hello Manos,

    I am setting up a website where the customer can mix his own “box” full of dog treats. There are around 100 dog treats to choose from. Once the customer puts all of the desired treats in the “box” he can then put the box in the shopping cart as one product. I am trying to find a way to do this using woocommerce and this plugin looks like it might do the job. What are your thoughts? Do you think the plugin is suitable for my needs?

    Thank you in advance for your reply,

    Matyas

  8. Michael

    Hello Manos,

    is it possible to combine your composite products feature with woocommerce suscriptions? I want to sell composite products and give my customers the possibility to get this exact product on a yearly basis without further action.

    Thank you for your help.

    Michael

    • Manos Psychogyiopoulos Post Author

      Hey Michael,

      WooCommerce Composite Products and WooCommerce Subscriptions are not compatible in the sense that Composites can’t “contain” subscription-type products.

      However, the contents of a Composite Product can be purchased on a recurring basis using the experimental WooCommerce Subscribe All The Things mini-extension — see https://github.com/Prospress/woocommerce-subscribe-all-the-things

  9. Marco

    Hi,
    It’s possible to see the final configuration image of product after the steps??
    Or better you can do it via code? Any idea??

    • Manos Psychogyiopoulos Post Author

      Hey Marco,

      This is unfortunately not a core feature of CP. It is definitely possible with some custom code, though.

  10. Amor

    Hello Manos,

    Is it possible that a certain a product can only act as a component and not be sold as an individual product in the shop.
    e.g I have 3 products in my shop: A, B & C. Only when I buy product A, will I be given the option to choose from products B and C. Whereas products B & C must not be sold individually.
    Hiding these 2 products from catalog and search does not removes the ADD TO CART button from their individual product pages. Does composite products plugin allows such function?

    • Manos Psychogyiopoulos Post Author

      Hey Amor,

      A product that’s hidden from the catalog & search can be added to a Component and purchased as part of a Composite product. Ths is actually a pretty common requirement. However, CP will do nothing for you to hide the “add to cart” button of a product that’s hidden from the catalog/search — this is something that would require custom coding.

  11. Alessandro

    Hello Manos,
    I wonder if I understand well how to use your plugin: I use twenty seventeen theme, and my customers choose among products that will be 1000+ different designs, after that they have to choose the fabric on which we print the desing, and fabrics are the product variations. Until now it has been good to use woocommerce variations simply duplicating one prototype product with all the variations, but now we have to change and add many fabrics (variations) so will be terrific to update any single product, once we have to change or add a fabric. I wonder if you plugin allows me to make a group of products (design) and another group of products (fabrics) that customer can stack at their disposal. Let me know. Kalispera!

    • Manos Psychogyiopoulos Post Author

      Hey Alessandro,

      CP allows you to add products to Components by category, which means ay new product added to a category will appear in any Components that include that category.

  12. James

    Hello Manos

    I want to combine products from 2 categories. So a customer can choose 1 product from category A and 1 product from category B. This will then give a discounted price. Also the offer is limited to 1 per customer. Would composite products be the best option or product bundles?

    • Manos Psychogyiopoulos Post Author

      Hey James,

      Sounds like a case for Composite Products 🙂

    • Manos Psychogyiopoulos Post Author

      Thanks for the kind words Ben! If you’ve built something with Composite Products that you’d like to share, feel free to post a link here or drop me a line via email!

  14. Nicole Auten

    Hello, you’ve made an awesome plugin! I’m trying to customize the label for the pagination of the composite products and was wondering if you could show me what kind of hook I would need to modify any of the labels in the woocommerce_composite_front_end_params filter, specifically for the ‘i18n_final_step’ part. I’d like to change it from “Review Configuration” to “Review Trip Selection”

  15. Alessandro

    Hello, i would buy Composite Products but i have one questions, is it possible in process to specify two product in step?For exampe if i configure a pc can i add in VIDEO section two graphic board different?I’ve notice that this is not possible..
    Hope you undrestand my question
    Thank you so much.

Comments are closed.