By default the Magento theme uses a button-image to allow customers to checkout their cart contents. If you want to restyle this button, you'll need to alter the image - which is less than perfect. This video shows you how to replace the image with HTML-code, so you can style the button better using CSS.
Never modify core files
Magento is complex, and complex software may contain bugs. The Magento Community Edition ships with a separate application - the MagentoConnect manager - which allows for easy upgrades through a couple of mouse-clicks. But if you have modified the original files, these files might be updated again, which will also delete all your changes. To prevent this, the general rul "Never modify core files" should be applied.
Magento ships with a wonderful theming concept (referred to as parent/child theming) which allows for changes to be implemented without modifying the original. In this case, the Magento Default Theme serves as parent theme while you can create your own subtheme. For this to work, you will need to configure the right directories and also configure these directories to be used within the Magento Configuration.
Proceed to checkout
By enabling Path Hints within the Magento configuration, you can easily find out which block is responsible for the button Proceed to checkout. The template used for the image is to be found in the file checkout/onepage/link.phtml within the default theming directory app/design/frontend/default/default/template/. Once you copy the template-file to your own theming directory, you can edit the file freely and modify the HTML.
About the author
Jisse Reitsma is the founder of Yireo, extension developer, developer trainer and 3x Magento Master. His passion is for technology and open source. And he loves talking as well.
