August 21, 2013 at 10:44 pm #28216
The main product image within woocommerce shows a scroll bar beside the image. How can I remove/ have the image show at the correct cropped 450x450px framed size?
Uploaded Image Size: 1000 x 750px
Woocommerce->Catalog->Single Product Image= Width:450px Height: 999px Hard Crop:No
Secondly, product setup without images also have the scroll bar beside the placement image.
Thanks.August 22, 2013 at 6:29 pm #136883
Is there a way to remove the scroll bar beside the 450x450px framed size product image?
Thanks.August 23, 2013 at 5:47 am #136884
I’m not sure where you get that scroll. Maybe a plugin is messing with the theme’s css. Please add this on your custom.css or Quick CSS:
IsmaelAugust 23, 2013 at 9:22 pm #136885
Thanks for the response, that fixed the issue. These are the other woocommerce plugins that could be the culprits.
WooCommerce Catalog Visibility Options 2.3.0
WooCommerce Variation Swatches and Photos 1.3.0
Secondly when I try and enlarge the single product image from default (450×999) to (600×999) the resulting product page does not update the image size. Is there a limiting size within template CSS that prevents the image size from being updated within the woocommerce image options?
dnikitiukAugust 24, 2013 at 3:14 pm #136886
Whenever you change the thumbnail size for any image setting you need to regenerate your thumbnails using: http://wordpress.org/extend/plugins/regenerate-thumbnails/
DevinAugust 27, 2013 at 1:33 am #136887
Thanks for the update. I have used the regeneate-thumbnails plugin, and currently have woocommerce catalog single product image set to 600×999 px, but there is still no change to the product image.
If you are to shrink the responsive design to mobile size on your desktop browser, the mobile image will be larger than the standard “full page” single product image.
Is there any CSS that controls the single product image size other than the woocommerce catalog image options?
dnikitiukAugust 27, 2013 at 1:39 am #136888
What specifies the 224px; width: 298px container?
<span class=”image-overlay overlay-type-image” style=”opacity: 0; left: 5px; top: 5px; display: block; height: 224px; width: 298px;”
dnikitiukAugust 27, 2013 at 11:50 pm #136889
If you want to actually increase the size of the image then just changing the image dimensions wouldn’t do it. I though you were still trying to get the image to just be the correct size for the container on that page.
The image and content are in 2 sections of the grid for that page. They are wrapped by 2 functions in the config.php file in the config-woocommerce folder of your theme files.
# wrap single product image in an extra div
add_action( 'woocommerce_before_single_product_summary', 'avia_add_image_div', 2);
add_action( 'woocommerce_before_single_product_summary', 'avia_close_image_div', 20);
echo "<div class='four units single-product-main-image alpha'>";
$avia_config['currently_viewing'] = "shop_single";
# wrap single product summary in an extra div
add_action( 'woocommerce_before_single_product_summary', 'avia_add_summary_div', 25);
add_action( 'woocommerce_after_single_product_summary', 'avia_close_div', 3);
echo "<div class='eight units single-product-summary'>";
The images are in 4 (four) columns of the 12 column grid and the rest is in 8 (eight) columns. You can change the classes to change the container sizes as needed.
The topic ‘Enfold Main Product Image displays with Scroll Bar’ is closed to new replies.