Table of Contents

• Overview
• How to Translate Product Page Shipping Calculator Fields
• Create the Module Folder Structure
• Create the etc/module.xml File
• Create the registration.php File
• Create the Translation Files and Overwrite the Translation Object
• Install the Module and Check that It is Working
• Which Fields Can Be Modified?
• How to Apply Custom Styles to Product Page Shipping Calculator
• Create a Module
• Add Your Custom Styles
• Install the Module
• What Cannot Be Changed

Overview

Use this guide to customize the Product Page Shipping Calculator (PPSC) to match your store's branding. Achieve this by translating fields and applying custom CSS style overrides.

How to Translate Product Page Shipping Calculator Fields

To update field values in the Product Page Shipping Calculator, such as changing "Zip/Postal Code" to "Zip Code," create and load a custom module into your Magento store. Here are the high-level steps:

1. Create the module folder.
2. Create the etc/module.xml file.
3. Create the registration.php file.
4. Create the translation files and overwrite the translation object.
5. Install the module and verify its functionality.

Create the Module Folder Structure

Navigate to the root folder of the Magento store and create the app/code/ShipperHQ/Translation folder. From the command line, execute:

• cd to the root folder
• mkdir -p app/code/ShipperHQ/Translation/etc
• mkdir -p app/code/ShipperHQ/Translation/view/frontend/layout
• mkdir -p app/code/ShipperHQ/Translation/view/frontend/web/js

Create the etc/module.xml File

This translation module depends on the Product Page Shipping Calculator. Create the file using:

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

Add the following content:

```xml

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

Create the registration.php File

To help Magento locate the module, create the registration.php file. Run:

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

Add:

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

Create the Translation Files and Overwrite the Translation Object

The translation file updates the field display in the Product Page Calculator. Create the file by executing:

```shell
touch app/code/ShipperHQ/Translation/view/frontend/web/js/ppse_translation.js

Update fields by modifying the global SHIPPERHQ_TRANSLATION variable:

```javascript
window.SHIPPERHQPPTRANSLATION = {
"shq": {
"ppse": {
"destination": {
"country": "Country",
"state": "State/Province",
"zipcode": "Zip/Postal Code"
},
"qty": "Quantity",
"getRates": "Get Rates",
"reset": "Reset",
"estimateShipping": "Estimate Shipping"
}
}
}

💡 Updating this file overwrites all field descriptions. Ensure you provide values for all fields you want to display.

To link the JavaScript translation file, create the layout:

```shell
touch app/code/ShipperHQ/Translation/view/frontend/layout/catalogproductview.xml

Update the file by adding:

```xml

Install the Module and Check that It is Working

To install the module, run:

```shell
php bin/magento setup:upgrade

Verify the translations on your checkout page. Check the config.php file by executing:

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

Which Fields Can Be Modified?

How to Apply Custom Styles to Product Page Shipping Calculator

To apply custom styles, upload a CSS file targeting the elements you wish to override.

Create a Module

Follow the same steps for creating a PPSC translation module, omitting steps for creating JavaScript files. Ensure you have:

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

Add Your Custom Styles

Create a file named override.css in the web/css folder:

```shell
mkdir -p app/code/ShipperHQ/Translation/view/frontend/web/css

Create the CSS file:

```shell
touch app/code/ShipperHQ/Translation/view/frontend/web/css/override.css

Link the file in the catalog_product_view.xml:

```xml

💡 You can name the CSS file anything as long as it matches the reference in catalog_product_view.xml. Customize styles in override.css. Here is a simple example:

```css

shq-shipping-view {

color: green !important;
}

shq-shipping-view div.shpmt-cont {

background-color: #bbb !important;
}

Install the Module

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

```shell
php bin/magento setup:upgrade

What Cannot Be Changed

Currently, certain aspects of the Product Page Shipping Calculator cannot be updated, such as:

• HTML structure
• Data flow

😊 Enjoy customizing your store's shipping calculator!