Modify the Look of Order Details

This section will explain how to change the look or design of the following sections:

-    Cart table

-    Records below the titles in the cart table (e.g. first name, last name, etc.)

 

 

To change the look/design of the cart table, please follow the steps below:

 

1.   Open the shopcartformatdesign.asp file using Notepad.

 

2.   The code explained below is used to format the following:

 

To format the titles in the table, please locate the code below:

 

sub DisplayTitle (percent, titlename)

      if titlename = getlang("langproduct01") then

               HtmlWrite "<th class=""menuhdr"" colspan="""& percent &""">" & TitleName & "</th>"

      else

              HtmlWrite "<th style=""text-align: center"">" & TitleName & "</th>"

      end if

end sub

Note: CSS  menuhdr is stored in the main-responsive.css file, which is located in the “templates/default” folder:


.menuhdr { text-align: right; }

 

You can update the CSS code above to suit your own style or preference.

For example, if you wish to change the background color of the table title to green and text color of  the title to black, then please update the CSS to:

 

            .menuhdr { text-align: right;background-color:#009900;color:#000; }

 

Preview of the example above:

           
           

 

To format the records below the titles in the table, please locate the sub routine below in the shopformatorder.asp” file:

 

sub AddField (percent, alignment, fieldvalue)

%>

<td class="item_row" width="<%=percent%>" style="text align:<%=alignment%>"><%=fieldvalue%></td>

<%

end sub

 

You can edit any HTML code inside the sub routine mentioned above.

For example, you want to display the ordered items background with blue color and text to white, you can modify above to:

sub AddField (percent, alignment, fieldvalue)

%>

<td class="item_row" width="<%=percent%>" style="text-align:<%=alignment%>;background-color:#36C;color:#FFF;"><%=fieldvalue%></td>

<%

end sub

 

Preview of the example above: