WooCommerce product image on Mobile

Hi Paul,

You’ll need custom CSS.

Can you share a link to a product page in your site?

You may use the private information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Yes of course -
https://givepraiserecords.com/product/too-many-voices-catch-me-if-you-can-lp/

Thank you very much!!!

Hi there,

couple of questions:

1. What happens to the Breadcrumb on mobile ? As thats a pain to move below the image.
2. Do you need the Zoom lightbox ?

Thank you!!

I can actually just get rid of the breadcrumbs - don’t care about those at all!

I don’t need the lightbox, I actually keep meaning to get rid of that.

Thank you!

In that case:

1. You can disable the Breadcrumbs in Customizer > LAYOUT > Woocommerece.

2. You can add this PHP Snippet to disable the light box:

function remove_image_zoom_support() {
    remove_theme_support( 'wc-product-gallery-zoom' );
    remove_theme_support( 'wc-product-gallery-lightbox' );
}
add_action( 'wp', 'remove_image_zoom_support', 100 );

How to add PHP: https://docs.generatepress.com/article/adding-php/

3. Add this CSS to make the product image fill the screen on mobile:

@media (max-width: 768px) {
    .separate-containers.single-product .inside-article {
        padding-top: 0;
    }
    .woocommerce #content div.product div.images {
        margin-left: -20px;
        margin-right: -20px;
        min-width: 100vw;
    }
}

Thank you so so much!

Glad to be of help