Skip to content
Visit ShipperHQ.com
  • There are no suggestions because the search field is empty.

How to Theme Enhanced Checkout - Magento

Customize your store's checkout with translations and unique CSS styles

Table of Contents

Overview

Enhanced Checkout (EC) is customizable to fit your store's brand through field translation and custom CSS style overrides. This guide will walk you through translating fields and applying styles to make the checkout experience your own. 😊

How to Translate Enhanced Checkout Fields

To update field values in Enhanced Checkout, like changing "Click and Collect" to "In Store Pickup," you'll create and load a custom module in your Magento store. Follow these high-level steps:

  • Create the module folder.
  • Create the etc/module.xml file.
  • Create the registration.php file.
  • Create translation files and update the translation object.
  • Install the module and verify its functionality.

Create the Module Folder Structure

Start by navigating to your Magento store's root folder:

  1. cd to the root folder
  2. mkdir -p app/code/ShipperHQ/Translation/etc
  3. mkdir -p app/code/ShipperHQ/Translation/view/frontend/layout
  4. mkdir -p app/code/ShipperHQ/Translation/view/frontend/web/js

Create the etc/module.xml File

This translation module requires Enhanced Checkout to be installed. To set this up, create the file:

```bash
touch app/code/ShipperHQ/Translation/etc/module.xml

Add the following content to the file:

```xml

xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

Create the registration.php File

This file helps Magento locate the module. Create it with:

```bash
touch app/code/ShipperHQ/Translation/registration.php

Add this content:

```php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'ShipperHQ_Translation',
DIR
);

Create the Translation Files

Create the file to update display fields in Enhanced Checkout:

```bash
touch app/code/ShipperHQ/Translation/view/frontend/ec_translation.js

Edit ec_translation.js to update fields using the SHIPPERHQ_TRANSLATION variable. Here’s an example:

```javascript
window.SHIPPERHQ_TRANSLATION = {
shq: {
checkout: {
addressPage: {
fillAddressFirst: "Please enter your shipping address to see shipping methods.",
noShippingToYourAddress: "No shipping methods available",
},
shipping: {
pickup: {
showAllLocations: "Show All Locations",
clickToShowAllLocations: "Click to show all locations",
showMap: "Show Map",
hideMap: "Hide Map",
change: "Change",
},
inStore: "Click & Collect",
delivery: "Delivery",
},
summary: {
deliversOn: "Delivers",
pickupAt: "Pickup at",
},
},
},
};

Important: Changing this file overwrites all field descriptions. Ensure you provide values for any fields you want displayed. Visit the "Which fields can be modified?" section for more details.

After creating the JavaScript translation file, link it to the page. First, create the layout:

```bash
touch app/code/ShipperHQ/Translation/view/frontend/layout/checkoutindexindex.xml

Link the translation file in the <head> of your page within checkout_index_index.xml:

```xml

Install the Module

Finally, install the module and ensure everything is functioning:

```bash
php bin/magento setup:upgrade

Verify installation by checking the config.php file:

```bash
grep ShipperHQ_Translation app/etc/config.php

Which Fields Can Be Modified?

  • shq.checkout.addressPage.fillAddressFirst: Before address entry, rates unavailable
  • shq.checkout.addressPage.noShippingToYourAddress: No rates available
  • shq.checkout.shipping.inStore: In Store Pickup button text
  • shq.checkout.shipping.delivery: Display shipping methods button text
  • shq.checkout.shipping.pickup.showAllLocations: Button text when multiple locations enabled
  • shq.checkout.shipping.pickup.clickToShowAllLocations: Hover text for button with multiple locations
  • shq.checkout.shipping.pickup.showMap: Shows when map is hidden
  • shq.checkout.shipping.pickup.hideMap: Shows when map is visible

How to Apply Custom Styles to Enhanced Checkout

To apply custom styles, upload a CSS file targeting the desired elements.

Create a Module

Follow similar steps as the translation module, but skip creating JavaScript files. Your module should include:

  • view/frontend/layout/checkout_index_index.xml
  • etc/module.xml
  • registration.php

Add Your Custom Styles

Create override.css by performing the following:

```bash
mkdir -p app/code/ShipperHQ/Translation/view/frontend/web/css
touch app/code/ShipperHQ/Translation/view/frontend/web/css/override.css

Link it in checkout_index_index.xml:

```xml

You can name the CSS file anything, as long as it matches the name in checkout_index_index.xml.

Target elements in override.css to customize the style, for example:

```css

shq-shipping-view {

color: green !important;
}

shq-shipping-view div.shpmt-cont {

background-color: #bbb !important;
}

After adding your CSS, install or update the module to see changes:

```bash
php bin/magento setup:upgrade

What Cannot Be Changed

Some aspects of Enhanced Checkout remain fixed, including:

  • HTML structure
  • Data flow

For questions or further assistance, feel free to reach out. 😊