Paste this code in function.php add_filter ( 'woocommerce_product_thumbnails_columns', 'change_product_gallery_columns' ); function change_product_gallery_columns() { return 1; } Paste css in style.css /* Make image 75% width to make room to its right */ .single-product div.product .woocommerce-product-gallery .flex-viewport { width: 75%; float: right; } /* Make Gallery 25% width and place it beside the image */ .single-product div.product .woocommerce-product-gallery .flex-control-thumbs { width: 25%; float: right; margin: 0; } /* 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%; }