We are using the Vantage Theme. We have set our WooCommerce single product image display size to 600 x 600 hard crop. If we upload a larger image, it is automatically resized to 600 x 600 in the media library. This works OK for our own website purposes, but now we are connected to an Amazon feed and have run into a problem. Amazon image requirements are minimum 1000px on the longest side.
– If we set the WooCommerce single product image display size to 1024 x 1024, the uploaded image size displays full size on the product page and is too large for the layout. Is there a way to set the Woo image display size to the larger dimension so we are compatible with Amazon’s image requirements in our feed, and at the same time constrain the display size on the page with CSS? Or is there another solution?
– http://www.backtpack.com/product/backtpack-4/
WooCommerce image size Ok, but too small for Amazon requirements
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Evollo
You can (try) fix/change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.
/* WooCommerce single product page */ .woocommerce div.product div.images img { max-width: 600px; }You might also need to install the SiteOrigin CSS Editor.
You could also use Simple Image Sizes to create another image size, just not sure how we’d get Amazon to accept it, I can help with the creation part but not the linking it up to your feed, sorry, haven’t worked with Amazon before.
I wasn’t very clear. We are changing our original images from a square format to a rectangular/portrait format in order to meet the Amazon requirement that the image fill at least 90% of the canvas. Previously we had formatted all our product images in a perfect square (equal height and width), which produced a consistent presentation for WooCommerce. But the square images have too much white space on the sides of our product to meet the Amazon requirement.
When we upload a rectangular/portrait product image into WooCommerce, the Vantage theme correctly scales the WIDTH of the main product image, the gallery thumbnails, and the category thumbnails. However, the image HEIGHT varies in the display within the maximum allowable image height. It looks funny when adjacent category images and gallery images have variable heights.
We are looking for a way to scale all our Woo images into a square space, no matter the proportion (i.e., square vs. rectangle/portrait vs. rectangle/landscape) of the actual image. Is there a CSS solution?
Regarding the Amazon feed, we are using the WP-Lister plugin. If we were to use Simple Image Sizes to create another image size, we would have to redirect WP-Lister to fetch an image from a different place. I think it best to leave WP-Lister alone, and instead try to constrain the way Vantage displays the images with CSS.
Are you able to upload one image that shows the problem so I can experiment live? Or perhaps send me a link to that image and I’ll try find a solution locally.
This is a private message.
This will get you part of the way there:
/* WooCommerce */ .woocommerce ul.products li.product a img { max-height: 223px; margin: 0 auto; width: auto; } .single-product .images > a { background: #fff; display: block; } .woocommerce.single-product div.product div.images img.attachment-shop_single { margin: 0 auto; max-height: 484px; width: auto; }We’re going to need to change the archive page layout and introduce a wrapper around the image so we can change the background color, right now the only wrapper is going around the image and text so it doesn’t help us. Will revert with that ASAP.
This CSS does get us part way there. As long as the size of the viewing window elicits a responsive layout in which the product image size reaches the max-height specified in the CSS, the images display properly on both product and category pages. However, when the viewing window is a size where the responsive layout resolves to an image size that is less than the specified max-height, the issue still appears.
We will look forward to your release of updated archive page layout code for the complete fix. This issue is common in many responsive themes/templates, not just in the Vantage theme. I’m impressed that SiteOrigin is taking this issue seriously!
On a related note, there is a similar product image size display problem in the Vantage theme search results. The default template displays Woo product image search results at full page width. If the original image is smaller, the display expands the image making it blurry. The following CSS resolves blur problem for our previous-size (smaller) product images. However, it worsens the problem for the new larger images (e.g., to meet Amazon & eBay requirements), as then the image displays beyond the page width margins. Image height is also hard cropped, which creates additional display problems for main product images in portrait layout.
[code lang=".search-results article.post .entry-header .entry-thumbnail img, .search-results article.page .entry-header .entry-thumbnail img { width: auto; }"]Would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:
[email protected]
Just navigate to UsersAdd New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the Send Password field so we receive the details.
Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.
This is a private message.
This is a private message.
This is a private message.
Can you let me know when this happens:
However, when the viewing window is a size where the responsive layout resolves to an image size that is less than the specified max-height, the issue still appears.
What device / situation were you able to view this problem?
A plugin called Code Snippets has been installed, I added the necessary wrapper for WooCommerce product images on archive pages. It could have gone in your child functions.php file too.
Snippet I added was:
// Add the img wrap add_action( 'woocommerce_before_shop_loop_item_title', create_function('', 'echo "<div class=\"img-wrap\">";'), 5, 2); add_action( 'woocommerce_before_shop_loop_item_title', create_function('', 'echo "</div>";'), 12, 2);Which allowed us to say in CSS:
.archive .img-wrap { background: #fff; }Insert and adjust the following rule as required:
/* Search Results */ .search-results article.post .entry-header .entry-thumbnail img,.search-results article.page .entry-header .entry-thumbnail img { max-width: 484px; }You can use that to set a max-width for the search results page. You could also replace the max-width with a max-height declaration.