Customization guide
From OneStepCheckoutWiki
This document explains how to make visual modifications to the OneStepCheckout module for Magento.
Contents |
How to make template changes to the checkout
Like any other Magento module, the OneStepCheckout comes with a few PHP/Magento templates. The template are self-explanatory and easy to change. You will find the templates in the following folder: app/design/frontend/base/default/template/onestepcheckout (default/default for Magento versions prior to 1.4) When you make changes to the checkout, be sure to copy the template files into your active theme's folder. That because, if you at some time in the future want to upgrade OneStepCheckout to the newest version, you won't overwrite any files and delete the changes you've made.
You will find the following files in the onestepcheckout template folder:
- checkout.phtml - The main template file containing the entire checkout
- summary.phtml – The template showing products and totals (amounts)
- payment_method.phtml - The template which displays the payment method options
- shipping_method.phtml - The template which displays the shipping method options
These files are regular Magento template files and are easy to read and customize for any developer/technician w PHP/Magento experience. You are free to move things around and make the changes you desire.
How to make CSS and other visual changes to the checkout
All the rules for how the checkout is displayed with colors, fonts, images and more are defined in the CSS file that is shipped with OneStepCheckout. You will find that file here: skin/frontend/base/default/onestepcheckout/onestepcheckout.css Like with the template files, we recommend copying the CSS file from base/default to YOUR_INTERFACE/YOUR_THEME if you want to make changes. Together with the template files explained above, you are now free to make all the changes you want to both the layout with markup and also colors, fonts and lots more using the CSS file.
How to add order comments to regular comment collection instead of separate variable in 1.4 * and enterprise
Open app/code/local/Idev/OneStepCheckout/Helper/Data.php, and after
$observer->getEvent()->getOrder()->setOnestepcheckoutCustomercomment($orderComment);
add this line:
$observer->getEvent()->getOrder()->setState( $observer->getEvent()->getOrder()->getStatus(), true, $orderComment, false );
This will add the comments on the regular comments/statuses thread, as well as a customer comment. If you want to disable customer comments, just comment the original code.
See the discussion in comments [1] and thanks for the initiative and code samples to mandagreen.com.
Add cart rows and functionality to OneStepCheckout page
For this you need to edit app/design/frontend/base/default/layout/onestepcheckout.xml (or the same file in your theme folder) and add cart layout handlers as follows to <reference name="content">:
<block type="checkout/cart" name="checkout.cart">
<action method="setCartTemplate"><value>checkout/cart.phtml</value></action>
<action method="setEmptyTemplate"><value>checkout/cart/noItems.phtml</value></action>
<action method="chooseTemplate"/>
<action method="addItemRender"><type>simple</type><block>checkout/cart_item_renderer</block><template>checkout/cart/item/default.phtml</template></action>
<action method="addItemRender"><type>grouped</type><block>checkout/cart_item_renderer_grouped</block><template>checkout/cart/item/default.phtml</template></action>
<action method="addItemRender"><type>configurable</type><block>checkout/cart_item_renderer_configurable</block><template>checkout/cart/item/default.phtml</template></action>
</block>
Other
If you have any questions about styling the checkout, you are welcome to contact us at support@onestepcheckout.com.
