Changes to the Checkout page

[grpcom]

Hi everyone,

Checking the WHMCS checkout page I want to make two very important adjustments. Please help.

SETTINGS 1:
I want to know how I can change the order of the following fields in the "Billing Address" panel.
It is currently shown first:
(1.City) (2. Province) (3. Postal Code)
Below is the field: ("Country")
screenshot:
https://gyazo.com/f54d3e625739f75eb42804954254b953

I want to change the order of these fields.
I want to show the field first: ("Country")
Below show the fields: (1.City) (2. Province) (3. Postal Code)

SETTINGS 2:

I see some fields on this Checkout page that I want to hide:

The fields I want to hide are:
(Company name)
(Address 2)
(Province)
(Postal Code)

How can I achieve it?

please say the path where the files that I must edit are and also say the step by step. I am new to WHMCS.

Thanks in advance!

[brian!]

19 hours ago, grpcom said:

How can I achieve it?

by editing the checkout.tpl file in /templates/orderforms/standard_cart/checkout.tpl (assuming you're using standard cart).

19 hours ago, grpcom said:

please say the path where the files that I must edit are and also say the step by step. I am new to WHMCS.

what you want to do is easy, but settings 1 & 2 contradict each other... e.g. in 1, you want to show certain fields; in 2, you don't.

so for 1, you just need to move the block of code that shows the countries...

                        <div class="col-sm-12">
                            <div class="form-group prepend-icon">
                                <label for="inputCountry" class="field-icon" id="inputCountryIcon">
                                    <i class="fas fa-globe"></i>
                                </label>
                                <select name="country" id="inputCountry" class="field"{if $loggedin} disabled="disabled"{/if}>
                                    {foreach $countries as $countrycode => $countrylabel}
                                        <option value="{$countrycode}"{if (!$country && $countrycode == $defaultcountry) || $countrycode eq $country} selected{/if}>
                                            {$countrylabel}
                                        </option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>

to above the line that shows the city..

                            <div class="form-group prepend-icon">
                                <label for="inputCity" class="field-icon">
                                    <i class="far fa-building"></i>
                                </label>
                                <input type="text" name="city" id="inputCity" class="field" placeholder="{$LANG.orderForm.city}" value="{$clientsdetails.city}"{if $loggedin} readonly="readonly"{/if}>
                            </div>
                        </div>

for the second, that just needs you to remove the specific div blocks that you refer to from the template... e.g to remove company name, you would just delete..

                        <div class="col-sm-12">
                            <div class="form-group prepend-icon">
                                <label for="inputCompanyName" class="field-icon">
                                    <i class="fas fa-building"></i>
                                </label>
                                <input type="text" name="companyname" id="inputCompanyName" class="field" placeholder="{$LANG.orderForm.companyName} ({$LANG.orderForm.optional})" value="{$clientsdetails.companyname}"{if $loggedin} readonly="readonly"{/if}>
                            </div>
                        </div>

and so on...

but there are 3 things to bear in mind if you want to do this...

1. if you're registering domains, then WHMCS might try to use these details during the order process - if they're missing, then you may get errors and the registration may not complete automatically.
2. remember to go to setup -> general settings -> others -> Optional Client Profile Fields and make any fields that you want to remove optional - otherwise, the client will get errors and checkout will not complete.
3. if you edit the template in this way, then you will need to repeat these changes after each WHMCS update.

 

[dstelles]

@brian!

How can i do it for custom fields? 

I did some changes and on front end, works good, but when a registered client tries to buy a new product the informations doesn't appear as we can see here (https://prnt.sc/tj2wih) .

And all these infos are fullfilled like these screenshot: https://prnt.sc/tj2yym 

These are the codes that i've used to do the change:

 <!-- FIELD Numero. -->        
                         <div class="col-sm-2">
                            <div class="form-group prepend-icon">
                             <label for="" class="field-icon">
                                 <i class="fas fa-map-marker-alt"></i>
                            </label>
                                <div class="control">
                                <input type="text" name="customfield[34]" id="customfield34" class="field form-control" value="" size="30" 												placeholder="n.º"{if $loggedin} readonly="readonly"{/if}>
                                        </div>
                                    </div>
                                </div>


 <!-- FIELD BAIRRO. -->        
                        <div class="col-sm-6">
                        <div class="form-group prepend-icon">
                         <label for="" class="field-icon">
                            <i class="fas fa-map-marker-alt"></i>
                            </label>
                                <div class="control">
                                    <input type="text" name="customfield[141]" id="customfield141" class="field form-control" value="" size="30" 											placeholder="Bairro"{if $loggedin} readonly="readonly"{/if}>
                                    </div>
                                </div>
                            </div>