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.)
- Proceed to Payment / Edit button
If you open the “shopcreateorder.asp” file, you will find the code below:
ShopWriteHeader GetLang("LangCreate01") & "<br>" & GetLang("LangCreate02")
GetLang("LangCreate01") is used to display the text, “Please review the information below for accuracy.”
GetLang("LangCreate02") is used to display the text, “When you are ready to continue, click "Proceed to Payment.”
The captions are stored in the languages table. If you wish to change the text, then simply refer to VPCart 8.00 User Manual, Chapter 12.1.3. Changing Language Values.
Next, to change the look of the cart table, please follow the steps below:
1. Open the “shopcartformatdesign.asp” file using Notepad.
2. The code explained below are used to format the following:
To format the titles in the table, please locate the codes below:
sub DisplayTitle (percent, titlename)
if titlename = getlang("langproduct01") then
HtmlWrite "<th class=""menuhdr"">" & 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:
table.view_cart tr:first-child
th.menuhdr {
background: none;
}
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 black, then please update the CSS to:
table.view_cart tr:first-child th.menuhdr {
background-color:#000000;
}
Preview of the example above:
3.Save the file and upload to your site.
To format the records below the titles in the cart table, please locate the subroutines below the “shopcartformatdesign.asp” file:
sub AddField
sub AddQuantity
sub AddRemoveBox
You can edit any HTML code inside the subroutines mentioned above.
We will now try to change the look or design of the buttons in shopcreateorder.asp.
To modify the style or design of the buttons, please follow the steps below:
1. Open the “main-responsive.css” file using Notepad. The file is located in “templates/default/css.”
2. Locate the code below:
form .submitbtn { margin-bottom: 10px; }
Directly update the CSS inside form .submitbtn { } to reflect your own style. You need to be familiar with CSS in order to update this.
For more information about CSS, please refer to:
http://www.w3schools.com/Css/default.asp
For example, if you wish to change the button color to red, then please update the CSS to:
. form .submitbtn { margin-bottom: 10px;background-color:#FF0000; }
Note: The CSS class submitbtn is used globally in the site. If you change the look or design of the submit button, the other submit buttons in the site will also change.
3. Save the file and upload to the “templates/default/css” folder.
Preview of the example above:
