osCommerce v2.3.3 Tutorials | osCommerce eBook Store | osCommerce Tutorials | osCommerce Home

osCommerce v2.3.3 Product Info Sub-page Customization

This osCommerce Product InfoInfo sub-page customization is extracted from a section of one of our osc eBook. It shows how to customize the design of the default layout of osc Product Info Sub-page. Some images may be a bit vague due to resizing to fit the width of webpage.

File required to customize:

catalog/product_info.php

Okay! Let's see how to customize the osCommerce Product Info Page.

Click on any product goes to the Product Info page.

Oh! Why the Right Column appear?

osc product info page customization

Some store owners trying to remove the Right column by modifying the codes but fail. Actually, this is really easy to solve the problem.

1. Login your osCommerce admin control panel.

2. Navigate to Modules -> Boxes.

The following screen appears:

osc product info page customization

The "Product Notifications" and "Product Social Bookmarks" modules are still enabled and the Content Placements are loaded into the Right Column by default.

3. Simply disabled the two boxes modules.

4. Refresh browser to see the results. The Right Column is gone!

osc product info page customization

The web layout and design of Product Information is a bit strange. Let’s customize it a little.

As mentioned before that the bottom border line of the <H1> tag is just for illustration only. You can now remove it.

5. Open stylesheet.css with a text editor, and navigate to line 114 -121.

6. Comment the border-bottom and padding-left properties of <h1> tag.

h1 {
font-size: 16px;
margin-bottom: 0;
padding-bottom: 10px;
color: #333;
/*padding-left:10px;*/
/*border-bottom: 2px solid #666;*/

}

7. Refresh browser to see the changes.

The bottom border line has been removed. This provides more room for customization.

osc product info page customization

Let's rearrange the layout of the contents of Product Information.

8. Open catalog/product_info.php file with a text editor.

9. Navigate to 61 – 70.

osc product info page customization

The product price on the right is generated by line 62.
The product name on the left is generated by line 63.

10. Let’s rearrange the layout.


- Move the Div of product price and product name to the position as shown below.
- Move product price below product name.
- Add some styles to the div.
- Add some styles to product name and product price.

The codes are shown as below:

osc product info page customization

11. Refresh browser to see the changes. It looks much better than the default design.

osc product info page customization

Hm... The Add to Cart button is too close to the right side. Let’s move it a bit from the right.

osc product info page customization

12. Navigate to about line 199 of product_info.php file.

13. Find the following line:

<div class="buttonSet">

The Reviews and Add to cart buttons are contained inside this div layer.

14. Apply a style attribute to this div layer.

<div class="buttonSet" style="padding-right:10px;">

15. Refresh browser to see the changes. It looks very good!

osc product info page customization

Remove the Review button if not required.

This is the end of osCommerce Product Info page customization.