X-Cart forums - Product Page Design Layout

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Product Page Design Layout (https://forum.x-cart.com/showthread.php?t=41475)

Product Page Design Layout

Hi,
Wondering if anyone could help me out - I don't know much beyond HTML, so I'm struggling with how to get this to work:

I'd like the "buy now" button to be on the same line as the Product Title. Can't seem to find the right code to change this. Does anyone have any suggestions?

This is the code I'm using (from customer/main/products.tpl)

Quote:

<td class="prod_desc">
<a href="product.php?productid={$products[product].productid}&cat={$cat}&page={$navigation_p age}{if $featured eq 'Y'}&featured{/if}"><font class="ProductTitle">{$products[product].product}</font></a>
{if $products[product].product_type eq "C"}
{include file="buttons/details.tpl" href="product.php?productid=`$products[product].productid`&cat=`$cat`&page=`$navigation_p age`"}
{else}
<div id="buy"><a href="product.php?productid={$products[product].productid}&cat={$cat}&page={$navigation_page}{if $featured eq 'Y'}&featured{/if}"><img src="{$ImagesDir}/buy_now.gif" width="64" height="20" alt="Buy Now"></a></div>

{if $config.Appearance.display_productcode_in_list eq "Y" and $products[product].productcode ne ""}
<br />
{$lng.lbl_sku}: {$products[product].productcode}
{/if}
<br />
<br />
{$products[product].descr|truncate:300:"...":true}
<br />

Thanks very much!

Re: Product Page Design Layout

This may or may not work depending on your css settings:

Code:

<td class="prod_desc">

{if $products[product].product_type eq "C"}

<a href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;page={$navigation_p age}{if $featured eq 'Y'}&amp;featured{/if}"><font class="ProductTitle">{$products[product].product}</font></a> {include file="buttons/details.tpl" href="product.php?productid=`$products[product].productid`&amp;cat=`$cat`&amp;page=`$navigation_p age`"}

{else}

<div id="buy"><a href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;page={$navigation_p age}{if $featured eq 'Y'}&amp;featured{/if}"><font class="ProductTitle">{$products[product].product}</font></a> <a href="product.php?productid={$products[product].productid}&cat={$cat}&page={$navigation_page}{if $featured eq 'Y'}&featured{/if}"><img src="{$ImagesDir}/buy_now.gif" width="64" height="20" alt="Buy Now"></a></div>

{if $config.Appearance.display_productcode_in_list eq "Y" and $products[product].productcode ne ""}

<br />

{$lng.lbl_sku}: {$products[product].productcode}

{/if}

<br />

<br />

{$products[product].descr|truncate:300:"...":true}

<br />

Re: Product Page Design Layout

Hi,
Thanks for the advice - with your pointing me in the right direction I was able to get it looking like this:

http://www.highmowingseeds.com/imgs/beans.jpg

One more thing - any clue on how I can get the Product Title to be Left justified instead of right? For some the justification changed when I changed the code with the one that was suggested. Thanks so much!

Re: Product Page Design Layout

Try adding this to your 'buy' class:

Code:

text-align: left;