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

How to Theme Product Page Shipping Calculator on Magento 2

Customize Shipping Calculator Appearance and Text for Your Online Store

Table of Contents

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 in terminal using:

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

Add the following content:

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:

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:

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

Update fields by modifying the global SHIPPERHQ_TRANSLATION variable:

window.SHIPPERHQ_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 field descriptions. Ensure you provide values for all fields you want to display.

To link the JavaScript translation file, create the layout:

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

Update the file by adding:

<?xml version="1.0"?>
<page xmlns:xsi="http://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

To install the module, run:

php bin/magento setup:upgrade

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

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 Text for the "Get Rates" button
shq.ppse.reset.Reset Text for the Reset button
shq.ppse.estimateshipping.estimateShipping Header text for the Product Page Shipping Calculator

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:

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

Create the CSS file:

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

Link the file in the catalog_product_view.xml:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="ShipperHQ_Translation::css/override.css"/>
    </head>
</page>

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:

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:

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