1. PROMO Subscribe our All Access Pass @ 75% OFF & access all our 16+ premium Divi extensions: Divi Block Pro, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved Divi Woo Product picture bug

Discussion in 'Free Divi Community Forum' started by Theo Leiteritz, May 19, 2024.

  1. Theo Leiteritz

    Theo Leiteritz New Member

    Hey guys, I'm new here so please forgive me if I didn't provide information to solve the problem right away

    I have a Woo Onlineshop with the Divi Theme and recently I have a problem with the Woo Product Image Module. The images in the product gallery are displayed shifted below each other and when I click on them it bends them away and no image is displayed anymore. I have already discussed this problem in detail with Elegant Themes support and the only solution was to click into the product settings of a product via Wordpress. After I went into the settings and went back without changing anything, it displayed the images normally again. The only problem is that I have over 1400 products and can't do this with every single one
     

    Attached Files:

    #1 Theo Leiteritz, May 19, 2024
    1. PRO MEMBER PERKS Beautifully crafted custom colored 'Industrial' Divi layout for all Pro members:View Demo
  2. Divi Booster

    Divi Booster Divi Expert

    Hey Theo,

    I took a look at the "Lumatek" page shown in your screenshot. It looks like the issue is that there are empty images in the product gallery. These are taking up space in the thumbnail area causing the thumbnails to split onto a second line. They are also messing with the main image as it is being slid too far away due to the presence of the empty image tags.

    I'm not quite sure why the empty images are there and I'm guessing maybe Elegant Themes' fix was to delete them?

    Rather than try to deal with this individually on all your products, one solution is to try and fix this with CSS. I came up with the following:

    Code:
    Log In or Sign Up to view this code.
    You can add this at:

    Divi > Theme Options > General > Custom CSS

    The main sacrifice I had to make to get this to work was to disable the sliding effect on the main image - now it just changes instantly. If you need this sliding effect, it would probably be necessary to instead remove the empty image items via PHP code so the slider code can correctly calculate the positions of the remaining images. I haven't tried this, but I image it would be possible.

    I've only tested this on the one page, but it corrects both the thumbnails and main image there. I'd recommend checking it out on other product pages to make sure it looks okay on those.
     
    #2 Divi Booster, May 20, 2024
  3. Theo Leiteritz

    Theo Leiteritz New Member

    OMG thank you man, your code worked perfectly and saved me so much time and nerves. Thank you!
     
    #3 Theo Leiteritz, May 21, 2024
    1. PRO MEMBER PERKS Divi Ultimate Blog Plugin - Easily set awesome default design for your Divi single blog page:Learn More
  4. Divi Booster

    Divi Booster Divi Expert

    You're very welcome, Theo! I'm glad that did the trick! :)
     
    #4 Divi Booster, May 21, 2024
(You must log in or sign up to post here.)