Home Forums WoodMart – Premium Template Rectangular Swatches for color paints

This topic contains 10 replies, has 2 voices, and was last updated by Elise Noromit Elise Noromit 1 month ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #206959

    siavash
    Customer

    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

    Private Content Hidden
    Attachments:
    You must be logged in to view attached files.
    #206962

    siavash
    Customer

    Reattached the first screenshot

    • This reply was modified 1 month, 2 weeks ago by  siavash.
    Attachments:
    You must be logged in to view attached files.
    #206996

    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

    #207080

    siavash
    Customer

    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 🙂

    • This reply was modified 1 month, 2 weeks ago by  siavash.
    Attachments:
    You must be logged in to view attached files.
    #207161

    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

    #208430

    siavash
    Customer

    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

    #208453

    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

    #209966

    siavash
    Customer

    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

    #209980

    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

    #209987

    siavash
    Customer

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

    #209996

    Hello,

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

    Best Regards

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.