Issues With Woo Commerce Related Products Image Sizes

[mcuttino]

Having problems with the related products image sizes on my blog. Made most of the modifications to the CSS that I had seen on this forum and others and it corrected my catalog image size and product image size but my related products image size still displays way too big.

1. I thought I had changed the CSS so that the image width on related product image sizes would be auto instead of 100% but whenever I inspect the element in the Chrome browser it still shows the width being reported as 100% from what I see.

2. In addition it would be nice if I could get the main product images to center in the white space available instead going to the top and the left margin with no padding and leaving a lot of white space in between the main product image and the product information to the right of it.

http://blackartblog.blackartdepot.com/shop/hip-hop-montage-by-herbert-beyer

Note: running wp 3.6 on the genesis framework and the genesis connect for woo commerce installed as well.

[Paulie_D]

For the main product image you would need to add margin: somepx auto to get it to center in the div with a class of images.

So..something like

div.images img {
margin: 20px auto;
}

You should be aware, on looking at the HTML that the image dimensions are hard coded into the HTML.

Not sure about the the related product images…there is a lot of inline CSS inside the HTML which, I am supposing is either added by PHP or JS (this I suspect).

At the moment these links have this in their CSS

display: block;
float: left;
border-right: 1px solid #ddd;
border-bottom: none;
margin: 0;
padding: 6px;
text-decoration: none;
text-align: left;
cursor: pointer;

This would need some changes to center…such as removing the floats and adding making them inline block with a text-align:center on the containing div.

[mcuttino]

I’ve been looking and trying to make the adjustments but it appears that the main problem I’m having with the css on the related products image is that even though I change the woocommerce.css to:

        .woocommerce .related ul.products li.product img, .woocommerce-page .related ul.products li.product img, .woocommerce .upsells.products ul.products li.product img, .woocommerce-page .upsells.products ul.products li.product img, .woocommerce .related ul li.product img, .woocommerce-page .related ul li.product img, .woocommerce .upsells.products ul li.product img, .woocommerce-page .upsells.products ul li.product img {
    width: auto;
    height: auto;
    }

it always renders as

.woocommerce .related ul.products li.product img, .woocommerce-page .related ul.products li.product img, .woocommerce .upsells.products ul.products li.product img, .woocommerce-page .upsells.products ul.products li.product img, .woocommerce .related ul li.product img, .woocommerce-page .related ul li.product img, .woocommerce .upsells.products ul li.product img, .woocommerce-page .upsells.products ul li.product img {
width: 100%;
height: auto;
}

when I inspect the element in Chrome. I can’t determine what is overriding the setting that I put manually in the woocommerce.css file

[Paulie_D]

I suspect you are trying to change too much in one go.

This

.woocommerce .related ul.products li.product img, 
.woocommerce-page .related ul.products li.product img, 
.woocommerce .upsells.products ul.products li.product img, 
.woocommerce-page .upsells.products ul.products li.product img,
.woocommerce .related ul li.product img,
.woocommerce-page .related ul li.product img, 
.woocommerce .upsells.products ul li.product img, 
.woocommerce-page .upsells.products ul li.product img {
width: 100%;
height: auto;
}

changes the image properties for a lot of places.

In any case, that’s not what you seem to be asking for.

This is the HTML for just one of those images :http://codepen.io/Paulie-D/pen/HclgC

Huge isn’t it and I haven’t even added in any of the CSS.

There is a lot to overcome..I suspect that a lot of that cr*p is being added dynamically and will be tough to overcome.

[Author]

Posts