Tagged: , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • December 15, 2014 at 9:07 pm #368567
    pixelmad

    Hi Folks,

    This is probably beyond the scope of your support but I thought I would ask anyway :-)

    I want to style the WooComerce Single Product page so that the image takes up the top section and the details are beneath it. I can see that in the CSS there is styling for the classes of single-product-main-image, single-product-summary, summary entry-summary, woocommerce-tabs, etc but for the life of me I cannot find the PHP where the layout and positions are declared.

    Any and all help would be greatly appreciated.

    Cheers
    John

    December 16, 2014 at 12:42 am #368700
    Elliott

    Hey pixelmad!

    Add this to your custom CSS.

    .single-product-main-image { float: none !important; width: 100% !important; }

    Are you wanting to separate the sidebar?

    Regards,
    Elliott

    December 16, 2014 at 2:40 pm #368910
    pixelmad

    Thank you Elliott,

    I ended up also needing to add the following for that to work.
    .single-product-main-image alpha {float: none !important; width: 100% !important; }

    What I have now is that it ignoring the settings I have for Product Image Size (1310 x 600px) and scaling everything up to max width. So, for instance, a square image appears as 1150 square rather than 600 square. What I want is for the image to never be taller than 600px and manage the width to maintain the original aspect ratio of the image. However height: 100% !important; width: auto !important; is ignored.

    Any idea’s?

    Thanks again.

    Cheers
    John

    PS this is for display photographs, so I will have a mix of aspect ratios and cannot hard crop them.

    December 16, 2014 at 6:26 pm #369064
    Elliott

    Hey!

    In that case set the width and height to auto and then set a max-height: 600px like so.

    width: auto !important; 
height: auto !important; 
max-height: 600px !important;

    Best regards,
    Elliott

    December 18, 2014 at 12:30 am #369819
    pixelmad

    Thanks again Elliot but that also does not work. It’s just applies a hard crop, leaving the image at 100% width and 600px max height. So that square image I refer to above ends up being 1300 x 600 rather than 600 x 600 :(

    December 18, 2014 at 5:32 pm #370086
    Elliott

    Hey!

    Send us a link and take a screenshot highlighting what your trying to do so we can get a better idea.

    Regards,
    Elliott

    December 22, 2014 at 10:48 pm #371859
    pixelmad

    Thank you so much for your help Elliot. I ended up buying Visual Composer & WOO Product Page Plugins and they are doing the trick for me!

    Cheers
    John

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘WooComerce Single Product Page Styling’ is closed to new replies.