how do I show all associated products for configurable products?

Question

THE SCENARIO : A sandal with 3 colors: Black, Blue & Green, on the product listing page, we wish to show the Black, Blue and Green sandal separately while still having the ability to show all the colors on the product details page allowing the user to select the one which he wishes to.

The product listing page would look something like this :

clearly showing all the available colors for products. It's a good UI & UX as it shows the richness of the product catalog while allowing the user to visualize each color easily.

The product details page would look something like this :

Thus, from the product listing page, the user may go directly to any color sandal and once on the product details page, he/she has the choice to change the color and visualize the product better. I have created three configurable products, and each one is related to the other two products, but I cannot get this view that selects the colors while being within the product details

reference I have also based on this post

I have created three configurable products, and each one is related to the other two products, but I cannot get this view that selects the colors while being within the product details

Answer 1

Your line which says "but I cannot get this view that selects the colors while being within the product details"

This is happening because the product when shown on its own is a simple product, it does not have any sub products beneath it like in configurable product.

May be you can create 3 configurable products and the adjust the position of color accordingly

Answer 2

The fastest solution I found was redirecting by URL from the simple product to the configurable