Archived topic

Woocommerce - Product gallery falls apart

7 replies · Started by Akos on September 10, 2020

Viewing posts 1–8 of 8

September 10, 2020 at 3:53 pm #1438654

Dear Developers!

I've been using GP Premium for while its really great and I really like it but now I ran into a strange behavior.
When the GP Premium plugin is activated then the product gallery on a single product woocommerce page is falling apart. The pictures of the gallery are just simply listed there is no gallery at all.

Link

I tried to turn off and turn on every plugins of my own one after another to locate the problem and unfortunately it's definitely the GP Premium.

Do you have any idea to solve this issue?

Sincerely yours,
Akos

September 10, 2020 at 8:54 pm #1438789

Hi there,

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know :)

September 11, 2020 at 1:13 pm #1439841

Hi Leo!

I’ve just added my site’s link as private information.

This is enough? :)

Thanks
Akos

September 11, 2020 at 3:09 pm #1439933

Sorry what is broken about it?

I assume you imported Niche?
https://gpsites.co/niche/product/happy-ninja/

Do you not want that gallery style?

If so remove this CSS in Additional CSS field in the customizer:

/*--- SINGLE PRODUCT ---*/

/* Stacked Gallery for desktop and sticky summary */

@media (min-width: 768px) {
    .woocommerce-product-gallery {
        display: none;
    }

    .woo-sumamry-wrap {
        display: grid;
        grid-template-columns: 60% 40%;
        grid-template-rows: auto;
        margin-bottom: 80px;
    }

    .woo-gallery-stack {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .woo-gallery-stack img {
        margin-bottom: 20px;
    }

    .woocommerce-tabs {
        grid-column: 1;
    }

    .woocommerce div.product div.summary {
        grid-column: 2;
        grid-row: 1;
        margin-left: 80px;
        position: -webkit-sticky;
        position: sticky;
        top: 105px;
        bottom: 100px;
        padding-right: 80px;
    }

    .single-product span.onsale {
        position: absolute;
        top: 0;
    }
}

Let me know if this helps :)

September 12, 2020 at 2:21 am #1440230

Yes, its Niche!

I deleted the additional CSS that you recommended but there is still no gallery.

Am I wrong?

September 12, 2020 at 3:14 am #1440276

Hi there

to remove the Niche Gallery stack you also need to delete ( or save as draft ) these two Elements found in Appearance > Elements:

Gallery Stack
Close Summary Wrap

This will remove the stack. And it should only display the standard carousel.

September 12, 2020 at 4:17 pm #1440967

David, Leo!

Thanks, you are the best! David's last advice solved my problem! :)

Akos

September 13, 2020 at 4:07 am #1441261

Glad we could be of help

This archived topic is closed to new replies.

Start building better websites today.