Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 29, 2018 at 3:22 pm #904278
    adplusdesign

    Hi,
    I have 2 questions. First, how to turn off zoom in product view (on a single product page):
    http://test.pipar.ee/tooted/sriracha-tsillikaste-kaffirlaimiga-455ml-uus/

    And second, I wanted product short descriptions to be visible on the product page when hovering on the products. To do that I made them visible on the product page. Moved .template-shop .product div.inner_product_header_cell div (which contains the short description) on the product image with CSS (top-margin: -190px; ) and set a height for .product div.inner_product_header_cell div p (containing the description text).
    The problem is that though the CSS is same on the product category pages (and HTML seems to be the same as well), the hover text block seems to begin from a different heght on different pages.
    Here, when you hover on the product images, the block is aligned to the top edge of the image:
    http://test.pipar.ee/pood/maitsestamine-ja-kupsetamine/dekoorvurtsid-maitsestamine-ja-kupsetamine/
    ..but here you can see a ~20px padding (so to make it align the top edge of the picture, top-margin should be different, ~like -210px):
    http://test.pipar.ee/pood/maitsestamine-ja-kupsetamine/tekstuuriparandajad-maitsestamine-ja-kupsetamine/

    I can’t seem to find where the padding or difference comes from. Each text block has the same CSS, so it could be a difference in the template html – but where and based on what (as the category pages seem to be the same)?

    January 30, 2018 at 12:16 pm #904790
    Victoria

    Hey adplusdesign,

    Here is the code you can put in your funtions.php

    
function remove_image_zoom_support() {
    remove_theme_support( 'wc-product-gallery-zoom' );
}
add_action( 'wp', 'remove_image_zoom_support', 100 );

    If you need further assistance please let us know.

    Best regards,
    Victoria

    March 19, 2018 at 6:15 pm #929204
    adplusdesign

    Hi,
    but what about the second question:
    I wanted product short descriptions to be visible on the product page when hovering on the products. To do that I made them visible on the product page. Moved .template-shop .product div.inner_product_header_cell div (which contains the short description) on the product image with CSS (top-margin: -190px; ) and set a height for .product div.inner_product_header_cell div p (containing the description text).
    The problem is that though the CSS is same on the product category pages (and HTML seems to be the same as well), the hover text block seems to begin from a different heght on different pages.
    Here, when you hover on the product images, the block is aligned to the top edge of the image:
    http://test.pipar.ee/pood/maitsestamine-ja-kupsetamine/dekoorvurtsid-maitsestamine-ja-kupsetamine/
    ..but here you can see a ~20px padding (so to make it align the top edge of the picture, top-margin should be different, ~like -210px):
    http://test.pipar.ee/pood/maitsestamine-ja-kupsetamine/tekstuuriparandajad-maitsestamine-ja-kupsetamine/

    I can’t seem to find where the padding or difference comes from. Each text block has the same CSS, so it could be a difference in the template html – but where and based on what (as the category pages seem to be the same)?

    March 21, 2018 at 6:34 am #930340
    Ismael

    Hi,

    Thank you for the info. How did you apply the “woocommerce-loop-product__title” container height?

    Best regards,
    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.