How to customize front office css and html template of a PrestaShop module?

How to customize front office css and html template of a PrestaShop module?

Basically, you'll found assets in the directory views of the module:

  1. modules/your_module/views
In this directory, you'll found native CSS, JS and templates of the module.

For instance in Prestashop 1.7:
  1. stripe_official/views/templates/front/payment_form_card.tpl
  2. stripe_official/views/css/checkout.css
  3. stripe_official/views/js/stripeCard.js

To customize your display according to your theme you need to copy files you need to update.

For instance in Prestashop 1.7:
  • /themes/your_theme/modules/stripe_official/views/templates/front/payment_form_card.tpl
  • /themes/your_theme/modules/stripe_official/views/css/checkout.css
  • /themes/your_theme/modules/stripe_official/views/js/stripeCard.js

When the module will charge in front-office files, PrestaShop will replace original by those from your theme.

In Prestashop 1.6:
  • themes/our_theme/css/modules/stripe_official/example.css
  • themes/our_theme/js/modules/stripe_official/example.js
  • themes/our_theme/modules/stripe_official/views/templates/front/payment_form_card.tpl

While this path is a little different:

  • themes/your_theme/css/modules/stripe_official/views/css/checkout.css
  • themes/your_theme/js/modules/stripe_official/views/js/stripeCard.js
  • themes/your_theme/modules/stripe_official/views/templates/front/payment_form_card.tpl