product visual

Hello,

Attached screenshot, I would like the colors to be smaller than the images, you gave me in CSS code – .single-product [class*=”wd-swatches”] { –wd-swatch -size: 5em !important; }

.wd-bg-style-1[class*=”wd-swatches”] { –wd-swatch-size: 3em !important; }

.wd-bg-style-1[class*=”wd-swatches”] .wd-swatch-bg { border: 1px solid #000 !important; }

.wd-swatch :is(img,picture) {
object-fit: contain !important;
}
;
}

The problem is that the image and the color are the same size so I think the {} CSS – .single-product selector is not working in 5 em..

Please give me a clue to correct this style.

Attachments:

You must be logged in to view attached files.

Hello,

Sorry for the inconvenience but earlier, when we provided you with CSS you had different styles selected for the Color as well as the Image Swatches, so in that case the CSS would work for the Color Swatches because the .wd-bg-style-1 is the class which was earlier specifically generated for the Color Swatch on your Site.

Now both of the mentioned Swatches have the same exact classes being generated so it’s quite difficult to specifically target the Color Swatch right now unfortunately with the same style. Right now, there isn’t a separate class specifically generated for the Color Swatch which we can target.

Best Regards

It’s a shame because for us users it would be more convenient to have separate classes. it is complicated then to have a harmony between the images and the colors which are two different things..

Hello,

Unfortunately, there are some limitations related to the swatches design right now which is why it is difficult to specifically target the Color swatch right now.

Just in case, if you can have a different bg-style for Color and Panneau Swatches on your Site then we can try providing you the CSS specifically for the Color Swatch as in that case they both can have a different bg-style class and it will become easier to target the Color Swatch specifically. Hope you can understand the limitations here.

Best Regards

Hello,

Thank you for your feedback, it would be nice to do some tests according to the css codes, if you can make me selectors after I adjust them according to my needs..

Thank you

Hello,

Once you have different bg-styles selected for the Swatches, you can share the exact Product URL with us so that we can provide you the specific CSS for that.

Best Regards

Hello,

I put the url for you in the private area.

Beautiful day,

Hello,

Sorry to say, but your Site is on Maintenance mode and the wp-admin URL isn’t also accessing. So, kindly please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards.

Hello,

I removed the maintenance during your intervention,

tell me if it’s ok

Hello,

Now as you have two different bg-styles for the swatches, the earlier sent will work in this regard for Color Swatches size decrement:

.wd-bg-style-1[class*=wd-swatches] { --wd-swatch-size: 2em !important; }

You can change the value according to your choice.

Location to paste Custom CSS, go to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section >> paste the CSS.

Best Regards

Hello,

Thanks for your feedback,

I tried the code works, thanks for your research and especially for the solution.

Beautiful day,

Most Welcome!!!.

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts