Changing product page layout

I would like to split the product description page into two sections shown here http://www.organicswithlove.com/index.php?main_page=product_info&products_id=435 I would like a very similar layout with text down the right hand side, however i would like the attributes and "buy now" section to be positioned below the image. I am fairly competent with css. I have played around with it but cant get the desired effect. Can anyone suggest a solution?

Any help greatly appreciated

Many thanks

Elliot

In /includes/templates/your_template/templates/tpl_product_info_display.php, move the code blocks for attributes and add to cart up to just below the main image block. Float them all left, and give the text a margin-left to clear them.

You may need to add a wrapper div around all the floated elements so they can be kept in a vertical column.

Ill give it a go in a mo cheers, i rly have no idea about php so i find it very difficult to edit the layout.

http://www.orcharddirect.co.uk/store/index.php?main_page=product_info&products_id=394

Lol thats wat i ended up with. Help appreciated!

You're getting close....

You missed moving the beginning of a comment tag which is why you see !--bof Attributes Module -->.

Now you need to add an HTML div around them.

Add

and just after

add

In your stylesheet, add

#productGroupWrapper {
width: 200px;
float: left;
}

Nearly there! How do i get the product title and price in the correct place?

O and btw ive decided im gna keep the add to cart section on the right hand side:P

You put the attributes block below the Product Price block, not the main image block, so the name and price are included in the float left group.

Move the product name and product price blocks to below the new </div>.

Heya, so close! When changing the position of the product name and price the attribute text wrapped the image and the swatch image moved to the center, also how can i make the text go below the "add to cart" module? Many thanks.

A bit of expansion on the comment above...

Heya, so close! When changing the position of the product name and price the attribute text wrapped the image (needs to be below the image) and the swatch image moved to the left due to the left hand container being shorter then the right hand side(how can i rectify this, i cant figure out what css to use to make it flush with the right hand), also how can i make the text go below the "add to cart" module? Many thanks.

Wow the site rly just mucked itself up, suddenly stopped reading the css file! no matter what i do cant get it fixed :S:S:S

Anyone got anymore suggestions? im so close!

Just a little more styling, I promise, to get the elements in their proper positions.

Now that the left column group is shorter than the right, you need to add explicit margins to keep the description from wrapping to the far left. You could add to your stylesheet like this:
h1#productName, h2#productPrices, #productDescription {margin-left: 200px;}

but since you have made another wrapper for them all, use that to style instead:
#productGroupWrapper2 {margin-left: 200px;}

To get the description fully below the add button, add this to your stylesheet:
#productDescription {clear: both;}

And you can take up some of the empty space by adding this:
#cartAdd {margin-top: -3em;}

The rest of the gaps are caused by some extra <br /> and <p> elements in your description HTML. Remove those and it will tighten up.

To get the attributes completely below the image, add a <br /> to the PHP/HTML code between

and

Heya, everything is working apart from the break between the attributes and the main image, when putting the <br/> tag in the php between the 2 modules it only moves the text down one line and still wraps the image, secondly how can i make the description text move up a bit, there is to much space between that and the add to cart, other then that it is fantastic. Thanks very much!

For the attributes, add this to your stylesheet:

#productAttributes {clear: both;}

For the description, adding

#productDescription {padding-top: 0;}

will help a bit, but for some reason I have not been able to figure out, elements in the main or right column seem to hang up on clearBoth elements in the left column, even though they ought to be compartmentalized by the wrapper divs. I would like to know how to solve this myself.

cheers m8, got everything apart from the text, i cant for the life of my figure out why there is such a large gap! odd eh? If you have any ideas please let me know. Ill carry on trying to sort it as well. Thanks!

I tried making a new rapper so currently i have:

wrapper 1 = main image, attributes
wrapper 2 = product price, add to cart
wrapper 3 = product description

This still doesn't work due to the 3rd wrapper still starting at the top of the page, not underneath the 2nd wrapper.

:huh:

Lol any ideas?

Another question on top! I cant get the product price in the same wrapper as the add to cart module even though i have stored them both in wrapper 3, they are still contained in their own wrappers.

Cheers

suggestions? ive tried all i can, cant get the text to move and i cant get the prod price and add to cart working as one wrapper!

I don't know if this has any bearing on the difficulties, but you have some bad HTML in your description - two <p> tags that are not closed. They should really not be there at all, as they do not do anything but make more space. Also, the <br> at the beginning is doing nothing good for you.
From view source:

Your wrapper3 encloses only the description and details, and does not do anything helpful. I would say to move the beginning of that up to above the name div. How do you want the price and add button to behave as a unit? I can't advise without understanding that.