Rectangular Swatches for color paints

Hi, I am using your Template for an Art supply online store and I am in dire need of making the color swatches in the rectangle shapes (like the 2 examples I put as an attachment), so customers can see the color grades of the paints properly.
The first screenshot attached is from the page I am making, but those circular swatches I am using can’t show the detail and helpful for the customers.

Would appreciate the help
Thanks

Attachments:

You must be logged in to view attached files.

Reattached the first screenshot

Attachments:

You must be logged in to view attached files.

Hello,

Thank you very much for choosing our theme and for contacting us.

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

body .woodmart-swatch.swatch-with-bg {
    border-radius: 0;
}
body .swatch-on-single {
    margin: 0;
}
body .woodmart-swatch:after {
display:none;
}
body .swatch-on-single.swatch-with-bg.swatch-size-large {
    width: 65px;
    height: 45px;
}

Best Regards

Thank you very much.
It’s a lot better but I have questions to ask you.

– Is it possible to have different settings for the swatches with color pick vs the ones with images? It would be great if I could have bigger sizes of swatches for the products that I have photos of and smaller sizes swatches for the ones I use the image of the color variation.

– How can I adjust the horizontal gap/margin between the swatches?

-Is it possible to use the full width of the page to show color swatches, I have painted with 178 variations just in colors (and in both tube, full pan and half pan sizes) so it would be messy to show them in 4 columns.

-Is it possible to show the description of the product/attribute below as a text? ( like the sketch I made)
The current location above the swatches can hardly be seen. I need users to see the details for each painting, Lightfastness, category, opacity, pigment number and etc.

-Can I move the categories from right o left and bring up the product title a bit?

– Also, do you have any tips on making the making product pages with too many variations a bit faster? now wen I select any of the variety it takes a few seconds to show it which is not optimal.

Thank you again for your help and patience 🙂

Attachments:

You must be logged in to view attached files.

Hello,

1. There is no option to have different configurations for the swatches.

2. Yes, it is possible to have the gap between the swatches, your screen is without that is why I removed. You need to replace this part of the code:

body .swatch-on-single {
    margin: 0;
}

with this one:

body .swatch-on-single {
    margin: 0 20px 20px 0;
}

3. -Is it possible to use the full width of the page to show color swatches – you can create a custom page, create a grid with rows and columns, insert the Single image element and link the URL to the appropriate tag page. When user clicks the swatch he gets to the page of this attribute item and sees all the products.

4. -Is it possible to show the description of the product/attribute below as a text? Unfortunately, there is no option.

5. -Can I move the categories from right o left and bring up the product title a bit? – Please provide the screen where do you move the categories.

6. – Also, do you have any tips on making the making product pages with too many variations a bit faster? Our theme does not have any options to influence. You can optimize the images.

Best Regards

About this Snippet, you provided previously:
body .swatch-on-single.swatch-with-bg.swatch-size-large {
width: 65px;
height: 45px;
}

Is it possible to have let’s say 3 of them each for different swatch size category (Medium,Large,Extra Large)
Also Can I extend it to more than those 3 sizes?
………………..

For the swatches, How Can I add a border or outline when one is selected or add a Cross/ reduce the opacity of a swatch, when that particular variety id out of stock?

Thanks

Hello,

There is no option to have different size for different categories.

You can modify the custom CSS I have provided. You can set any width any height as per your needs.

Please add this code to the Theme Settings > Custom CSS > Global to add a border to the active swatch:

body .woodmart-swatch.active-swatch{
    border:2px solid red;
}

You can change the border and thickness of the border as per your needs.

Best Regards

Thanks, two more questions about the swatches:

1- Can I change the size of Extra-Large swatches, to make them bigger?

2- Is there any way to change the opacity of the swatches for out of stock variations?

Thanks

Hello,

Please find this CSS code:

body .swatch-on-single.swatch-with-bg.swatch-size-large {
    width: 65px;
    height: 45px;
} 

Change the values as per your needs. Changing these values will change the size.

Best Regards

This will change the large swatches, I want the Extra large swatches to be still circular but bigger size. Is it possible?

Hello,

Please show me the screen and page URL of what you mean.

Best Regards

[Author]

Posts