Making the Multi-Address Checkout Link Pretty on the Magento Cart Page

By Jacqueline Sinex, Wednesday, May 11, 2011
Checkout button

In a default Magento setup with a basic theme, Magento includes an option to “Checkout with Multiple Addresses”. This is styled as a plain-Jane blue link (no offense, Jane). Especially if you turn off One-page checkout (and only want to use multi-checkout), this link remains bland and unnoticeable. No more bright orange Checkout button.

Styling this link is quite easy with a little CSS.

Add the following style class to your stylesheet (in your theme):

.cart .totals .checkout-types li {/*my awesome styles go in here*/}

In one Magento Setup, I created a graphic button background similar to that “big orange checkout button” and included it in this style class. (Of course, you would only want to do this if you are not using one-page checkout because then you just have 2 duplicate-looking buttons on top of each other.) If preferred, you can include the text label on your button graphic and disguise the default text label (which is quite long) with your CSS.

A simple dress-up without modifying any core Magento files.

Magento is one of the many feature-rich shopping cart software that WEBii works with to develop customized e-commerce websites for small and medium-sized businesses.  Learn more about our e-commerce services.

Posted in: Austin Web Design, E-commerce, Quick Tips, Tech Support, Web Design, Web Development, WWW Learning Center

Comments are closed.