I am trying to: have the single product page layout to resize the product image (like the youtube video "Creating WooCommerce Product Templates With Toolset" from a month ago). I would also like the "Price:" and amount to be on the same line.
Link to a page where the issue can be seen: hidden link
I expected to see: the product image taking up half the screen size and price with amount on the same line
Instead, I got: a small product image that doesn't resize even when choosing different options and adding this to the layout css
.woocommerce.content-full-width div.product div.images {
width: 100%
}
Hi, yes the most recent release of WooCommerce changed the structure of this markup, so the required CSS to override their settings should be modified as follows:
.woocommerce-page div.product .ddl-full-width-row div.images {
width: 100%
}
That should resolve the image width problem and allow you to resize the main product image to fill the available horizontal space.
To adjust the line breaks in the price area, you may need to switch to the HTML panel in the Visual Editor cell to get this type of granular control over the markup. Since you have automatic paragraphs enabled, the editor is surrounding the "Price" text in a paragraph, and the number is surrounded in a paragraph by default in the wpv-woo-product-price shortcode. You need to remove the paragraph wrapper around the "Price" text, or set its style attribute to display inline by adjusting the code:
...
<p style="display: inline;">Price:</p>
[wpv-woo-product-price]
...
Then you'll need to add CSS that forces the number paragraph to be displayed inline in Layouts CSS:
.woocommerce-page div.product .price {
display: inline;
}
Let me know if this doesn't provide the solution you were expecting and I can take a closer look.
Ok I got the price to stay inline and the Image to full width... but the image is resizing and cropping. I would like it to reisze to fit the space but not crop.
The WooCommerce gallery is designed to work best with square images (for example 1000px x 1000px) rather than rectangular images, which are wider or taller than square. If you don't want rectangular images cropped, this means you'll end up with portrait-orientation images showing white margins on the left and right sides, and landscape-orientation images showing white margins on the top and bottom, in order to display the entire image inside a square container. If that's what you're looking for, then the best approach here is to upload product images in square dimensions, including the white margins in the images.
If you're looking for something different, please explain in a bit more detail, or show me a URL where I can see something similar.
Ok. I'll just use square images. Thanks!
