This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Vantage Woocommerce Product Detail Image Size

Resolved 3 replies premiumthemetheme-vantage
Chris Wong
11 years ago · Last reply by Andrew Misplon 11 years ago

How to change the theme’s featured product image size and related product images? Also the featured product text (相关产品) is not positioned correctly.

http://china.ahlei.org/?product=a-century-of-hospitality

Issue #1- Product Detail Single Image Size to be reduced.
The featured product image “A century of hospitality” has the image class of [shop_single] that is currently set to 146×204 and scaled to 159×222. I have installed “Simple Image Sizes” plug-in but this does not change the dimension of the image on the page. How do I change the theme/woocommerce size to be smaller?

Issue #2 – Product Detail Related Product Image Size to be reduced
The 2 related product images has the image class [shop_catalog] that is currently set to 146×204 and scaled to 346×483. This is the same class as the product gallery (http://china.ahlei.org/?post_type=product) so how to force the theme to show the related products at 146×204?

Issue #3 – Product Detail Related Product Text Misaligned
The related product text (相关产品) is positioned in between the featured product image and its text description but should be positioned at the top of the related product images below. How to fix this?

Urgently need help to deliver this website to a customer. Thanks!

URL: http://china.ahlei.org/?product=a-century-of-hospitality

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

3
  1. Andrew Misplon Staff 11 years, 4 months ago

    Hi Chris

    Please try the following under Appearance > Custom CSS:

    /* WooCommerce */

.woocommerce #content div.product div.images img, .woocommerce div.product div.images img, .woocommerce-page #content div.product div.images img, .woocommerce-page div.product div.images img {
width: auto !important;
}

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

.woocommerce .related h2 {
clear: both;
}

    Hope that helps.

  2. Chris Wong 11 years, 4 months ago

    Worked a charm – Thanks!

  3. Andrew Misplon Staff 11 years, 4 months ago

    Super, glad we could help. All the best.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread