How to rearrange the product info page
Example: I want to move the Add to Cart box to another place on my product page
- You have a page you want to change the structure of.
- Open the page in your browser.
- Choose View Source from your browser menu.
- Scroll down to the section you’re bothered about moving. In the case of the add-to-cart button, you’ll see this:
- You need to locate the section that starts with and ends with these tags:
<!--bof Add to Cart Box --> <div id="cartAdd"> Add to Cart: <input type="text" name="cart_quantity" value="1" maxlength="6" size="4" /><br /><br /><input type="hidden" name="products_id" value="1" /><input type="image" src="includes/templates/template_default/buttons/english/button_in_cart.gif" alt="Add to Cart" title=" Add to Cart " /> </div> <!--eof Add to Cart Box-->
<!-- bof Add to Cart Box --> (‘bof’ is an abbreviation for “beginning of file”) and corresponding end tag:
<!-- eof Add to Cart Box-->.
- Simply relocate that section up or down in the file to the place where you want it to appear:
Go find those same tags in the template file (if you search using the Developers Toolkit, you’ll find that it’s
tpl_product_info_display.php) and move that entire section up or down in the file as you desire, noting to NOT put anything between any other existing
For example, instead of this:
<bof product description> <eof product description> <bof add to cart> <eof add to cart>
maybe you want something like this:
<bof add to cart> <eof add to cart> <bof product description> <eof product description>
Do similarly with other sections as desired.
Then use any necessary CSS alterations to style things as needed.
See also this related FAQ: How do I determine which files to edit.