X-Cart forums

[acidon]

I bet 90% of x-cart owners sooner or later decide to place full product description under product picture(s)/product options area and make it use full page width instead of shy little corner on the right.

I searched forum for an easy solution, but was only able to find the tutorial for 4.2. After looking into code i realized that 4.2 solution is NOT going to work for 4.3 ....

An hour later I came up with this solution which I am more then happy to share with all of you guys :

1) Go to /customer/main/product_details.tpl and edit out next piece of code with {* *} :

<table cellspacing="0" cellpadding="0" summary="{$lng.lbl_description|escape}">
    <tr>
      <td class="descr">{$product.fulldescr|default:$product.descr}</td>
      {if $active_modules.Special_Offers}
        {include file="modules/Special_Offers/customer/product_bp_icon.tpl"}
      {/if}
      {if $product.appearance.has_market_price && $product.appearance.market_price_discount gt 0}
        <td align="right" valign="top">
          <div class="save-percent-container">
            <div class="save" id="save_percent_box">
              <span id="save_percent">{$product.appearance.market_price_discount}</span>%
            </div>
          </div>
        </td>
      {/if}
    </tr>
  </table>

2) in the same template, right after the first piece of code you just edited out, find:

<table cellspacing="0" class="product-properties" summary="{$lng.lbl_description|escape}">
    <tr>
      <td class="property-name">{$lng.lbl_sku}</td>
      <td class="property-value" id="product_code" colspan="2">{$product.productcode|escape}</td>
    </tr>
    {if $config.Appearance.show_in_stock eq "Y" && $config.General.unlimited_products ne "Y" && $product.distribution eq ""}
      <tr>
        <td class="property-name">{$lng.lbl_in_stock}</td>
        <td class="property-value product-quantity-text" colspan="2">
          {if $product.avail gt 0}
            {$lng.txt_items_available|substitute:"items":$product.avail}
          {else}
            {$lng.lbl_no_items_available}
          {/if}
        </td>
      </tr>
    {/if}
    {if $product.weight ne "0.00" || $variants ne ''}
      <tr id="product_weight_box"{if $product.weight eq '0.00'} style="display: none;"{/if}>
        <td class="property-name">{$lng.lbl_weight}</td>
        <td class="property-value" colspan="2">
          <span id="product_weight">{$product.weight|formatprice}</span> {$config.General.weight_symbol}
        </td>
      </tr>

and replace it with :

<table cellspacing="0" class="product-properties" summary="{$lng.lbl_description|escape}">
  <tr>
      <td class="property-name">{$lng.lbl_sku}</td>
      <td class="property-value" id="product_code">{$product.productcode|escape}</td><td rowspan="3" align="right" valign="top">{if $product.appearance.has_market_price && $product.appearance.market_price_discount gt 0} <div class="save-percent-container">
            <div class="save" id="save_percent_box">
              <span id="save_percent">{$product.appearance.market_price_discount}</span>%
            </div>
          </div>{/if}</td>
    </tr>
    {if $config.Appearance.show_in_stock eq "Y" && $config.General.unlimited_products ne "Y" && $product.distribution eq ""}
      <tr>
        <td class="property-name">{$lng.lbl_in_stock}</td>
        <td class="property-value product-quantity-text">
          {if $product.avail gt 0}
            {$lng.txt_items_available|substitute:"items":$product.avail}
          {else}
            {$lng.lbl_no_items_available}
          {/if}        </td>
      </tr>
    {/if}
    {if $product.weight ne "0.00" || $variants ne ''}
      <tr id="product_weight_box"{if $product.weight eq '0.00'} style="display: none;"{/if}>
        <td class="property-name">{$lng.lbl_weight}</td>
        <td class="property-value">
          <span id="product_weight">{$product.weight|formatprice}</span> {$config.General.weight_symbol}        </td>
      </tr>

3) Go to /customer/main/product.tpl and find :

<div class="details"{if $max_image_width gt 0} style="margin-left: {$max_image_width}px;"{/if}>
      {include file="customer/main/product_details.tpl"}
      {if $active_modules.Feature_Comparison ne ""}
        {include file="modules/Feature_Comparison/product_buttons.tpl"}
      {/if}
    </div>
    <div class="clearing"></div>

right after it add :

<p class="descr">{$product.fulldescr|default:$product.descr}</p>
      {if $active_modules.Special_Offers}
        {include file="modules/Special_Offers/customer/product_bp_icon.tpl"}
      {/if}

This should do it

P.S: In order to modify/adjust the product options layout after modification (if neccessary), go to /main.css and find :

table.product-properties .property-name {
width: 30px;
white-space: nowrap;
}
table.product-properties .property-value {
white-space: normal;
}

Play around with this CSS to get the desired look

[Shiftlocked]

nice work there, I think I get what you are at but do you have a before and after screenie of this?

[acidon]

Ok updated original post with screenshots

[hoosierglass]

For a long time had our hardware site set up like this. At that time we did not have many product options or variables set set it seemed like the way to diplay our wares. The only real draw back to this was categories that had dozens of prodcuts and several pages or product listings. Because of this we switched to a two column listing with no discription and a text under the image to click for more information. When we switched to this type of layout our sales increased by 20% and more in the first five months after switching to the two column layout. Personally I like the one column layout but cannot argue with the change in sales since switching to two column. I am working with 4.3 and have that set to a three column look. It will be interesting to see what kind of sales change we will see with this change.

[amy2203]

Because of this we switched to a two column listing with no discription and a text under the image to click for more information

Which page did you do this on? the category listing page, or the individual product page?

[jburba2000]

Beautiful, quick and easy mod. Looks great and like almost every other site on the Internet now.

[hoosierglass]

Originally Posted by amy2203

Which page did you do this on? the category listing page, or the individual product page?

We did this in the products.tpl, so basically the listing of the products in the categories. This is done in the admin general settings area of the back end.

[tam10]

Perfect. Thank you.
Just one question -how do hide the SKU from customer side.

[acidon]

Originally Posted by tam10

...how do hide the SKU from customer side.

In /customer/main/product_details.tpl find:

 
<td class="property-name">{$lng.lbl_sku}</td>
<td class="property-value" id="product_code">{$product.productcode|escape}</td>

and replace it with:

 
<td class="property-name">{* {$lng.lbl_sku} *}</td>
<td class="property-value" {* id="product_code" *}>{* {$product.productcode|escape} *}</td>

CODE UPDATED TO REFLECT PRODUCT VARIANTS SKUs AS WELL

[tam10]

Thanks