[Support request] Change Product Zoom Magnifier Icon position

Home Forums Support [Support request] Change Product Zoom Magnifier Icon position

Home Forums Support Change Product Zoom Magnifier Icon position

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #839673
    David

    Hello guys, could you give advice on how to change the position of the zoom magnifier icon for the woocommerce single product view from the top right corner to the bottom right corner of the featured image?

    I thought this was easy to do by changing the css position of the icon from top:.5em; to bottom:.5em; but the problem is that if the product also has gallery images, then the bottom will include the gallery. Also the height of the parent div will change according to the responsiveness of the images.

    Thank you for your help.

    GeneratePress 2.2.2
    GP Premium 1.7.8
    #839897
    David
    Staff
    Customer Support

    Hi there,

    really tricky without editing the woocommerce templates as there are no hooks within the gallery container to assist with making those changes. I am not 100% sure but maybe this CSS Grid hack will do the trick, if not it would take custom development:

    .woocommerce div.product div.images.woocommerce-product-gallery {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }
    .woocommerce div.product div.images .woocommerce-product-gallery__trigger, .woocommerce div.product div.images .flex-viewport {
        grid-row: 1;
        grid-column: 1;
    }
    .woocommerce div.product div.images .woocommerce-product-gallery__trigger {
        position: relative !important;
        top: -10px !important;
        align-self: end;
        justify-self: end;
    }
    .woocommerce div.product div.images .flex-control-thumbs {
        grid-row: 2;
        grid-column: 1;
        width: 100%;
    }
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.