How to Customize the Shipping Rate Display


This article outlines how to customize the shipping rate display using CSS for Magento.

Note: Shopify Plus users can utilize Shopify Scripts to customize and manage the display order of rates at checkout as well.


  • When shipping rates include delivery date information or delivery times, ShipperHQ will display shipping rates in your checkout by default as shown below.


  • This shipping rate text is actually in separate span elements. For example, the above shipping rate will include the shipping          method “Flat fee” and the delivery information “Delivers: 06/10/2016” into separate span tags with css classes of method-title and method-extra, as shown in source code below


  • Using these css classes, you can customize shipping rate display on your checkout

Was this doc helpful?