The Prestashop One page checkout - for Prestashop version 1.7

[Question] How to add new fields to checkout?

Customers often ask me how to add new fields, e.g. for Italian customers, these are fields related to electronic email - Fiscal Code, SDI code, PEC Email. Typically, customer reach to me to find out how to add new fields into Prestashop structures.

But is that really necessary?

When changing Prestashop core structure, or adding new fields through module and separate tables, customers often undergo a risk of lock-in, it's either Prestashop update lock-in, or third party "field" module lock-in.

With development of modules, I always try to be as transparent as possible, avoiding core changes whenever possible, and so I suggest to customers, whenever possible, use default Prestashop fields, simply by renaming them.

Often, there are fields customers do not use and can give them new purpose - e.g. 'other', 'address2', or second phone number.

So before reaching to core modification or third party module, why not try simply re-using some of existing, unused fields, simply by going to Prestashop translations and change their name?

If this is not an option, and you already have new fields implemented in PS core and just need to get them into checkout, this is possible, but it's necessary to update fields structure.

Go to modules/thecheckout/classes/Config.php, and there locate:

public $invoice_fields = array(
"firstname" => array("visible" => true, "required" => true, "width" => 50, "live" => false),
...

And add your new fields there.

After that, go to module configuration, and hit 'reset' on Invoice address section - new fields shall appear there.

[Question] Layout of module is messed up, why?

If checkboxes are not styled properly, or fields are mis-aligned, or there are unnatural spaces here and there, or text covering fields, that's probably due to theme styling conflict - it happens if theme styling is "too aggressive", forcing certain styles to certain elements.

This can be resolved only by (any) developer intervention, and can be solved either by theme developer, by making style overrides for checkout module, or disabling their (strong typed) styles for checkout, or it can be solved by checkout module developer, or actually any other CSS developer, who can write CSS rules.

[Question] How can I change module layout and styles?

Layout - can be changed using layout designer - in 'Checkout blocks layout' section. It's very powerful and intuitive, check it out please, I'm sure it will answer your layout / positioning questions. You can set further details by expanding 'Edit blocks classes - Click to expand'

Styling - there are 3 pre-defined styles available in checkout module configuration, and few fonts and few font-weight to choose from. That's basic styling, which you can customize further, using custom CSS (see below)

Custom CSS - there's input box in checkout module configuration, at the bottom, where you can simply type-in your custom CSS code. This if suitable if you have only few styles to add or change. For more elaborate styling tasks, please create new file, that would even survive module update - you can create file modules/thecheckout/views/css/theme-custom.css and place all your CSS overrides there.

Important notice when changing CSS - please disable CCC in Backoffice / Advanced Parameters / Performance, so that changed CSS loads every time when testing. In web browser, reload page with Ctrl-F5, which will force cache reload.

[Question] I see blank page, or pop-up error, when visiting checkout page.

Probably there's some underlying issue, that's covered under Internal Server Error (code: 500). We have dedicated article about Internal server error, causes and solution here.

[Question] Payment module is not visible or it doesn't work at all.

This can be tricky, there are 2 typical causes. First one is easy - payment module is not configured well for current environment, e.g. it works only with EUR and shop has USD currency, or it works with certain countries only. You can simply test this by disabling checkout module and checking if payment module works well in default Prestashop checkout.

If it does, issue will be in integration into checkout module. Payment options have some typical (on agreement) behavior, which is handled well by all third party checkout modules. BUT, some payment methods use special scripting, that works only under specific conditions, for example, they expect full page reload to load control scripts - which in One page checkout context never happens (and it shall not, it's ONE PAGE checkout after all).

So here we need to integrate this payment method, this can be done on both sides - so either payment module developer makes changes, so that their payment method works with particular checkout module, OR (but this is generally more complicated), checkout module developer makes changes, de-codes logic of payment methods and finds a way to load proper control scripts by other means.

To recap - options are contacting payment method vendor (that's always helpful, because they also need to see what people are using and then their willing to make updates), and if there's no response from their side, please contact me.

[Question] When I click confirmation button, nothing happens.

This can be caused by number of reasons, typically there's some Javascript error, which breaks whole confirmation procedure.

First aid is to open developer tools console and look for error messages; sometimes, nothing is visible, but sometimes, you will see e.g. that Social login module has wrong access codes, or that payment method has wrong API credentials - which can guide you to solution.

However, if no apparent error is visible, AND, Prestashop default checkout works well, please contact me for further debugging.

[Question] How to make postcode or dni fields required - it says 'managed automatically'

These fields depend on selected country, so we don't set them required or not fixed, but we read it from configuration of countries - that is in Backoffice / International / Locations / Countries, and there edit country and choose whether postcode or dni shall be required for that particular country.

[Question] How can I change text (on labels, payment methods, shipping, ...)

The Checkout module is fully localized, that means every text can be modified using Prestashop translations (in Backoffice / International / Translations).

There are multiple places from which translations are pulled from. Most of the translations are taken from Prestashop core and Prestashop theme - this is because lot of labels used on checkout already existed in Prestashop, and probably are already translated, so it's not necessary to do it again and we can re-use it.

For shipping methods - all the information are pulled from shipping methods configuration.

For payment methods - it's same, all the information comes from payment methods themselves, so to translate those labels, translate in payment method. This applies also for logos - checkout module pulls out automatically payment method logo, so if you want to modify it, please do so in payment method and this change would appear in checkout module also.

Also keep in mind that some translations exist in PS core AND also your selected theme. Theme translations takes priority, so make sure to check both places

[Question] GDPR and other privacy checkboxes are ignored or not visible

This used to be problem with older version of checkout module, but since The One page checkout v3.2.0, most of privacy checkbox modules shall be supported and The Checkout module has even 2 own multi-purpose checkboxes. If you don't yet have this version, contact me please.