Moving the attributes on the product info page

[Qwert302]

I am looking to move the attributes further up the page on my product info as demonstrated in this picture.



It's not as simple as moving the code around in /tpl_product_info_display.php. I've got to use some sort of code to make it move it right up below the product description.

I've removed the "manufactured by" display and now the attributes move up next to the add to cart, but I'm not happy with how it looks. Here is the url

http://www.racquetballgearonline.com...products_id=41

I think I would have to adjust some CSS but I'm not smart enough to figure it out myself.

Thanks.

[gjh42]

It's not quite as simple as moving code in tpl_product_info_display.php, but you can't accomplish what you want until you do move the code.

What is holding the attributes below the image is the <br class="clearBoth" /> after the description.
In your tpl_product_info_display.php, find this

<!--eof Product description -->
<br class="clearBoth" />

<!--bof Add to Cart Box --> 

and delete the class="clearBoth".
Then move the <!--bof Attributes Module --> code block up to get this:

<!--eof Product description -->
<br />
<!--bof Attributes Module -->
...
<!--eof Attributes Module -->
<!--bof Add to Cart Box --> 

You will probably have to remove some class="clearBoth" from lines in
/includes/templates/your_template/templates/tpl_modules_attributes.php so that lower lines of the attributes will also come up under the description.

[Qwert302]

Thanks! I'm learning more all the time. I was actually pretty sure that's what I needed to do, but was scared to implement it without consulting the masters.

Thanks again!

[Qwert302]

Now, how would I go about centering the add to cart button under the image? I'm moving it around and using different breaks and I can't get it to go where I want. I'll probably have to CSS it, right?

Thanks for all the help you have provided.

[gjh42]

To get the add button below the image, you need to make it clear right-floated elements (the image).

#cartAdd {clear: right; margin-right: 4em;}

[Qwert302]

Thanks again.

I just realized that my tinkering screwed everything up when viewed in IE. I had a bunch of overlaps etc.

I'm going to have to spend some more time with this and play with it until I get IE to behave.

Are there any other commands I should be using besides moving stuff around and adding breaks?