Modify the Look of Customer Information Content

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

- The text “If shipping to a location other than your customer address…”

- 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 the text “If shipping to a location other than your customer address…”, please follow the steps below:

1. Open the “shopcustomerform.asp” file using Notepad.

2. Locate the code below:

HtmlWrite "<span class=""desktop-view""><p class=""ac"">" & "<span class=""largeinfofont"">"

ShopWriteHeader ""& GetLang("langShip02") & ""

HtmlWrite "</span>" & "</p></span>"

If you have HTML/CSS knowledge, you can modify the styling for the code.

For example, you want to format it so that the text will display in bigger font and also with underline, then please modify it to:

HtmlWrite "<span class=""desktop-view"" style=""font-size:20px;text-decoration: underline;""><p class=""ac"">" & "<span class=""largeinfofont"">"

ShopWriteHeader ""& GetLang("langShip02") & ""

HtmlWrite "</span>" & "</p></span>"

Preview of the example above:

In the above code, you will find this 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 User Manual link below:
https://helpnotes.vpcart.com/userguide900/#!Documents/changinglanguagevalues.htm

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)

HtmlWrite "<div class=""std_table std_table_customer ar pull-right"">"

ShopButton GetConfig("xbuttoncontinue"),trim(GetLang("langCommonContinue")),""

HtmlWrite "</div>"

HtmlWrite "<div class=""row""></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 code.

3. 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)

HtmlWrite "<div class=""std_table std_table_customer ar pull-right"">Press the Continue button in the right to move to next step"

ShopButton GetConfig("xbuttoncontinue"),trim(GetLang("langCommonContinue")),""

HtmlWrite "</div>"

HtmlWrite "<div class=""row""></div>"

end sub

Preview of the example above:

4. Next, in the subroutine above, you can also find the code below:

ShopButton GetConfig("xbuttoncontinue"),trim(GetLang("langCommonContinue")),""

GetLang("langCommonContinue") is used to display the text “Continue”

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 green, 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: