Overview
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.
Steps
- 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