Change Images to Circles on Single Product Pages

  • Resolved Bradley Allen

    (@bradley)


    9 years, 6 months ago

    On single product pages, I’m trying to change the main product image, and the gallery images below, to display as circles.

    Note: The following CSS changed the images to circles on the homepage and shop:

    ul.products li.product img {
	border-radius: 50%;
}

    How can I change the main product image, and the gallery images below, to display as circles on the product pages?

    https://copperpanjams.com/shop/apple-jam/

Viewing 3 replies - 1 through 3 (of 3 total)

  • Replace your snippet with:

    ul.products li.product img,
.single-product .images img {
	border-radius: 50%;
}

    Cheers

    Thread Starter Bradley Allen

    (@bradley)

    Sweet, thanks James!
    After taking a look, I may choose to go with squares in this case for the product pages.
    Follow-up question:
    After the 50% border-radius is added, the clickable area is still a square. How can I change the clickable area to be a circle, like the image?

    Hey,

    You’ll need to apply the same styles to the anchor as well as the image.

    Cheers.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change Images to Circles on Single Product Pages’ is closed to new replies.