[Resolved] WooCommerce product image on Mobile

Home Forums Support [Resolved] WooCommerce product image on Mobile

Home Forums Support WooCommerce product image on Mobile

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2293525
    Paul

    Hi – I was just wondering if I could do this. I am trying to make my product images full screen size on mobile – kind of like what you would see here:
    https://qualitycontrolhq.co.uk/product/infinite-regression-zine-issue-2-fanzine/

    Thank you very very much!!!

    #2293537
    Fernando
    Customer Support

    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

    #2293881
    Paul
    #2293892
    David
    Staff
    Customer Support

    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 ?

    #2293959
    Paul

    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!

    #2293978
    David
    Staff
    Customer Support

    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;
        }
    }
    #2295251
    Paul

    Thank you so so much!

    #2295898
    David
    Staff
    Customer Support

    Glad to be of help

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