Help moving DIV in WooCommerce layout

HTML-CSS
1

I have a WooCommerce site where I would like a different content layout and hoping it’s a CSS fix. https://rentals.seamlessshow.com/product/nec-90-hd-led/
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.

06
061079×904 177 KB

2

Have you tried the flex-box attribute with css.

3

Try taking a look at this. It should help.

4

You need to use Flexbox.

5

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

6

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

1 Like
7

Let me know if you got it to work.

8

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.

WooCommerceLayoutMod
WooCommerceLayoutMod1608×968 277 KB

9

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.

10

Thanks for sharing mate. I really appreciate it.