Home | Store | osCommerce Tutorials

osCommerce Quick Find Box Customization (2)

Part 2 : Move the osCommerce Quick Find search field and search button in Header

Many osCommerce shop owners like to put the search field and search button in the header. Let's see how to do it.

1. Open the includes/header.php file.

2. Remove the three icons codes and replace with the following codes highlight in blue color as shown below:

osCommerce includes/header.php

<tr class="header">
<td valign="middle"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' .
tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?></td>
<td align="right" valign="bottom"><?php require(DIR_WS_BOXES . 'search.php'); ?></td>

osCommerce includes/boxes/search.php

1. Remove the <tr><td> at the top and the </td></tr> at the top. This allows us to locate the search field and search button much easier.

2. Remove or comment the three lines of codes to display the Quick Find Header:

//$info_box_contents = array();
//$info_box_contents[] = array('text' => BOX_HEADING_SEARCH);

//new infoBoxHeading($info_box_contents, false, false);

3. Set a width to the table that holds the search field and search button. This is much easier to control the layout.


$info_box_contents = array();
$info_box_contents[] = array('form' => tep_draw_form('quick_find',
'NONSSL', false), 'get'),
'align' => 'center',
'text1' => tep_draw_input_field('keywords', '', 'size="10"
maxlength="30" style="width: ' . (BOX_WIDTH-80) . 'px"'),
'text2' => tep_hide_session_id(),
'text3' => tep_image_submit('button_search_1.gif',


echo $info_box_contents [0]["form"] . "\n";
echo $info_box_contents [0]["text2"] . "\n";
echo "<table width=\"100%\" border=\"0\" cellpadding=\"2\">" . "\n";
echo "<tr><td>" . $info_box_contents [0]["text1"] . "</td><td>" . $info_box_contents [0]["text3"] .
"</td></tr>" . "\n";
echo "</table>" . "\n";
echo "</form>" . "\n";


//No need to call the class to display the search items
//new infoBox($info_box_contents);


osCommerce file structure example codessearch-customization-example-2.php, header-customization-example-2.php

The result is:

osCommerce Quick Find button

Test the osCommerce Quick Find Box

Let's do some searches to check if the codes are working fine.

Search Term: mouse

The searched result is:

osCommerce Quick Find button

Search Term: keyboard

The searched result is:

osCommerce Quick Find button

Once we know the code structure, we can move the search field and search button to any location of osCommerce webpage.

This is the end of osCommerce Quick Find customization tutorial.