colour button

Hello Aizaz,

How can I add these variations to my product page?
I have done what you mentioned in another post #185013, but it is still not showing. I have 4 products with different colours, and the customer has to be able to click on a different colour to see the other product. (Attachment 1)
I want it to look like attachment 2)

Or is this not possible for products who were made seperately?

Attachments:

You must be logged in to view attached files.

Hello,

Please follow these instructions: https://xtemos.com/docs/woodmart/variable-products-swatches/

Please make sure you have added global attributes, not custom. If you still have the problem, provide your site admin access to the private area.

Best Regards

Hello,

Unfortunately it is still not showing.
In private area I put site admin access.
Hope you see the problem here.

Thanks

Hello,

Color swatches are available only for variable products. You do not have any https://prnt.sc/s973y3

Please follow the manual I have provided.

Best Regards

hello,

I changed it to variable now.
Nothing changes, plus new problem occures which is products say ‘no stock’ even when I fill in a number of stock.
Please check again.

Hello,

Please find the links to the variable products and create variable product, then configure the swatches. https://prnt.sc/s99aue

Best Regards

Hello Elise,

I have done it with two products now, the pink one and the blue one.
As you can see the colours are visible, but it is not connected to the other product. Nothing happens when you click on the colour. Is it possible to put in a link so you are directed to the other colour product?

Attachments:

You must be logged in to view attached files.

Hello,

You need to add images to the variations and when you click on the color you will see the image which relates to this color.

Please read the manual carefully and configure the swatches. https://xtemos.com/docs/woodmart/variable-products-swatches/

Best Regards

Hello Elise,

I think we mean two different things.
I understand I have to upload a picture, but it won’t be the same product as the other product as the description and other pictures won’t change with it.
Do you know what I mean?
I want for customer to be able to switch between the 4 different products when clicking on one product.

How it makes more sense now,

Hello,

Woocommerce does not have the option to do that, unfortunately. You can show the color filter in the shop / category page and if a user clicks the color, they will get the products that have this color.

1. Configure the sidebar in the Theme Settings > Shop > Sidebar and Title.

2. Navigate to Appearance > Widgets > Shop page widget area > add WOODMART WooCommerce Layered Nav and configure.

You can see how it would work here: https://woodmart.xtemos.com/shop/

Best Regards

Hello,

That would also be great, i will add this.
I do need a little more help to fix it.
Do the 4 products still need to be variable products in order for colors to show like your attachment? How can I for example adjust ‘pink colour’ to my pink product? I have tried different things, but it is not showing yet.

Attachments:

You must be logged in to view attached files.

Hello,

I still do not see the variable products https://prnt.sc/saiv5z

Follow this instruction from the beginning https://xtemos.com/docs/woodmart/variable-products-swatches/

Now you need to create variable products.

Best Regards

Hello,

I changed it back to variable products and gave each product their own colour attribute. Still not showing in the sidebar on the category page.
Could you check what I am missing here?
Also, products keep being ‘sold out’ no matter which number I fill in in stock.

Hello,

It is not enough just to set a product as a variable. You need to add attributes and then create variations.

Please read and follow the instructions: https://docs.woocommerce.com/document/variable-product/

As soon as you create variation, configure the swatches https://xtemos.com/docs/woodmart/variable-products-swatches/

Then you will go to Appearance > Widgets and add WOODMART WooCommerce Layered Nav to the Shop page widget area.

Best REgards

Hello Elise,

It was not necessary to make the products variable in order to do what you suggested. The products are ‘simple’ products now. I now have this added on the right side. The only thing is, you see the last part is cut off. Do you know how to make it 100% visible?

Attachments:

You must be logged in to view attached files.

Hello,

I do not see the problem https://prnt.sc/scp09n

What device you are viewing the site?

Best Regards

Hi Elise,

That is strange, it should scale with the device.
I am using a 16 inch macbook..

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.platform-Mac .woodmart-scroll .woodmart-scroll-content::-webkit-scrollbar {
		display: block;
}

Best Regards

Thank you, it is fixed now 🙂

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts