Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #28216

    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.

    #136883

    Is there a way to remove the scroll bar beside the 450x450px framed size product image?

    Thanks.

    #136884

    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

    #136885

    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

    #136886

    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

    #136887

    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

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

    Thanks,

    dnikitiuk

    #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.

    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

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Enfold Main Product Image displays with Scroll Bar’ is closed to new replies.