Okay
  Public Ticket #1644641
woocommerce bigger image in single product
Closed

Comments

  • Erica Gir started the conversation

    Hi!

    previously for TheFox theme you give me a custom css to make bigger the image of woocommerce and move the description below the image instead of on the right. (basically make 1 column layout with full width image)

    Can I ask you to be so kind to give me the code to make same customization in Cesis?

    the code was:

    .product_image_wrapper { width: calc(100% - 110px);}
    .rd_woo_image_ctn { width: 100%; }
    .woocommerce div.product div.summary, .woocommerce #content div.product div.summary, .woocommerce-page div.product div.summary, .woocommerce-page #content div.product div.summary { width: 100%; padding-top: 40px; }

    Thank you!

  •  895
    TheFox replied

    Hello again,

    add this custom css ( Cesis > general settings ) :

    .woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images { float: left; width: 100%; }

    .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary { float: right; width: 100%; clear: none; }

    This should do the trick!

    Do not hesitate to contact us if you have more questions.

    Have a nice day!

    Regards.


  • Erica Gir replied

    Works perfectly!

    Thank you!

    can the thumbnails be a little smaller? I've set the picture at 65% and the summary at 35% and I find that the thumbnails are very big compared to the active image. Is there a way to reduce the high of the thumb row?

    Thanks again for your time and for your support! 

  •  895
    TheFox replied

    Hello Erica,

    If you still want everything centered but smaller you can change the css to

    .woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images { float: left; width: 100%;  padding:0 5vw; }

    .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary { float: right; width: 100%; clear: none;  padding:0 5vw; }

    change 5vw to the space size you want to use

    5vw means 5% of the window width size.

    Do not hesitate to contact us if you have more questions.

    Have a nice day!

    Regards.