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

How to Customize the Shipping Rate Display

Customize shipping rate display with CSS for better checkout experience in Magento 1

Table of Contents

Overview

This guide helps you customize the shipping rate display using CSS for Magento 😊. Discover how to adjust the way shipping rates appear, especially when they include delivery date or time information.

Customizing Shipping Rate Display

  • By default, ShipperHQ displays shipping rates in your checkout as shown below.

LocalDelivery

  • The shipping rate text is separated into different span elements. For instance, a shipping rate can include the method name "Flat fee" and the delivery details "Delivers: 06/10/2016." These are found in separate span tags with CSS classes called method-title and method-extra, as visible in the source code below.

SPans

  • Use these CSS classes to customize how the shipping rate displays in your checkout. 😊

By styling these elements, you ensure your checkout process aligns with your brand while providing clear information to your customers.