Shop Categories

X

Problem with woocommerce images

Home Forums Agama Pro Problem with woocommerce images

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #27229
    Matthew Sheridan
    Participant

    Having strange woocommerce thumbnail sizing problems/overlapping images.

    Links attached. Please advise.

    Thanks.

    #27230
    Zex
    Moderator

    Hello, Matthew!

    Unfortunately, the link you provided is empty so I can’t see the issue.

    Anyway, have you checked the woocommerce Product Images sizing options located in
    Customizing-> WooCommerce-> Product Images ?

    https://prnt.sc/t61z90

    Regards

    #27238
    Matthew Sheridan
    Participant

    Hi, the link is the following https://www.nixsensor.com/shop/

    #27240
    Zex
    Moderator

    Hello, Matthew!

    Thank you. Now the link works.

    From what I can see, you have created your shop using the WP Bakery page builder.
    You need to increase the width of your product elements, somewhere in the element settings.
    …or simply insert the following code into Customizing->General->Additional CSS:

    .woocommerce .product{
        width:100%!important;
    }

    I hope this code will solve the problem you have.

    Best Regards

    #27253
    Matthew Sheridan
    Participant

    Hi I’m still experiencing a similar issue on single product pages

    Nix Mini 2 Color Sensor

    #27257
    Zex
    Moderator

    Hello, Matthew!

    I visited your website and saw that you created your single product page using the WP Bakery page builder. As far as I noticed the product image is fine but there is a problem in the thumbnail images.
    https://prnt.sc/t7dxo8
    There is probably an option in the element settings to fix this. (I can’t tell you exactly where since this element is not part of our theme).

    Anyway, If you want to try, maybe the following code will help you solve it more easily(insert the codes into Customizing->General->Additional CSS):

    .woocommerce div.product div.images .flex-control-thumbs li{
     width:8%!important;
        height: auto!important;
    }
    body:not(.single-product) .flex-control-nav{
        z-index: 8!important;
        width:95%!important;
    }

    Please let me know if the code is OK, or you want something else.

    Regards

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.