[Resolved] WooCommerce Product Thumbnails

Home Forums Support [Resolved] WooCommerce Product Thumbnails

Home Forums Support WooCommerce Product Thumbnails

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #715984
    Ian

    Hi
    I moved from the restricting Storefront theme over to GeneratePress Premium.
    On the single product page I want to move the Product thumbnails from under the product image to the left of it.
    To do this I need to configure the thumbnails in a single column, move the main image to create space, display the thumbnails in a single column left of image.

    I thought I had it fixed using
    In functions.php (child theme)

    /* Change Product Thumbnails to side columns */
    add_filter ( ‘woocommerce_product_thumbnails_columns’, ‘imr_single_gallery_columns’ );

    function imr_single_gallery_columns() {
    return 1;
    }

    AND

    In CSS Child theme

    * Single Image Gallery Move Thumbnails */

    /* Make image 75% width to make room to its right */

    .single-product div.product .woocommerce-product-gallery .flex-viewport {
    width: 80%;
    float: right;
    }

    /* Make Gallery 25% width and place it beside the image */

    .single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
    width: 20%;
    float: left;
    }

    /* Style each Thumbnail with width and margins */

    .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
    width: 90%;
    float: none;
    margin: 0 0 10% 10%;
    }

    /* Move the zoom tool to the left side to accommodate the gallery thumbs (otherwise it covers the first thumbnail */
    .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
    right: .875em !important;
    }

    I had this working in Storefront before but I think it maybe something to do with the grid system that is stopping me with Generate Press.

    Are you able to shed any light on the issue please.

    Thanks
    Ian

    GeneratePress 2.1.4
    GP Premium 1.7.3
    #716083
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Any chance you can link me to an example of what it should look like?

    #716117
    Ian

    Hi Tom

    Sure along the lines of this:
    https://businessbloomer.com/woocommerce-display-product-gallery-vertically-single-product/

    Except those thumbnails are right instead of left of mail image of course and also a little larger than I want. they are all in one column though unlike mine.

    His code is what I adapted but it doesn’t quite work

    Thanks
    Ian

    #716606
    Tom
    Lead Developer
    Lead Developer

    Try adding this CSS:

    .woocommerce div.product div.images .flex-control-thumbs li {
        float: none;
        width: 50px;
    }
    #716904
    Ian

    Hi Tom
    Fantastic that worked. I used width:95% instead for a bit of mobile flexibility. Thanks so much.
    Best
    Ian

    #716946
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.