[Resolved] too much gap between product image and description

[ZUN MIN]

hi,

I left login credential.
When you see the page product page there are huge gap between product image and descriptions so I need to scroll down a bit.

https://lucascoffee.co.nz/product/lucas-coffee-blend/

how can I modify this?

Also If I add more images I want to make image size smaller for 2nd or 3rd photos. they are too big same as main image size.

https://lucascoffee.co.nz/product/motta-coffee-distribution-tool-leveller-58-5mm-adjustable-black-and-stainless-steel-8350-585/

how can I modify this as well?

thank you.

Regards,

Lee

[Fernando]

Hi Zun Min,

Sorry, I tried logging in to your website, however, it seems that the credentials provided are incorrect.

With that said, can you confirm if the credentials provided are correct?

Hope to hear from you soon! Thank you! 🙂

[ZUN MIN]

Hi there, I left again.

[David]

Hi there,

Niche uses a custom Stacked Gallery on Desktop. If you switch to mobile view, you will see the default Woocommerce Gallery with Thumbnail Carousel.

Question: Would you sooner see the default Woocommerce Gallery with Thumbnail Carousel on Desktop as well ?

Let me know – if no, then ill look at some other options.

[ZUN MIN]

Hi David,

Yes, I think something about your “Shop theme” demo product image size would suit best for me. shows rest photos makes small on the bottom.
How can I change?
Also how do I remove breadcrumbs on the product page under the title and price?
Thank you.

Regards,

Lee

[David]

Lets fix the images first.

1. Go to Appearance > Elements and delete ( save as draft ) the two hook elements:

Gallery Stack
Close Summary Wrap

2. In Customizer > Additional CSS and REMOVE this block of code:

/* 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;
    }
}

Do that and then we can deal with the Breadcrumbs 🙂

[ZUN MIN]

Hi David,

it works!
Please let me know about removing Breadcrumbs on the product pages just above short description.
Thank you!

Regards,

[David]

Great.
OK so in Appearance > Elements you will see a Hook Element titled: Woo Breadcrumb Single product
You can delete ( or save it as a draft ) that element to remove them.

[ZUN MIN]

All good! Sorted.

[David]

Glad to be of help

[M.schreijer@gmail.com]

Yes the Product field where customers to configure the product using texts,

[Ying]

Hi M.schreijer@gmail.com,

Do you have a question? If so, can you open a new topic and link us to your site？

Thanks!

[Author]

Posts