How to Customize the Shipping Rate Display

Overview

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

Steps

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

LocalDelivery

  • 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

SPans

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