Knowledgebase

How to add a red asterisk to a field on the registration form in PrestaShop

When users want to register as customers they have to fill out a registration form on the frontend of your PrestaShop store. By default, some of the fields are required and are marked with a red asterisk. If you want to, you can make some of the other fields required too. You can do this from the backend of your store. For more information on how to do it read the article on making fields on the registration form required.

When you make a field required (a field that is not required by default) on the frontend it won't be marked with a red asterisk (*). It will still be required though. If you want to, however, you can add an asterisk to that field. You can do this by adding a line of code to the authentication.tpl file for the particular theme. Let's say that you use the default prestashop theme and your application is installed in the root public_html directory of your PrestaShop hosting account, then the path to the file would be public_html/themes/prestashop/authentication.tpl. One way to edit the file is from the Files section of the Pixie control panel.

After you open the file scroll down to about the middle of the file and find the line {$HOOK_CREATE_ACCOUNT_TOP}. This may also depend on the theme; here we use the prestashop theme as an example. Below the above mentioned line you'll find a piece of code for each field on the registration form. Generally, the code for each field starts with the tag <p class=""> and ends with </p>.

To add a red asterisk to the particular field insert the following line of code just before the tag </p>:

<sup style="color:red;">*</sup>

For example, you have made the birthday field required and you want to put a red asterisk on the registration form. As described above, open the authentication.tpl file and scroll down to the appropriate location in the file. The code for the birthday field starts with:

<p class="select">
    <span>{l s='Date of Birth'}</span>
    <select id="days" name="days">

And ends with:

  <select id="years" name="years">
    <option value="">-</option>
    {foreach from=$years item=year}
    <option value="{$year|escape:'htmlall':'UTF-8'}" 
    {if ($sl_year == $year)} selected="selected"{/if}>
    {$year|escape:'htmlall':'UTF-8'}  *lt;/option>
    {/foreach}
  </select>
</p>

So just before the tag </p> which is right at the end of this string of code insert the line of code for the red asterisk.

Don't forget that when you make changes to template files you should enable the Force Compile option from the backend of your store (Preferences tab>Performance sub-tab), so that you can see the changes when you refresh the frontend. After you're done disable the option.

Modifications to the files of a theme are overwritten when that theme is updated. In the case of the default prestashop theme the same is true when you update PrestaShop. So it might be useful to create and use a child theme.

Also Read