{"id":1508,"date":"2011-05-11T13:19:57","date_gmt":"2011-05-11T19:19:57","guid":{"rendered":"http:\/\/webii.net\/blog\/?p=1508"},"modified":"2024-09-22T17:12:38","modified_gmt":"2024-09-22T22:12:38","slug":"making-the-multi-address-checkout-link-pretty-in-magento","status":"publish","type":"post","link":"https:\/\/www.webii.net\/blog\/making-the-multi-address-checkout-link-pretty-in-magento\/","title":{"rendered":"Making the Multi-Address Checkout Link Pretty on the Magento Cart Page"},"content":{"rendered":"<p>In a default <a href=\"https:\/\/www.webii.net\/website-services\/web-development\/magento\/\">Magento<\/a> setup with a basic theme, Magento includes an option to &#8220;Checkout with Multiple Addresses&#8221;. 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.<\/p>\n<p>Styling this link is quite easy with a little CSS.<\/p>\n<h2>Add the following style class to your stylesheet (in your theme):<\/h2>\n<p>.cart .totals .checkout-types li {\/*my awesome styles go in here*\/}<\/p>\n<p>In one Magento Setup, I created a graphic button background similar to that &#8220;big orange checkout button&#8221; 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.<\/p>\n<p>A simple dress-up without modifying any core Magento files.<\/p>\n<p>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.\u00a0 <a href=\"https:\/\/www.webii.net\/e-commerce\/\">Learn more about our e-commerce services.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In a default Magento setup with a basic theme, Magento includes an option to &#8220;Checkout with Multiple Addresses&#8221;. 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 [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":1512,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[16,4,10,11,3,41,300],"tags":[],"class_list":["post-1508","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-austin-web-design","category-e-commerce","category-quick-tips","category-tech-support","category-web-design","category-web-development","category-www-learning-center"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Making the Multi-Address Checkout Link Pretty on the Magento Cart Page - WEBii<\/title>\n<meta name=\"description\" content=\"Style the multi-address checkout link in your Magento store to be as pretty as the original orange Checkout button.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webii.net\/blog\/making-the-multi-address-checkout-link-pretty-in-magento\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Making the Multi-Address Checkout Link Pretty on the Magento Cart Page\" \/>\n<meta property=\"og:description\" content=\"Style the multi-address checkout link in your Magento store to be as pretty as the original orange Checkout button.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webii.net\/blog\/making-the-multi-address-checkout-link-pretty-in-magento\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Marketing &amp; Web Development Company Blog - WEBii\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/webiinet\" \/>\n<meta property=\"article:published_time\" content=\"2011-05-11T19:19:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-22T22:12:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2011\/05\/checkout-button.png\" \/>\n\t<meta property=\"og:image:width\" content=\"222\" \/>\n\t<meta property=\"og:image:height\" content=\"58\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jacqueline Sinex\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jacqueline Sinex\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/making-the-multi-address-checkout-link-pretty-in-magento\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/making-the-multi-address-checkout-link-pretty-in-magento\\\/\"},\"author\":{\"name\":\"Jacqueline Sinex\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#\\\/schema\\\/person\\\/f4b38a14e3a80c2113ac6397739c77f6\"},\"headline\":\"Making the Multi-Address Checkout Link Pretty on the Magento Cart Page\",\"datePublished\":\"2011-05-11T19:19:57+00:00\",\"dateModified\":\"2024-09-22T22:12:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/making-the-multi-address-checkout-link-pretty-in-magento\\\/\"},\"wordCount\":212,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/making-the-multi-address-checkout-link-pretty-in-magento\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/uploads\\\/2011\\\/05\\\/checkout-button.png\",\"articleSection\":[\"Austin Web Design\",\"E-commerce\",\"Quick Tips\",\"Tech Support\",\"Web Design\",\"Web Development\",\"WWW Learning Center\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.webii.net\\\/blog\\\/making-the-multi-address-checkout-link-pretty-in-magento\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/making-the-multi-address-checkout-link-pretty-in-magento\\\/\",\"url\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/making-the-multi-address-checkout-link-pretty-in-magento\\\/\",\"name\":\"Making the Multi-Address Checkout Link Pretty on the Magento Cart Page - WEBii\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/making-the-multi-address-checkout-link-pretty-in-magento\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/making-the-multi-address-checkout-link-pretty-in-magento\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/uploads\\\/2011\\\/05\\\/checkout-button.png\",\"datePublished\":\"2011-05-11T19:19:57+00:00\",\"dateModified\":\"2024-09-22T22:12:38+00:00\",\"description\":\"Style the multi-address checkout link in your Magento store to be as pretty as the original orange Checkout button.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/making-the-multi-address-checkout-link-pretty-in-magento\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webii.net\\\/blog\\\/making-the-multi-address-checkout-link-pretty-in-magento\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/making-the-multi-address-checkout-link-pretty-in-magento\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/uploads\\\/2011\\\/05\\\/checkout-button.png\",\"contentUrl\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/uploads\\\/2011\\\/05\\\/checkout-button.png\",\"width\":222,\"height\":58,\"caption\":\"Checkout button\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/making-the-multi-address-checkout-link-pretty-in-magento\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Austin Web Design\",\"item\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/category\\\/austin-web-design\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Making the Multi-Address Checkout Link Pretty on the Magento Cart Page\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/\",\"name\":\"Web Marketing &amp; Web Development Company Blog - WEBii\",\"description\":\"web design . web development . seo . marketing . web hosting . + more\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#organization\",\"name\":\"WEBii\",\"url\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/fb-banner-webii-seo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/fb-banner-webii-seo.jpg\",\"width\":1200,\"height\":598,\"caption\":\"WEBii\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#\\\/schema\\\/person\\\/f4b38a14e3a80c2113ac6397739c77f6\",\"name\":\"Jacqueline Sinex\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/8b2\\\/8b2a612b27eed2b3a9f8e6a977e3a226x96.jpg\",\"url\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/8b2\\\/8b2a612b27eed2b3a9f8e6a977e3a226x96.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/8b2\\\/8b2a612b27eed2b3a9f8e6a977e3a226x96.jpg\",\"caption\":\"Jacqueline Sinex\"},\"description\":\"Managing Director\",\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/webiinet\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/jsinex\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Making the Multi-Address Checkout Link Pretty on the Magento Cart Page - WEBii","description":"Style the multi-address checkout link in your Magento store to be as pretty as the original orange Checkout button.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webii.net\/blog\/making-the-multi-address-checkout-link-pretty-in-magento\/","og_locale":"en_US","og_type":"article","og_title":"Making the Multi-Address Checkout Link Pretty on the Magento Cart Page","og_description":"Style the multi-address checkout link in your Magento store to be as pretty as the original orange Checkout button.","og_url":"https:\/\/www.webii.net\/blog\/making-the-multi-address-checkout-link-pretty-in-magento\/","og_site_name":"Web Marketing &amp; Web Development Company Blog - WEBii","article_author":"https:\/\/www.facebook.com\/webiinet","article_published_time":"2011-05-11T19:19:57+00:00","article_modified_time":"2024-09-22T22:12:38+00:00","og_image":[{"width":222,"height":58,"url":"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2011\/05\/checkout-button.png","type":"image\/png"}],"author":"Jacqueline Sinex","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jacqueline Sinex","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webii.net\/blog\/making-the-multi-address-checkout-link-pretty-in-magento\/#article","isPartOf":{"@id":"https:\/\/www.webii.net\/blog\/making-the-multi-address-checkout-link-pretty-in-magento\/"},"author":{"name":"Jacqueline Sinex","@id":"https:\/\/www.webii.net\/blog\/#\/schema\/person\/f4b38a14e3a80c2113ac6397739c77f6"},"headline":"Making the Multi-Address Checkout Link Pretty on the Magento Cart Page","datePublished":"2011-05-11T19:19:57+00:00","dateModified":"2024-09-22T22:12:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webii.net\/blog\/making-the-multi-address-checkout-link-pretty-in-magento\/"},"wordCount":212,"commentCount":0,"publisher":{"@id":"https:\/\/www.webii.net\/blog\/#organization"},"image":{"@id":"https:\/\/www.webii.net\/blog\/making-the-multi-address-checkout-link-pretty-in-magento\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2011\/05\/checkout-button.png","articleSection":["Austin Web Design","E-commerce","Quick Tips","Tech Support","Web Design","Web Development","WWW Learning Center"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webii.net\/blog\/making-the-multi-address-checkout-link-pretty-in-magento\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webii.net\/blog\/making-the-multi-address-checkout-link-pretty-in-magento\/","url":"https:\/\/www.webii.net\/blog\/making-the-multi-address-checkout-link-pretty-in-magento\/","name":"Making the Multi-Address Checkout Link Pretty on the Magento Cart Page - WEBii","isPartOf":{"@id":"https:\/\/www.webii.net\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webii.net\/blog\/making-the-multi-address-checkout-link-pretty-in-magento\/#primaryimage"},"image":{"@id":"https:\/\/www.webii.net\/blog\/making-the-multi-address-checkout-link-pretty-in-magento\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2011\/05\/checkout-button.png","datePublished":"2011-05-11T19:19:57+00:00","dateModified":"2024-09-22T22:12:38+00:00","description":"Style the multi-address checkout link in your Magento store to be as pretty as the original orange Checkout button.","breadcrumb":{"@id":"https:\/\/www.webii.net\/blog\/making-the-multi-address-checkout-link-pretty-in-magento\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webii.net\/blog\/making-the-multi-address-checkout-link-pretty-in-magento\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webii.net\/blog\/making-the-multi-address-checkout-link-pretty-in-magento\/#primaryimage","url":"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2011\/05\/checkout-button.png","contentUrl":"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2011\/05\/checkout-button.png","width":222,"height":58,"caption":"Checkout button"},{"@type":"BreadcrumbList","@id":"https:\/\/www.webii.net\/blog\/making-the-multi-address-checkout-link-pretty-in-magento\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webii.net\/blog\/"},{"@type":"ListItem","position":2,"name":"Austin Web Design","item":"https:\/\/www.webii.net\/blog\/category\/austin-web-design\/"},{"@type":"ListItem","position":3,"name":"Making the Multi-Address Checkout Link Pretty on the Magento Cart Page"}]},{"@type":"WebSite","@id":"https:\/\/www.webii.net\/blog\/#website","url":"https:\/\/www.webii.net\/blog\/","name":"Web Marketing &amp; Web Development Company Blog - WEBii","description":"web design . web development . seo . marketing . web hosting . + more","publisher":{"@id":"https:\/\/www.webii.net\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webii.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webii.net\/blog\/#organization","name":"WEBii","url":"https:\/\/www.webii.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webii.net\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2015\/12\/fb-banner-webii-seo.jpg","contentUrl":"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2015\/12\/fb-banner-webii-seo.jpg","width":1200,"height":598,"caption":"WEBii"},"image":{"@id":"https:\/\/www.webii.net\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.webii.net\/blog\/#\/schema\/person\/f4b38a14e3a80c2113ac6397739c77f6","name":"Jacqueline Sinex","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webii.net\/blog\/wp-content\/wphb-cache\/gravatar\/8b2\/8b2a612b27eed2b3a9f8e6a977e3a226x96.jpg","url":"https:\/\/www.webii.net\/blog\/wp-content\/wphb-cache\/gravatar\/8b2\/8b2a612b27eed2b3a9f8e6a977e3a226x96.jpg","contentUrl":"https:\/\/www.webii.net\/blog\/wp-content\/wphb-cache\/gravatar\/8b2\/8b2a612b27eed2b3a9f8e6a977e3a226x96.jpg","caption":"Jacqueline Sinex"},"description":"Managing Director","sameAs":["https:\/\/www.facebook.com\/webiinet","https:\/\/www.linkedin.com\/in\/jsinex"]}]}},"_links":{"self":[{"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/posts\/1508","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/comments?post=1508"}],"version-history":[{"count":0,"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/posts\/1508\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/media\/1512"}],"wp:attachment":[{"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/media?parent=1508"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/categories?post=1508"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/tags?post=1508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}