Assign the custom field to the products

After the creation of the custom field lets go to assign it to a product.

Select a product and go to the Custom Fields Tab.
Then from the Custom Field Type list select the stockable custom field you have created previously.

As you can see the sub-custom fields are there. Just fill them to create a new variation.
Also from here you can connect your variation either with a new product or with an existing one. The later can be really usefull in case you are importing your products from another database.

To create your next variation, press the "New Variation" button at the bottom.

The parent product can be used as stockable variant as well. To do that go to the custom field and set Parent Product Orderable > Yes
Then when you assign the custom field to the product, you will see a checkbox labeled Use current/parent prodcuct as derived. By checking that makes the parent product a stockable variation. The advantage of doing that is that the user has a variation selected once he/she visits the product details page.

Now you can visit that product to to your site, to see the results

You can see different options/custom fields. The user will be able to select only the options which are compatible between them (i.e. return a child product). After selecting all the fields, you will see that the product info updates. This way you can see the price or image of the corresponding child product after finishing a selection.