Single product layout (border around product image and thumbnails)

Hi, is there any way to put a border around the image and the thumbnails separately, rather than the whole container? (pls see the green border from Elementor). I’d like it to do like the red border mockup, is this possible? I have a lot of white images and they look like they need a border so they don’t all mesh into each other.

Thanks in advance for your help!

Attachments:

You must be logged in to view attached files.

Hello,

Please try this custom CSS code and paste it to Theme Settings >> Custom CSS >> Global CSS section:

.single-product .product-images .swiper-wrapper img {
    border: 2px solid red;
}

Best Regards

Hi, sorry for the late reply. I tried that but unfortunately it didn’t work. I’ve also set the border in Elementor under the product page layout to none…in hope the theme settings would override everything.

Attachments:

You must be logged in to view attached files.

Hello,

Sorry to hear about the inconvenience.

Can you please provide valid WP-ADMIN Login details of your Site in the below listed format on which you are facing the issue so that we can look after the mentioned issue on your Site and assist you accordingly?

WP-ADMIN URL:
WP-ADMIN USERNAME:
WP-ADMIN PASSWORD:

Best Regards.

Hi, please see login details in private content.
Thank you so much!

Hello,

Actually, we have noticed that you are currently using the old version of the Woodmart Theme and Core plugin which is why our earlier given CSS wasn’t working because of the Class difference.

So, we have now applied a new CSS on your Site and the Border on the Product Featured Image is added: https://ibb.co/BfsFvpg

Location to find Custom CSS, please go to Dashboard > Theme Settings > Custom CSS > Global Custom CSS.

Best Regards.

Yes, I haven’t updated yet, I see a lot of teething problems with the new release, but is definitely on the list.
The css works perfect – thank you so much for your help, am so grateful and would never figure these things out by myself.

Hmm…just a litte styling problem. I’ve changed it from red to grey and to 1px…so it looks better 🙂
I see the border doesn’t quite fit the image (I’ve double checked in photoshop that there’s no white 1px border on the edges)

If you try these URLs with thumbnails, then the border doesn’t always fit the picture, it seems to be a styling issue with the images for some reason.

https://www.swltesting.site/product/dyreliv-ved-polene/
https://www.swltesting.site/product/min-fakta-abc-vinterboken/
https://www.swltesting.site/product/morsomme-mystiske-og-magiske-merkedager/

I see a weird gap in Elementor in the product layout page, could it be something here? I’ve not added any padding or anything like that, but it seems to be creating strange behaviour and a bit random…main image for thumbnail one has a 1-2px gap on left and right, image for thumbnail 2,3 and 4 have a thick 2px border on the left, but none on the right…it seems to do these strange things for all the product images.

Is there something I can do to fix it somehow?
Is it something to do with the main image container that is creating the problem?

Attachments:

You must be logged in to view attached files.

Hello,

Sorry for the further inconvenience caused.

Actually, by default WooCommerce has added the padding-left and padding-right on the Product Featured Images which is why you are seeing those tiny little gaps after adding borders. So, we have added another CSS property which is padding: 0 !important; in our earlier applied CSS to right off the already added Paddings and now the Images appear full under the Border added. Please refer to the following Screenshot: https://ibb.co/sJTsK0W

Please check back your Site after completely clearing the browser cache.

Best Regards.

I’m so grateful, thank you so much – it looks perfect now!

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