Tutorials for Magento and Joomla! - Yireo

Video: Replace Magento Checkout Button image with CSS

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.