After much surfing, I gathered the following information.
I take no credit for this than the time & effort I spent learning the codes.
I will say I gained a lot from the Mozilla style editor option to locate the line to edit.
/* Makes your desired image size work
This at times produces undesired effects
like having too much white space to your image right
The other tweaks below will fix this
*/
.woocommerce div.product div.images img,
.woocommerce #content div.product div.images img,
.woocommerce-page div.product div.images img,
.woocommerce-page #content div.product div.images img {
width: auto;}
/* Use less space for the images on product thumbnails
I have set my images on Woo Commerce to:
catalog images = "120 x 120px"
single product image = "220 x 220px"
Product Thumbnail= "90 x 90px"
So this reduces the default image container.
*/
.woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images {
float: left;
width: 30%;
}
/* Shift the Product description to the left to accommodate
the white space left by the reduction in image container.
*/
.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary {
float: right;
width: 68%;
}
.woocommerce #content div.product div.thumbnails a,
.woocommerce div.product div.thumbnails a,
.woocommerce-page #content div.product div.thumbnails a,
.woocommerce-page div.product div.thumbnails a {
float: left;
width: auto;
margin: auto 5%;
}
/* You may notice the little catalog images are not neatly positioned
or spaced. To align it with the product image. I achieved it with this.
*/
.thumbnails {
margin-left: 0px;
}
My site has just one listing as at the time of this posting.
my site after the tweak: https://solarpurchases.com/product
