Adding padding / change layout of Product Image & Zoomed Image

  • Hi,

    Trying to adjust the height of the product image in the store. Have searched a bit and tried finding how to do witht he theme etc itself or adding code to additional CSS but nothing has worked.

    Basically trying to lower the block with the Product Image and thumbnails below it, so the top of the product image is in line with the top of the price. At the mmoent it is sitting right under the title.

    Also when you click on it to zoom out, it sits partially under the header / menu bar. would like it to either be lowered, or preferably I think over the top of the menu bar so it’s easily recognisable that it is an expanded image. If that makes sense…

    Thank you in advance.

    The page I need help with: [log in to see the link]

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

  • Try something like:

    .woocommerce-page div.product div.image {padding-top:15px;}

    Thread Starter fraidie

    (@fraidie)

    Thank you. Just tried adding it into the Additional CSS and didn’t work. Is that where it’s meant to go?

    • This reply was modified 4 years, 4 months ago by fraidie.

    Yes, Additional CSS.

    OK, worked for me using Chrome, but try this instead:

    img.attachment-shop_single.size-shop_single.wp-post-image {padding-top:15px;}

    • This reply was modified 4 years, 4 months ago by seank123.
    Thread Starter fraidie

    (@fraidie)

    Perfect!! Thankyou so much. Really appreciate it.

    I just noticed that dor some reason the sidebar / widget ont he right has dropped. Now trying to work that one out. Neverending little fixes ?? Thinking some updates tonight in the back end have stuffed some things up…

    Thank you again. So awesome.

    No problem!

    Looks like the widths of the main content area or sidebar may need tweaking – had a quick go but couldn’t see anything obvious.

    Thread Starter fraidie

    (@fraidie)

    Thank you. Been looking thorugh for it. It’s only on the single product page it’s doing it. So something has happened when I have added a plug in for the images. Trying to fgure it out. Hoping I can just alter the main area for the isngle product page and drop it a few % so that it works. Nothing has so far though. Thank you again.

    Try:

    #primary {width:70%;}
    #content {width:90%;}

    • This reply was modified 4 years, 4 months ago by seank123.
    • This reply was modified 4 years, 4 months ago by seank123.
    Thread Starter fraidie

    (@fraidie)

    Seems my last reply didn’t go through.

    Anyway, I tried it but didn’t work unfortunately. Cheers.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Adding padding / change layout of Product Image & Zoomed Image’ is closed to new replies.