Rounded product corners

for elementor:

.elementor-widget-image .elementor-image img {
    border-radius: 50px 50px 0 0;
}

for shop:

.woocommerce ul.products li.product a img {
    border-radius: 30px 30px 0 0;
}

for all corners:

.woocommerce ul.products li.product a img {
    border-radius: 30px 30px 30px 30px;
}

(top-left, top-right, bottom-right, bottom-left)

This works like a charm! Is there any way to replicate this on the product page as well as the cart page?

Much appreciated
Tarun

.woocommerce-product-gallery__image {
    border-radius: 50px 50px 0 0;
}

.woocommerce table.shop_table .product-thumbnail img, .woocommerce-page table.shop_table .product-thumbnail img {
    border-radius: 50px;
}

.woocommerce table.cart img, .woocommerce-page #content table.cart img, .woocommerce-page table.cart img {
    border-radius: 50px;
}

It’s working on the cart page but not on the product page. Any ideas as to why?

Hello @stickerbar

We are not sure, what could be cause for the CSS not being applied on the required pages.

As the classes vary from page to page.

So you will need to take a look at the classes and it should be able to achieve your requirements.

I hope that helps.

Regards,
Suman

Hi Suman

Can you help me understand classes and how I can use them to solve the problem? Some more details will be really helpful as I’m not a developer.

Thanks!

Hello @stickerbar

You can refer to the following screencast on how to find the classes and apply the custom CSS accordingly.

I hope that helps.

Regards,
Suman

Tried it the way you suggested and it works properly now! Thanks!

• This reply was modified 4 years, 6 months ago by stickerbar.

Perfect, @stickerbar!

Glad it worked. ??

Do let us know if there’s anything else we can help you with.

P.S.: We are always available through our Support Portal and for quicker help and resolution.

Regards,
Suman