Landing Page Details

Are you still using dropdowns for your variable products?
Don’t you want to provide a more clear and natural way for your buyers to select product options?
Did you know that WooCombinator can turn your boring selects into clickable buttons?

WooCombinator is a plugin for WooCommerce.
This plugin turns the boring select elements of variable products to buttons.

Updated on 3th October 2018 with version 1.0.7 now comes with 17 styles and 2 experimental transition effects to choose from.

What is a variable product?
A variable product is a standard product type in WooCommerce. A variable product has multiple attributes and the customer select one from each attribute. For example a shoe has size and color attributes – the customer can select these parameters.

WooCombinator hides the select elements and renders buttons instead – but the controlling logic is still handled by WooCommerce.
You can set your own classes and/or select from the 17 pre-defined styles. Also you can write your own inline CSS styles (if there are no other option to include/edit a custom CSS file).

By default WooCombinator try to re-use the button element of your theme but maybe you will need some CSS tweaks.

Features

  • Wordpress Customizer is supported
  • 17 predefined styles
  • 2 transition effects (experimental)
  • Set CSS classes for elements and states
  • Compatibility options
  • Plugin can be disabled on selected product pages
  • Write your own inline CSS rules
  • Changes only the display logic – the control logic is still handled by WooCommerce
  • Documentation included
  • Minified CSS and JS files are included

Warnings

  • some CSS/HTML knowledge maybe required
  • depending on your WooCommerce template maybe you will need to define the active and disabled states on your own
  • if you are using 3rd party plugins to change the behaviour of the select elements then WooCombinator maybe won’t work

Requirements

  • PHP 5.3+
  • Wordpress 4+
  • WooCommerce 3+, 2.5+

Request new features in the comments or on my profile page with a direct message. Thanks!

  • ComputerJunkiez

    2017-10-23 16:27:28
    Purchased Reply

    Pre sale questions: 1: Would I have to create the images for the different colors or will this use svg paths to color things in? 2: Some of the variations I have are select color, select trim color, select imprint area(s) which require 1 - 8 choices to be made. Will this work for that? IF anyone else uses this, has advice please let me know. Thank you.

  • vision-px

    2017-10-23 19:04:06
    Purchased Reply

    Hello! If you can show me your site I can check if WooCombinator will work as you expect. 1. WooCombinator changes the value of the underlying select dropdowns. It has nothing to do with colors or SVG's. 2. Yes, I've tested WooCombinator with 50+ variation options. Maybe you will need to adjust some WooCommerce setting (for more than 30 variations WooCommerce will only check variation after each option is selected - this number can be increased with a simple setting - you can even find this in the comments). Let me know if I can help you in anything else! Thanks!

  • ComputerJunkiez

    2017-10-23 19:21:37
    Purchased Reply

    First, amazing response time. Secondly, the site isn't available for public access just yet, and there is no way around that. However, from what you have stated unfortunately this plug in won't work for my needs at the moment. Thank you for your time and consideration. If you still want to see what I have going on, if you provide an email, I will email screen shots. It might help you in some future addition :)

  • vision-px

    2017-10-24 00:20:02
    Purchased Reply

    Ok, let me know if you can share me some URLs to check. Drop me an email from my profile form, in reply I will share my email address with you so you can send me some shots. Thank you!

  • jasolution

    2017-08-23 20:11:26
    Purchased Reply

    Ciao, volevo un info prima di acquistare il plugin. ho acquistato il tema Entrada e volevo sapere se questo plugin è compatibile con il tema indicato. puoi vedere il tema al seguente link. https://www.waituk.com/entrada/intro/ in attesa di riscontro porgo cordiali saluti.

  • vision-px

    2017-08-23 20:52:51
    Purchased Reply

    Hi, However Google Translate helped me a lot please write in English :) I know the flags are similar but I'm from Hungary :) Anyway please link me a product page with variable options and I will try to check if it is compatible with WooCombinator or not. Thank you! :)

  • jasolution

    2017-08-23 22:38:15
    Purchased Reply

    Hello, I wanted an info before buying the plugin. I bought the theme Entrada and wanted to know if this plugin is compatible with the theme. The product you can see at this link: https://www.hereandthere.it/percorso/tre-perle-e-mezzo-2/ And the theme used at the following link: Https://www.waituk.com/entrada/intro/ waiting for a reply Yours faithfully.

  • vision-px

    2017-08-23 22:42:18
    Purchased Reply

    Hello, it looks like the current setup can't be used with WooCombinator.

  • jasolution

    2017-08-23 23:39:42
    Purchased Reply

    Uffa... will you make any updates?

  • vision-px

    2017-08-23 23:48:51
    Purchased Reply

    It is not something which can be "fixed", it is not the deficiency of the WooCombinator plugin. The product you have linked is not a standard variable product (see the demo page, you can see the products with selectable options there - that is the standard WooCommerce variable product). Maybe you are using other 3rd party plugins or theme functions, I can't see product variation options on that page. WooCombinator works with the default, standard WooCommerce variable products.

  • jasolution

    2017-08-24 01:57:46
    Purchased Reply

    Actually the variables are there but the theme does not show. This is the problem I'm experiencing with this theme :(

  • Israel

    2016-12-01 02:22:35
    Purchased Reply

    I don't know really if I any plugin used may affect the loading of 3rd party JS files. The truth is that I cannot remove any plugin installed, I need all of them. Then, what would be the solution, please? Thank you.

  • vision-px

    2016-12-01 02:26:33
    Purchased Reply

    I can check your installation if you send me your admin login details through my profile page. Without this information I can say only that the problem is the JS file of WooCombinator is not loaded.

  • vision-px

    2016-12-01 02:27:38
    Purchased Reply

    Also do you know your Wordpress and WooCommerce version?

  • devineone

    2016-12-29 17:43:41
    Purchased Reply

    I have just purchased your plugin. Not sure if it is a setting issue or theme conflict but once you choose an option all other options are faded out and cannot be changed unless you click the link 'clear'. Your demo doesn't have this problem. Any idea what might be causing this?

  • devineone

    2016-12-29 17:55:07
    Purchased Reply

    Disregard - I see it is just the Disabled CSS class.

  • vision-px

    2016-12-29 20:09:24
    Purchased Reply

    Thank you for purchasing the plugin. Let me know if you have any other questions! Have a nice day - and happy new year :)

  • bmkdigital

    2017-02-04 00:25:20
    Purchased Reply

    Hi There, I have just installed your plugin but noticed the greying out of variations that are out of stock doesn't work, I'm just wondering how you did this in your demo as I have searched for a while now with no luck. Product in question: https://www.pmgnewer2.dev.kode.digital/product/braided-sleeving/pps-fr/ Would appreciate any help you can give. Thanks

  • vision-px

    2017-02-04 00:47:28
    Purchased Reply

    Hello, thanks for purchasing! You mean when select an option and hide unavailable options? That is a WooCommerce behavior: if there are too many options (like in your case) WooCommerce will send an AJAX request back to the backend only when all of the options are selected. This way every options is available until you select all of them. By default this number is limited to 30 variations - if I'm right, and can be overriden by setting the "woocommerce_ajax_variation_threshold" filter - but it needs to be tested as it can cause performance issues on frontend. This is the same of you disable WooCombinator and check how the dropdowns work. Unavailable options (attributes) still can be selected. To tweak the setting you can put something like on the top of the functions.php of WP:

    function custom_wc_ajax_variation_threshold( $qty, $product ) {
        return 50; // Increase default 30 to 50
    }
    add_filter( 'woocommerce_ajax_variation_threshold', 'custom_wc_ajax_variation_threshold', 100, 2 );
    

  • bmkdigital

    2017-02-04 01:16:31
    Purchased Reply

    Days of searching for a fix for this problem and that filter never showed up once. Thanks so much. 5*

  • pragzsri

    2018-05-14 20:51:12
    Purchased Reply

    Hi. Are there any options of other styles.

  • vision-px

    2018-05-14 21:18:45
    Purchased Reply

    The plugin comes with 7 predefined styles but you can write your own CSS rules.

  • pragzsri

    2018-05-14 21:22:59
    Purchased Reply

    Thanks. Is there a place where we can preview

  • vision-px

    2018-05-15 05:24:33
    Purchased Reply

    The demo page showcases one of the styles - you can check the screenshots for the other available color styles.

  • rell001

    2018-02-09 22:30:08
    Purchased Reply

    Hello, Thank you for this awesome plugin! When I updated my staging site to WooCommerce 3.3.1 -- I'm getting the following notification: "Heads up! The versions of the following plugins you're running haven't been tested with the latest version of WooCommerce (3.3). WooCombinator unknown" Also, I've an question regarding Wordpress 5.0: Will WooCombinator be compatible with the new Gutenberg editor? Cheers!

  • vision-px

    2018-02-09 22:34:44
    Purchased Reply

    Hello, Thank you! Please give me some days to test the plugin with the latest WooCommerce - but in theory the plugin should be compatible. For the Gutenberg editor I also have to check it - but I'm sure I need to do some developments to be compatible with it. Have a nice day!

  • vision-px

    2018-02-12 18:58:15
    Purchased Reply

    Hi, New release has been uploaded and waiting for approval: I've added the required tags to avoid the version warning on the plugin page - I've also tested the plugin with WC 3.3 and it works well. Thank you!

  • rell001

    2018-02-12 22:52:08
    Purchased Reply

    Great—thanks so much!

  • sergeo_syd

    2017-11-24 02:32:10
    Purchased Reply

    Is it possible to disable this plugin for a small number of product? This is when there are too many options. Say you have Red, blue, Green variation And then every colour also had 5 sizes.

  • vision-px

    2017-11-24 02:36:44
    Purchased Reply

    Currently not, but I've just started to collect some ideas for the next release so I'll look into your feature request as well. Thanks!

  • sergeo_syd

    2017-11-24 08:38:38
    Purchased Reply

    Ok, that would be a good to have. You can see on Amazon that both selectors exist depending on category and number of options to improve usability.

  • vision-px

    2017-11-24 08:57:03
    Purchased Reply

    Can you give me some examples which options would you need? E.g. disable/enable the plugin depending number of attributes, number of total variations, URL, etc?

  • sergeo_syd

    2017-11-24 09:02:49
    Purchased Reply

    I think that would make it too complicated. Maybe just a list selector on config page of which products to opt out and that's all. This would address the functionality with minimal complexity.

  • vision-px

    2017-11-24 09:13:10
    Purchased Reply

    Thanks for your feedback! I'll look into it.

  • vision-px

    2018-01-25 02:02:26
    Purchased Reply

    Hey, the has just released version (1.0.6) supports this feature: now you are able to enter a list of IDs where the plugin should not be activated.

  • pcamedida

    2018-10-30 06:52:08
    Purchased Reply

    You write me for plugins on pcamedida.net Please disable plugins to know if i need or not Thanks

  • vision-px

    2018-10-30 07:07:30
    Purchased Reply

    It was "sumi toolkit". Also I have aligned the styles a bit. Check it out and let me know what do you think. You can also drop me a private message from my profile page. Thank you!

  • fingerprintweb

    2017-02-03 19:11:53
    Purchased Reply

    It is possible to transfer setting from plugin Visual Attributes - WooCommerce Variable Products to your plugin? I don't want to set 337 products to new plugin, all atributes is set but some is only text and some have image for color with paterns. My shop is hiere to look https://dekornik.pl I'm used WooCommerce Measurement Price Calculator to.

  • vision-px

    2017-02-03 19:40:51
    Purchased Reply

    Hello, WooCombinator works with the attributes set for the products displaying the text provided for the attribute. Basically it replaces the default dropdown elements with buttons. If you have turn off 3rd party plugins you will see the default WooCommerce dropdown elements. These will be replaced with buttons if you use WooCombinator. No other configuration or extra setting is needed. Thank you!

  • homebaseperth

    2018-09-07 12:42:48
    Purchased Reply

    I am also interested in the query above Re: hiding variations that are not 'enabled'. I have already purchased and was hoping it would hide disabled variations but have discovered that it does not hide variations, it only makes them unavailable for selection. I hope that answers your query flamingtop.

  • vision-px

    2018-09-07 15:29:42
    Purchased Reply

    Hi, thanks for purchasing the plugin. As you can see in my previous reply the plugin just render buttons instead of the dropdowns - so if something is not hidden by WooCommerce it won't be hidden by WooCombinator as well. With CSS you could hide the disabled buttons, making unavailable selections hidden, however if there are too many variation attributes this would also not work because for these products WooCommerce checks availability only when all of the options are selected (this limit can be increased, see link above). If you send me the URL of your site in a direct message I will give you the CSS rules which could hide these elements. Let me know if you have any other questions!

  • SamDroid

    2018-12-03 17:17:05
    Purchased Reply

    How can i hide buttons for variations which i disabled in edit product page? This should not be visible.

  • vision-px

    2018-12-03 18:36:02
    Purchased Reply

    Hello, Disabled buttons gets a specific class so based on your theme and your chosen style selection these buttons should have a different, disabled state (usually gray, faded out). Keep in mind that if you hide the disabled buttons based on the user's selection then (depending on your theme) maybe it will cause some jumpy effect. You can hide the disabled buttons with:

    .woocombo-entity.button.woocombo-disabled{
       display: none !important;
    }
    
    One another note: by default if your product has more than 30 variations WooCommerce will check the availability of the options only after all of the attributes are selected. In this case the user is able to select not available variations as well and at the end of the selections WooCommerce will show some notification. This is something which is completely managed by WooCommerce. If on your site this is the case please refer to this trick: https://codecanyon.net/item/woocombinator-for-variable-products-turn-your-boring-selects-into-buttons/15878725/faqs/32606 Let me know if you need more help! Thanks!

  • Alberto9292

    2018-07-30 15:42:20
    Purchased Reply

    Hi, I just bought the plugin and like what I can do with it. I wonder how hard it would be to have the selection option show above the short product description as opposed to below where it currently sits? It would help my client if that option could be achieved, perhaps with CSS? Have you got any feedback for me?

  • vision-px

    2018-07-30 17:20:18
    Purchased Reply

    Hey, thanks for purchasing. I think this is something you should achieve with your template but drop me the URL of your site in a direct message from my profile and I will check.

  • Alberto9292

    2018-07-30 19:43:17
    Purchased Reply

    Thank you for your prompt reply. I have now emailed you. Regards

  • sergeo_syd

    2017-01-03 17:04:32
    Purchased Reply

    Sure here is one: http://dearjane.com.au/product/hand-wrist-splint/

  • vision-px

    2017-01-03 19:38:35
    Purchased Reply

    I have not found the reason yet - I will continue to debug. Are you using the latest version? There were some updates which not affected the version number. Because the demo site works in IE11 I would suggest to try to disable other 3rd party plugins and test if it works or not. If you drop me a message from my profile we can try to debug what's going on your site in email.

  • vision-px

    2017-01-04 17:20:17
    Purchased Reply

    Just for the record - it is an issue with WooCommerce and IE. I've reported the bug to the WooCommerce team.

  • sergeo_syd

    2017-01-27 00:39:28
    Purchased Reply

    WooCommerce has patched this, not it works, thank you.

  • vision-px

    2017-01-27 00:57:12
    Purchased Reply

    Hi, you mean "now it works"? :) Let me know if not! Thank you!

  • sergeo_syd

    2017-01-27 01:24:00
    Purchased Reply

    Yes, sorry, I mean NOW it works! :)

  • NineSixOne

    2016-05-02 04:32:14
    Purchased Reply

    Hi, I don't understand how to change button colors. i need #a13f6b for the active background color and #db78a5 for the disabled background color. I try .woocombo-entity-wrapper{float: left; margin: 2px;} .woocombo-active{ background-color: #a13f6b !important; color: #fff !important; } .woocombo-disabled{ background-color: #db78a5 !important; color: #fff !important; } .woocombo-container{ background-color: #db78a5 !important; color: #fff !important; } but doesn't work. Why don't you use a color selector for that ?

  • vision-px

    2016-05-02 04:40:54
    Purchased Reply

    Hi, can you PM me a preview link? Maybe an other CSS rule overrides these styles? Sometimes you need to write a more speicifc rule. If you can send me a preview link then I will check it. Thanks for the color selector suggestion!

  • NineSixOne

    2016-05-02 04:44:26
    Purchased Reply

    Best way, i'll give you an admin access ;)

  • vision-px

    2016-05-02 05:24:33
    Purchased Reply

    Hey, just send me a PM from my profile and I will help you! Thanks!

  • NineSixOne

    2016-05-03 17:18:58
    Purchased Reply

    thanks

  • landmarkcoffee

    2017-09-19 07:00:54
    Purchased Reply

    Hello. I just purchased WooCombinator and so far, so good. However, I am trying to enable functionality whereby the 'Add to Cart' button is disabled and the price is not visible until all 4 variation options are selected by the shopper, just like your preview product pages. I am using Jupiter Theme and I am not sure if it is overriding the button functionality. Your assistance would be greatly appreciated.

  • vision-px

    2017-09-19 16:12:40
    Purchased Reply

    Hello, Thanks for purchasing the plugin! Do you have an URL where I can check your setup? Thank you!

  • landmarkcoffee

    2017-09-20 00:55:19
    Purchased Reply

    This is the page, http://www.landmarkcoffee.ca/product/mixed-case-of-4/. We are still building the shop.

  • vision-px

    2017-09-20 01:00:32
    Purchased Reply

    Can you please try your site with some other, default theme? Are you experiencing the same behaviour?

  • lewisbamboo

    2018-02-28 06:33:11
    Purchased Reply

    Hello. I am having an issue where with your plugin ALL variations are displayed rather than just ones that are enabled. When I disable your plugin the disabled variations disappear. Thanks in advanced for your help.

  • vision-px

    2018-02-28 06:41:04
    Purchased Reply

    Hello, can you please send me the URL of your site where I can check your setup? Thank you!

  • Desenvol01

    2016-11-11 00:28:53
    Purchased Reply

    Would work as follows, I have a variable product, with three types of formats in the case one paper formats A4, A5, A6. Some variations are available only for sizes A4, A5, if my client select the A6 size, would it hide in gray equal shows in the demo? Showing that he would not have that product in that description he wants. My products would have these options, but in the variations some would be unavailable. In screen 2 it is possible to see options A6, showing that it would not have the variations of Lamination in the weight 180g / m², only in the variations of weights 250g / m². Does the plugin work the moment the client selects 180g / m² does it hide the lamination options? Screen 01 Show my Page Product http://server.postmix.com.br/download/static/screen01.png Screen 02 Show my Product Variations http://server.postmix.com.br/download/static/screen02.png

  • vision-px

    2016-11-11 01:10:17
    Purchased Reply

    Hi, This plugin is just a display wrapper around the select elements generated by WooCommerce. So it hides the underlying select elements and handles the selections in the background. If your variation logic is works with default WooCommerce selects then it will work with WooCombinator. Please note if you are using 3rd party plugin which alter the default functionalities then WooCombinator maybe won't work.

  • Desenvol01

    2016-11-11 03:06:43
    Purchased Reply

    The only plugins I use along with Woocommerce, would be, WooCommerce Advanced Product Quantities, WooCommerce Dynamic Pricing, WooCommerce Post Office, WooCommerce Checkout Sky, WooCommerce Grid / List toggle, WooCommerce Min / Max Quantities, WooCommerce Uploads, YITH WooCommerce Compare, YITH WooCommerce Quick View and YITH WooCommerce Wishlist. If necessary or easy I can show the products screen for you to check.

  • vision-px

    2016-11-11 05:15:28
    Purchased Reply

    Sorry but I can't guarantee that WooCombinator will work with these 3rd party plugins. Are these plugins modifies the original select elements rendered by WooCommerce? Can you send me a demo URL with your public page? I'd check how it's look like now.

  • Desenvol01

    2016-11-11 06:01:14
    Purchased Reply

    Our project is currently being done locally, if you can add me on skype, I could show you all the functionality.

  • vision-px

    2016-11-11 06:13:34
    Purchased Reply

    Once your project is done and available on some public URL get back to me and I will check if WooCombinator can handle your product variations or not before a purchase. Thank you!

  • Desenvol01

    2016-11-21 23:19:28
    Purchased Reply

    Good morning, my site is already online, if you can take a look to check if the plugin worked, I thank you. http://postmix.com.br/loja/produto/impressao/

  • vision-px

    2016-11-21 23:24:58
    Purchased Reply

    Hello, looks like you are using other plugins which already altering the default functionality of variable products in WooCommerce. So I think WooCombinator won't work on your site with these plugins. Thank you!

  • Desenvol01

    2016-11-21 23:57:49
    Purchased Reply

    There would be no way for us to buy a trial version because we need a plugin with this functionality.

  • vision-px

    2016-11-22 04:17:56
    Purchased Reply

    I'm totally sure that it won't work with the other 3rd party plugins as you'd expect. For example it won't work together with your image buttons.

  • Desenvol01

    2016-11-22 06:05:24
    Purchased Reply

    In the case of the images in the buttons, this was done in woocommerce itself, no third-party plugins were used.

  • vision-px

    2016-11-22 06:24:49
    Purchased Reply

    Really? With default WooCommerce installation? Not with a plugin or with an extension (like "WooCommerce Variation Swatches and Photos")? Anyway - WooCombinator renders buttons instead of select options. So it won't work with your current setup correctly.

  • Desenvol01

    2016-11-22 06:31:43
    Purchased Reply

    Yes, the buttons are only with woocommerce, without any other customization plugin in the product buttons, working in case I would not have access to the photos of the products, but it would work hiding the variations that it does not have, right? If I buy the regular version just to check if it works right, can I upgrade to the extendend by paying the difference in values between the two versions?

  • vision-px

    2016-11-22 06:46:01
    Purchased Reply

    The difference between regular and extended version is only the licensing - check the related articles on Envato about how licensing works. Yes the plugin will work without the images (with the default WooCommerce setup - I'm almost sure your image buttons are handled by a WooCommerce extension). So if you disable extensions and 3rd party plugins related to variable products then WooCombinator will handle your variations as seen on the demo page. If you're interested in the plugin then first try to disable extensions related to variable products. You must see plain old select elements instead of the images. WooCombinator works on these select elements.

  • Desenvol01

    2016-11-24 00:30:28
    Purchased Reply

    In case I should put in Combobox, to work? So it would function normally. http://postmix.com.br/loja/produto/impressao-copia/

  • vision-px

    2016-11-24 00:35:33
    Purchased Reply

    Yes, without other plugins/extensions affecting the handling of variations that should work.

  • flamingtop

    2018-09-02 01:35:00
    Purchased Reply

    Hello, I'd like to buy this plugin but I'd like to confirm that this plugin won't show un-enabled variations. I used the other plugin called "Smart Variation Swatches for WooCommerce" which shows un-enabled variations. So I want to confirm this plugin doesn't have the same problem. Thank you.

  • vision-px

    2018-09-02 02:39:32
    Purchased Reply

    Hi, thanks for the question. The plugin will hide your dropdown elements and render buttons instead of the options. It means if something is not available in the dropdowns while selecting the attributes then it will be also disabled on the buttons. There is only one thing which can affect this: if there are too many variations for a product then WooCommerce will NOT load availability information only after all of the attributes are selected. It means the user can select not-available combination - and he will see a message that this item is currently not available. This is a WooCommerce feature, not affected by this plugin. WooCommerce do this because of performance reasons but you can increase the default limit: https://codecanyon.net/item/woocombinator-for-variable-products-turn-your-boring-selects-into-buttons/15878725/comments?page=3&filter=all#comment_15522267

  • hunter74

    2018-07-08 22:39:41
    Purchased Reply

    Hei, we have an idea: The Idea is that the buttons for the variations should have different colors. If the label is in stock or if it is not available. What do you think about this feature is this easy to implement for a new version?

  • vision-px

    2018-07-08 23:08:33
    Purchased Reply

    Hey, if you mean mark the attributes which are not available then the problem is the same what you can read 1 comment above: if you have 1 attribute only then it could be possible, even with only defining the disbaled states. But if you have 2 or more attributes then stock availability can't be determined before selecting each-1 attribute (worst case). If I misunderstood something can you please drop me a more detailed description in a message from my profile? Also please link your site - maybe it will be easier to get on the same page. Thank you!