Support » Theme: Astra » Rounded product corners

  • Resolved stickerbar

    (@stickerbar)


    Hi

    Is there any way to change the thumbnails of my products into rounded squares instead of squares?

    Thanks in advance
    Tarun
    Team StickerBar

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • 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)

    Thread Starter stickerbar

    (@stickerbar)

    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;
    }
    Thread Starter stickerbar

    (@stickerbar)

    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

    Thread Starter stickerbar

    (@stickerbar)

    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

    Thread Starter stickerbar

    (@stickerbar)

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

    • This reply was modified 1 year, 1 month 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

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Rounded product corners’ is closed to new replies.