How to Theme Product Page Shipping Calculator

Overview

Use this document to customize the Product Page Shipping Calculator (PPSC) to fit the brand of your store. You can achieve this by using field translations and applying custom CSS style overrides.

How to translate Product Page Shipping Calculator fields

In order to update the field values in the Product Page Shipping Calculator (e.g. change “Zip/Postal Code” to “Zip Code”), you need to create and load a custom module into the Magento store.

To create a module, you need to complete the following 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 check that it is working

Create the module folder structure

Navigate to the root folder for the Magento store and create the app/code/ShipperHQ/Translation folder. From the command line you, run the following:

  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 depends on the installation of the Product Page Shipping Calculator to define the “soft dependency” here. Use the following to create the file:

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

Add the following to the file:

<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <module name="ShipperHQ_Translation" setup_version="1.0.0">
        <sequence>
            <module name="ShipperHQ_ProductPage"/>
        </sequence>
    </module>
</config>

Create the registration.php file

To help Magento locate the module, create the registration.php file. Run the following from the command line:

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

Then 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 is where you can update what will be displayed in the Product Page Calculator for your store. Create the file by running:

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

From there,  you can update the fields based on what you want to display by updating the global SHIPPERHQ_TRANSLATION variable. Below is an example ppse_translation.js file.

 window.SHIPPERHQ_PP_TRANSLATION = {
    "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 the field descriptions. Make sure you have a value for any fields you want to display. To see what fields are responsible for what, go to the “Which fields can be modified?” section of the article.

Once you’ve created the JavaScript translation file, you need to ensure it is linked to the page. First, create the layout by running:

touch app/code/ShipperHQ/Translation/view/frontend/layout/catalog_product_view.xml

Then update the file by linking the translation file to the <head> of the page. Inside of catalog_product_view.xml add:

<page xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="ShipperHQ_Translation::js/ppse-translation.js" />
    </head>
</page>

Install the module and check that it is working

The last step is to install the module and ensure it is added correctly. To install the module, run:

php bin/magento setup:upgrade

Once the command finishes, you should be able to see translations on your checkout page. To ensure the module installed correctly, check the config.php file by running:

grep ShipperHQ_Translation app/etc/config.php

Which fields can be modified?

Field Description
shq.ppse.destination.country Displays the default country.
shq.ppse.destination.state Displays when the state is shown.
shq.ppse.destination.zipcode Displays when the zip code is shown
shq.ppse.qty.quantity Text shown above the quantity field
shq.ppse.getRates.getrates Displays when get rates is enabled. This is the button text.
shq.ppse.reset.Reset This is the text shown for the Reset button.
shq.ppse.estimateshipping.estimateShipping This is the text shown as the header for the Product Page Shipping Calculator module.

How to apply custom styles to Product Page Shipping Calculator

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

Create a module

Create a module following the same steps mentioned above for creating a PPSC translation module. You can skip the steps for creating the JavaScript files.

After creating, the module you should have the following files:

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

Add your custom styles

To add your own styles, create a file called override.css in the web/css folder. First, create the folder by running:

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

Inside that folder, create a file to write your styles. To create a file called override.css run:

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

Link the file to the page, by adding it to the catalog_product_view.xml file you created. Your file should be similar to the following:

<page xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css type="text/css" src="ShipperHQ_Translation::css/override.css"/>
    </head>
</page>

If you are also overriding the Product Page Shipping Calculator translation file, you can add it above or below the script tag.

You can name the CSS override file anything as long as it matches what you include in catalog_product_view.xml.

You can target any elements of the Product Page Shipping Calculator and add your own styles inside override.css. Here is a simple example overriding the font and background color of the shipping methods section:

#shq-shipping-view {
    color: green !important;
}

#shq-shipping-view div.shpmt-cont {
    background-color: #bbb !important;
}

Install the module

Once you’ve added the CSS, install/update the module to view your changes. On the command line, run:

php bin/magento setup:upgrade

What cannot be changed

Currently, not all aspects of the Product Page Shipping Calculator can be updated. Some of these areas include:

  • HTML structure
  • Data flow

Was this doc helpful?