Home › Forums › WoodMart support forum › Round Image Swatches

Round Image Swatches

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • December 14, 2021 at 1:28 pm #339444

    b.brenner
    Participant

    Hi, is it possible to change the design of the image swatches on single product page? I would like to have them round, see attachment.

    Attachments:
    You must be logged in to view attached files.
    December 14, 2021 at 11:31 pm #339568

    Elise Noromit
    Member

    Hello,

    The swatches are round by default, please provide more details and give your variable product URL.

    Best Regards

    December 15, 2021 at 9:05 am #339656

    b.brenner
    Participant

    Hi, here the URL and a screenshot of the image swatches.

    Attachments:
    You must be logged in to view attached files.
    December 15, 2021 at 1:21 pm #339755

    Elise Noromit
    Member

    Hello,

    I am checking your products and swatches are already round: https://gyazo.com/3f6dd695733a14cf28b4ff6a2716b8f3

    Please clarify.

    Best Regards

    December 15, 2021 at 3:08 pm #339796

    b.brenner
    Participant

    Hello, you are checking the wrong site. On this site the woodmart theme does not exist.
    Actually in my last reply I sent you the URL of our staging where we are testing the woodmart theme. Here it is again:
    https://borowski-glas.de/1631797923871/?product=amy
    Please have a look there and tell me if the swatches are round or not.

    December 15, 2021 at 6:57 pm #339823

    Elise Noromit
    Member

    Hello,

    I cannot enter the page you provide https://gyazo.com/fec5b38aea3d3a7ea27d05f3d57a0288

    Best Regards

    December 16, 2021 at 7:26 am #339883

    b.brenner
    Participant

    Sorry, it is a staging and I gave you the login just for the other topic. Here it is.

    December 16, 2021 at 1:16 pm #339993

    Elise Noromit
    Member

    Hello,

    Please provide the correct login URL and check the password.

    I cannot log in.

    Best Regards

    December 16, 2021 at 1:20 pm #339995

    b.brenner
    Participant

    Hello, I just tested it and it is working fine…please try it again.

    December 16, 2021 at 7:47 pm #340059

    Elise Noromit
    Member

    Hello,

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

    .swatch-on-single.swatch-with-bg.swatch-size-xlarge {
border:2px solid #444444;
border-radius:50%;
padding:3px;
}
.wd-swatch:after{
display:none;
}

    Best Regards

    January 6, 2022 at 3:33 pm #343859

    b.brenner
    Participant

    Thank you.
    Unfortunately the padding doesn´t work. There should be a small distance between image an border.
    The border of the selected image swatch also should change color (for example from grey to black) when the user clicks on it.

    January 7, 2022 at 10:53 pm #344050

    Elise Noromit
    Member

    Hello,

    Please replace the code with this one: 

    .swatch-on-single.swatch-with-bg.swatch-size-xlarge.active-swatch {
border:2px solid #000000;
border-radius:50%;
padding:3px;
}
.wd-swatch:after{
display:none;
}
.swatch-on-single.swatch-with-bg.swatch-size-xlarge {
border:2px solid #444444;
border-radius:50%;
padding:3px;
background-size: 70%;
background-repeat: no-repeat;
}

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

    Best Regards

    January 11, 2022 at 10:56 am #344530

    b.brenner
    Participant

    Thanks a lot, that is solved.

    January 11, 2022 at 12:57 pm #344570

    Elise Noromit
    Member

    You are welcome! We are here to help.

    Wish you a wonderful day!

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Round Image Swatches’ is closed to new replies.