Archived topic
Change Product Zoom Magnifier Icon position
1 reply · Started by David on March 15, 2019
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.
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%;
}