Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 21, 2013 at 10:44 pm #28216
    dnikitiuk

    Hello,

    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?

    http://cetatek.msvdev.com/?product=warp1

    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.

    http://cetatek.msvdev.com/?product=m01-twin-lens-regular-fit

    Any ideas?

    Thanks.

    August 22, 2013 at 6:29 pm #136883
    dnikitiuk

    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
    Ismael

    Hey,

    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:

    .four.units.single-product-main-image.alpha {
    
overflow: hidden;
    
}

    Regards,

    Ismael

    August 23, 2013 at 9:22 pm #136885
    dnikitiuk

    Hello Ismael,

    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?

    Thanks,

    dnikitiuk

    August 24, 2013 at 3:14 pm #136886
    Devin

    hi dnikitiuk

    Whenever you change the thumbnail size for any image setting you need to regenerate your thumbnails using: http://wordpress.org/extend/plugins/regenerate-thumbnails/

    Regards,

    Devin

    August 27, 2013 at 1:33 am #136887
    dnikitiuk

    Hello Devin,

    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?

    http://cetatek.msvdev.com/?product=warp1

    Thanks,

    dnikitiuk

    August 27, 2013 at 1:39 am #136888
    dnikitiuk

    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;”

    Thanks,

    dnikitiuk

    August 27, 2013 at 11:50 pm #136889
    Devin

    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.

    Look for:

    #
    
# 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);
    
function avia_add_image_div()
    
{
    
echo "<div class='four units single-product-main-image alpha'>";
    
}
    

    
function avia_close_image_div()
    
{
    
global $avia_config;
    
$avia_config['currently_viewing'] = "shop_single";
    
get_sidebar();
    
echo "</div>";
    
}
    

    
#
    
# 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);
    
function avia_add_summary_div()
    
{
    
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.

    Regards,

    Devin

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Enfold Main Product Image displays with Scroll Bar’ is closed to new replies.