Simple linked variations for WooCommerce

Simple linked Variations for WooCommerce

Second plugin I released on, plus a small tutorial on how to use it.

This post has been sitting in my drafts ever since I’ve released the new plugin called Simple Linked Variations for WooCommerce. As with most tutorials that you can find on this page, this plugin too was created because a client asked me to create a solution where he could link two attributes together in WooCommerce – he wanted to show one option only if a certain variation attribute was selected.

At first I was totally convinced that such a thing is already a part of WooCommerce, it’s just that I never really went too deep with it – apart for creating options for layouts, or modifications on WooCommerce using hooks, I never really dug deep into WooCommerce. It’s the most used WordPress shop plugin, I can set it up, set up payment methods etc., but I never really made any serious customization to it, as I never had any requests of that sort.

So I started fiddling with the request my client asked, and, since this was for a presentation purposes only, I managed to hardcode a few things and toggle the visibility using JavaScript. It got the job done for the presentation, but I knew if the client uses this, and wants to manually add variations that can be toggled, the only way to do it was to hardcode it into JavaScript code. And that’s just not a good solution. If a client asked you for a solution because he doesn’t know how to code, you can expect him to have to learn to code after you’ve completed the project.
It’s a job of a programmer to present a fool-proof solution that will work as expected, with a suitable UI so that a client has no problems using it. This is why for any major successful applications you have a team of UX and UI designers that thought of every step a user might take when interacting with the application.

So I had to think of a solution that can be easy to use for the client in the end.

And a new plugin was born :D

How does it work?

The first thing you need to have in order for the plugin to work is to install WooCommerce. Then you can install the plugin. The reason for this is a neat trick that you can use when creating a plugin that depends on a different plugin to work. register_activation_hook() will call activate_PLUGINNAME hook, which can then be used to do whatever you want on plugin activation.

After installing the necessary plugins, you’ll want to create several attributes. Say you have an image that can come in different dimensions with or without frames, and that you can choose the frame color. Also say that you’d like to hide the frame color option if you have selected the variation that doesn’t have the frame in it. This plugin will allow you to do just that. So you create your attributes, and create a variable product.

Create a variable product

First set your product as a variable one. You won’t have any attributes so nothing will appear in the ‘Linked attributes’ tab. Save your product.

First thing you’ll want to do is set up your variations, and save the product – this will ensure that the ‘Linked attributes’ tab works.

Set up variations

Then set up some variations. Notice that if you want to hide a certain attribute dropdown, that you’ll have to add a ‘none’ value as a default.

There is a ‘catch’ that you’ll need to watch out for. WooCommerce doesn’t work with ’empty’ or not set variations. So if you don’t have a default selection to fall back to, it won’t work – WooCommerce just won’t let you add a product to cart. So you just make sure you include that default option in your variation.

Default variations

After setting some variations we are ready to link them. Again, be sure to set the value for the attribute you don’t want to appear to none, because WooCommerce won’t let you have a non existing value for a variation.

When this is all set up you’re good to go. Change to ‘Linked attributes’ tab and start linking

Linked attributes tab

Now you can link attributes to the values you want them to appear on. In this case we are linking ‘Frame-color’ attribute to the ‘Frame-dimensions’ values that have frames.

In our test case we want to link frame color attribute to the values that have frames. Other will have frame color set to none (which is the default value). When you save your product you can go to the front end and see how it works.

And that’s it!

Simple, no? :D

Well this is it from me for this week, I still have a tutorial to make about meta box pages drop downs, sidebar drop downs and any custom input to make, so stay tuned for it.

Hope you like the plugin, and find it useful. If you do, be sure to give it a good rating, or if you find a bug, don’t hesitate to ask in the support so that I can fix it : ) As always feel free to comment below and happy coding : )

Also published on Medium.

Join the Discussion

  • michel lompret

    Hi Denis
    Have you already find your next tutorial. I mean if you haven’t I think a tutorial on how create widget for page builder seem to be good. For example a parallax widget for elementor or isotope.js widget to filter grid. What do you think about that ?

    • I have several topics on my to do list. I haven’t thought about specific plugin tutorials, but it’s not a bad idea :)

      • sonia maklouf

        Have you seen gutenberg :
        It seems to be very interesting. It brings ReactJS, ESNext and Webpack in wordpress. They only included one widget (lastest posts) until now. If you find it interesting maybe you’ll do some tutorial on it and how to extend it, add more widget to it :)

  • Manuel Alvarado

    Hello Denis!
    I would like to talk with you about earning some money monthly with wordpress plugins and web development beginner skills (3 months of learning). I apologize for this, i’m from Venezuela and situation here is quite bad, but if i have access to dollars, even 10 a month, it’s a HUGE help. So please, i would be very grateful if there’s any advice you could give me.
    Thank you! And this is a really great website.

    • Well there are lots of sites where you can try to freelance and earn money that way. Check out and for more info. I personally don’t make any money from my plugins, mostly because they are very specific and I don’t try to make money off of them as I am employed. But, again, check the above sites and maybe that will help you. Good luck :)

      • Manuel Alvarado

        Thank you so much for taking the time of reading and replying.
        Yes, i really like but i don’t know what, well, i mean, i do know my limitations, but i don’t know what a very simple gig would actually require me to do ):

  • RebeccaMarkowitz

    Hi! Do you have a live site example / demo where I could see this in action? If someone changes their mind and switches to a different color once they’ve already selected a secondary a frame dimension, will you see the other colors or do you need to click the ‘clear’ link? Thanks!

    • Sadly I don’t have a demo site for this set up, but the link options are saved when you update the product. So if you look at the images above – for instance, currently selected attribute is ‘Frame-color’, and there are two attribute values assigned to it. If you change those then (either the attribute or values), these values will be saved and then the JS will hide the appropriate options on the front. So you won’t need to clear anything (if I understood you correctly).

  • Neudson Aquino

    Hi Denis, just bumbed with your plugin when I was trying to do just the same as you were, hiding the frame color option from a product for which this option is not avaible. Well, I just installed the plugin, but it does not seem to be working for me. I create my variations and under the Linked Attributes I select the frame frame color attribute and then the only size attribute that I want to show the color options. It does hide the options, but when I select the attribute set to show the colors the options does not show.

    Can you give a clue of whats happening? I running under WordPress 4.8.3 and WooComerce 3.2.3.

    • I updated the plugin maybe 10 minutes ago :D I noticed that the select field was using the old `attribute_pa` name, and I guess this was changed in the newest version of the WooCommerce so the select did nothing. I also updated how the hidden field handles naming, since it had trouble with diacritics. Should be all ok now. Let me know if this fixes the issue, if not I’ll be glad to help any way I can.