Help moving DIV in WooCommerce layout

I have a WooCommerce site where I would like a different content layout and hoping it’s a CSS fix.
I would like the Short description with product name, price variations, Add to Cart Div to move up to the right of the product image. Leave the Full Product Description DIV full width below.

Is this possible?

I’ve tried the following

.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: 50%;

But that moved the entire DIV. Do I need to separate by creating new DIVs and modify the theme?

Thanks so much in advance.

Have you tried the flex-box attribute with css.

Try taking a look at this. It should help.

You need to use Flexbox.

are you trying to figure out how to wrap the html or trying to figure out what flex to use.

I’m not familiar with Flex containers but I will take a look. Thanks so much.

1 Like

Let me know if you got it to work.

You need to split that div so that the h1 thru form is in it’s own div and the rest is in another div at its original width. That handles the layout, but now you must change the WooCommerce theme to render it that way in PHP.

As said the correct way is to first restructure the HTML. Technically you can do it with just CSS but it will be very hacky.

Thanks for sharing mate. I really appreciate it.