How to add link two products by color?

Hi, I have two products of different colors but the same design. I want to link them together by showing a color swatch on the both’s product pages, such as here https://www.net-a-porter.com/en-us/shop/product/jennifer-behr/jewelry-and-watches/earrings/gladiolus-gold-tone-earrings/1647597352389842. However, these two products each has its own pictures and descriptions, and unique SKU. Please advise how to do this.

Attachments:

You must be logged in to view attached files.

In other words, I need color swatches on the product page and when click on color I want different url different name different images description etc, because each product has its own name, URL, SKU, description and images. They are only linked by color.

Hi hey3212,

Thanks for reaching to us.

You can use our Linked variations feature to achieve this. Read the instructions here https://xtemos.com/docs-topic/linked-variations/

If you have any questions please feel free to contact us.

Regards,

Hi,

Thanks for the info. I followed the instructions, but nothing has happened. Where did I do wrong? Please take a look at the video in the private section and advise.

Hi,

Could you take a look at my last post and get back to me asap. I have been waiting three days for your reply before I can make progress on the website. Thanks very much.

Hi hey3212,

First of all, I am appreciate your patience.

I see you are using Hello Elementor theme, could I switch to WoodMart theme and deactivate extra plugins for testing?

Regards,

Yes it is now back to Woodmart. I followed your instructions but nothing happened. Please check my video in the private section. Please provide an explanation and a detailed video on how to do this.

Hi hey3212,

I tested and it didn’t work. Would you mind if I deactivate extra plugins for testing? Please confirm me back.

Regards,

Please go ahead. I confirm.

How is it going？It has almost been a week…

Hi hey3212,

Thanks for your patience.

– The color type should be Color https://ibb.co/DP8KxbFd and you to upload Preview image https://ibb.co/xKQZ9j5R (if you want to show image preview, it’s an optional)

– Each linked product needs to put Price.

– You are also using Custom Single Product layout, which is built with WoodMart WooCommerce builder. Navigate to Layouts > Layout to edit Single product layout and add Linked variations widget https://ibb.co/b5StvLc

Further, you can read more about the Layout Builder here: https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

Regards,

Hi,

Thanks for this message. Is there something missing in the content? I feel you meant to say more at the beginning… better to include a video, if possible. Where to add these setups?

I don’t understand what you are talking about in your reply. Please give me some more explanation! I need to fix this problem asap.

Could you please created a new, linked product using the two products, Papillon Aurelix Pearls and Papillon Roselix Pearls, and show me how to do this step by step so that I can do it myself. I have no clue how to do it based on what you just said, but I really need to get it done asap. Also, my website is still under construction. Don’t publish it yet. Thanks.

Hi hey3212,

I did exactly what we guided in our documentation https://xtemos.com/docs-topic/linked-variations/

Please follow step by step, it should works. Let me know if you need further helps.

Regards,

I now understand what you are trying to do and managed to link the two products together by creating a new attributes called ColorVar. But the symbols displayed on the product pages are the product picture thumbnails. I want the symbols to be the color swatches not the product thumbnails, similar to the display here https://www.net-a-porter.com/en-us/shop/product/jennifer-behr/jewelry-and-watches/earrings/gladiolus-gold-tone-earrings/1647597352389842. Also, how to move the position to the left and below the prices? They are too far right.

Thank you very much! This is exactly what I needed.

Attachments:

You must be logged in to view attached files.

Hi hey3212,

If so, just leave the field Attribute for the product image empty.

Regards,

Hi Hung,

Thanks for your reply. Where to locate this attribute you are referring to? Could you provide a screenshot? I can only find product image swatch, which is empty. Not sure whether this is what you are referring to. See attached.

Also, could you suggest how to move the position of the swatches to the left, on the product page? See attached.

Attachments:

You must be logged in to view attached files.

Hi hey3212,

Please see screenshot for better understanding https://ibb.co/KjDQTWbQ

Regards,

Got it. How to move the buttons to the left to control the position? See attached.

Attachments:

You must be logged in to view attached files.

And how to display the color symbols for any product that has color options on the catalogue page? See video in the private section. The catalogue page is located by clicking Earrings on the main header of the front page. Here is the link of a sample page https://www.net-a-porter.com/en-us/shop/jewelry-and-watches/fashion-jewelry/earrings.

Hi hey3212,

1. Align variations to the left

Please see screenshot for better understanding https://ibb.co/JRTDT27s

2. Navigate to Theme Settings > Shop > Variable products > set the as Grid swatch attribute to display https://prnt.sc/YqWQY2EvNQ2j

Regards,

Hi,

Thanks so much! The first problem has resolved. The second problem, I have changed the Grid swatch to display ”Colorvar” which is the variable that display the color swatches on the product page, but it does not make any difference. see attached. Could you take another look?

Attachments:

You must be logged in to view attached files.

Hi hey3212,

The Type should set to Color https://ibb.co/k2Yxp5TW

Regards,

Hi,

I have made the changes. Nothing has changed.

Please note, I intend to display Colorvar, which is the attribute I created specifically for the display on single product pages. I don’t want to display Color, which is the attribute I created for the purpose of filtering products. See attached.

Attachments:

You must be logged in to view attached files.

Hi hey3212,

Would you mind if I deactivate extra plugins for testing? Please confirm me back.

Regards,

Hi Hung,

I don’t mind. Please go ahead. Thanks

Hi hey3212,

Please allow me to explain, the option works for variable products and there are no such type of products on your site https://ibb.co/vvwSDxLs

Regards,

Thanks for your reply. According to our previous conversations, these products are already Linked Variations so the single product pages are properly displayed, see attached. I have 19 such pairs, so a total of 38 products should display the color options on catalog pages. How to make them into variable products so they also properly display on the catalogue pages? A link to such a product as an example is in the private section. Please advise.

Attachments:

You must be logged in to view attached files.

Hi hey3212,

All your products are simple product only. Please refer to this article for more details https://woocommerce.com/document/variable-product/

Regards,

[Author]

Posts