This section will explain how to change the look of the following sections:
- Text at the top (e.g. If shipping to a location other than your customer address, etc.)
- Continue button
- Title styling (e.g. Customer Information, Shipping Information, Order Comments and Special Requests, Enter your gift certificate here, Enter your coupon name to receive a discount header)
- The fields styling (e.g. first name, last name, etc.)
To change how the text will look at the top (e.g. the text “If shipping to a location other than your customer address, etc.”), please follow the steps below:
1. Open the “shopcustomerdesign.asp” file using Notepad.
2. Locate the codes below:
sub AddInformationTable
This subroutine is used to display any additional information at the top of the shopcustomer.asp page.
If you have HTML/CSS knowledge, you can modify the styling for the codes.
For example, you can add your own style in the existing code below:
HtmlWrite "<span class=""desktop-view""><p class=""ac"">" & "<span class=""largeinfofont"">"
If, for example, you want to format it so that the text will display in bigger fonts, then please modify it to:
HtmlWrite "<span
class=""desktop-view"" style=""font-size:16px;""><p class=""ac"">"
& "<span class=""largeinfofont"">"
Preview of the example above:
Next, in the AddInformationTable subroutine, you can also find the code below:
ShopWriteHeader ""& GetLang("langShip02") & ""
GetLang("langShip02") is used to display the text, “If shipping to a location other than your customer address, please fill in all fields”
The caption is 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.
We will now try to change the look of the button in
the shopcustomer.asp page.
1. Open the “shopcustomerdesign.asp” file using Notepad.
2. Locate the code below:
sub AddSubmitButton (passtype)
dim viewstring
select case lcase(passtype)
case "d"
viewstring = "desktop-view"
case "m"
viewstring = "mobile-view"
end select
HtmlWrite "<div class=""std_table std_table_customer ar "& viewstring &""">"
ShopButton GetConfig("xbuttoncontinue"),trim(GetLang("langCommonContinue")),""
HtmlWrite "</div>"
end sub
This subroutine is used to display the Continue button in the shopcustomer.asp page.
If you have knowledge in HTML/CSS, you can modify the styling for the codes.
For example, if you wish to display additional text (e.g “Press the Continue button in the right to move to next step”) in the Continue button, then please modify the code to:
sub AddSubmitButton (passtype)
dim viewstring
select case lcase(passtype)
case "d"
viewstring = "desktop-view"
case "m"
viewstring = "mobile-view"
end select
HtmlWrite "<div class=""std_table std_table_customer ar "& viewstring &""">Press the Continue button in the right to move to next step"
ShopButton GetConfig("xbuttoncontinue"),trim(GetLang("langCommonContinue")),""
HtmlWrite "</div>"
end sub
Preview of the example above:
Next, in the AddSubmitButton subroutine, you can also find the code below:
ShopButton GetConfig("xbuttoncontinue"),trim(GetLang("langCommonContinue")),""
GetLang("langCommonContinue") is used to display the text “Continue”
The caption is 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.
We will now try to change the look of the titles (e.g. Customer Information, Shipping Information, Order Comments and Special Requests, Enter your gift certificate here, Enter your coupon name to receive a discount).
To change the look of the header text above, please follow the steps below:
1. Open the “main-responsive.css” file using Notepad. The file is located in the “templates/default/css.”
2. Locate the code below:
.comment_title { margin: 10px 0px; text-transform: Uppercase }
Directly update the CSS inside the .comment_title { } 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 font color to red, then please update the CSS to:
.comment_title { margin: 10px 0px; text-transform: Uppercase; color:#FF0000; }
3. Save the file and upload to the “templates/default/css” folder.
Preview of the example above:
