Return to previous page

Add 1px border around product image and product thumbnail images on single pp

This topic has 4 replies, 2 voices, and was last updated 6 years, 1 months ago ago by Rose Tyler

  • Avatar: thisisbolo
    thisisbolo
    Participant
    November 5, 2018 at 04:26

    Hi – I’m trying to add a 1px border around the image on single product page but it seems to be rendering funny. how can i fix this? see below.

    Please, contact administrator
    for this information.
    #202291 Copied Theme version: Latest WooCommerce version: Latest
    3 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 5, 2018 at 08:38

    Hello,

    Please try this custom css code:

    .single-product .product-images .swiper-wrapper img {
    border: 1px solid black;
}
.single-product .thumbnails-list a {
    margin-top: 3px;
    margin-bottom: 3px;
}

    Regards

    #202300 Copied
    Avatar: thisisbolo
    thisisbolo
    Participant
    November 6, 2018 at 06:50

    Thanks Rose for the help! So it’s a bit finicky with the way the 1px border renders. I fiddled with this a bit more and got a crisper 1px line using below.

    .single-product #swiper-unique-id-0 {border: 1px solid #e8e8e8; margin-bottom: 10px;}
.single-product .main-images {margin-bottom: 0px;}
.single-product .thumbnails-list .thumbnail-item {border: 1px solid #e8e8e8;}
    #202443 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 6, 2018 at 08:21

    You’re welcome!

    Regards

    #202450 Copied
  • Viewing 4 results - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.Log in/Sign up

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Grocery Mega Market – WordPress WooCommerce Theme
lazy-placeholder
Barbershop – WordPress WooCommerce Theme
lazy-placeholder
Coffee Store – WordPress WooCommerce Theme
lazy-placeholder
Designers – WordPress Theme
lazy-placeholder
HandMade Store – WooCommerce Theme
lazy-placeholder
Digital Marketing – WordPress WooCommerce Theme
lazy-placeholder
SEO Agency – WordPress WooCommerce Theme
lazy-placeholder
Spa – WordPress WooCommerce Theme
lazy-placeholder
Industrial Power Tools Store – WordPress WooCommerce Theme
lazy-placeholder
Hosting Store – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.