Results 1 to 10 of 35

Hybrid View

  1. #1
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    203
    Plugin Contributions
    0

    Default Changing product page layout

    I would like to split the product description page into two sections shown here http://www.organicswithlove.com/inde...roducts_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

  2. #2
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Changing product page layout

    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.

  3. #3
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    203
    Plugin Contributions
    0

    Default Re: Changing product page layout

    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.

  4. #4
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    203
    Plugin Contributions
    0

    Default Re: Changing product page layout

    http://www.orcharddirect.co.uk/store...roducts_id=394

    Lol thats wat i ended up with. Help appreciated!

  5. #5
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Changing product page layout

    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
    <div id="productGroupWrapper">
    just above
    <!--bof Main Product Image -->
    <div id="productMainImage" class="centeredContent back">

    and just after
    <!--eof Attributes Module -->
    add
    </div>

    In your stylesheet, add

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

  6. #6
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    203
    Plugin Contributions
    0

    Default Re: Changing product page layout

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

 

 

Similar Threads

  1. v150 Changing the layout of my product information page
    By OLCS in forum Templates, Stylesheets, Page Layout
    Replies: 9
    Last Post: 28 Jun 2012, 08:48 PM
  2. Changing layout of product page-How?
    By QuickInks in forum Templates, Stylesheets, Page Layout
    Replies: 6
    Last Post: 7 Feb 2009, 10:06 PM
  3. Problems changing layout of "add to shopping cart" box on product listing page
    By crashley1784 in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 13 May 2008, 07:29 PM
  4. Changing Layout of Product Page
    By cvkweb in forum Templates, Stylesheets, Page Layout
    Replies: 21
    Last Post: 24 Dec 2006, 05:06 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg