This document explains how to make visual modifications to the OneStepCheckout module for Magento.

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) * paymentmethod.phtml - The template which displays the payment method options * shippingmethod.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 YOURINTERFACE/YOURTHEME 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

as of 4.0.5 this feature is built in and can be enabled from System > Configuration > Sales > OneStepCheckout .

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 [http://mandagreen.com/customer-comments-as-order-status-comments-magento-onestepcheckout] 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 :

checkout/cart.phtml
checkout/cart/noItems.phtml

simplecheckout/cart_item_renderer
groupedcheckout/cart_item_renderer_grouped
configurablecheckout/cart_item_renderer_configurable

Responsive layout

One Step Checkout ver 4.5.5 and up has responsive CSS layout enabled. If you run into any issues with responsive layout, please contact One Step Checkout technical support.

Please find below complete information on responsive CSS layout, including guide to older versions and technical details on Magento layout and how One Step Checkout layout interacts with Magento theme.

By default OneStepCheckout ver 4. is not enabled as responsive layout because the design of OneStepCheckout is based on Magento (1. versions ) default theme and default theme itself is not responsive. OneStepCheckout does not provide a full page on your Magento but just one block included to main layout so making OneStepCheckout responsive has only meaning if your whole theme is made to be responsive.

Since OneStepCheckout version 4.1.0 we are bundling a responsive css version in our installation package in skin/frontend/base/default/onestepcheckout/ folder and the responsive file is called onestepcheckout_responsive.css . To make this file active you have two ways:

• rename the file to be onestepcheckout.css so it will be included as a default css file within layout rules.
• open up app/design/frontend/base/default/layout/onestepcheckout.xml (or the same file on your custom theme folder) and change the layout to include onestepcheckout_responsive.css instead of onestepcheckout.css

If you have already customised your OneStepCheckout or using older version you can get the responsive part from this url [https://gist.github.com/speedupmate/8238872] and paste this to the end of your skin/frontend/base/default/onestepcheckout/onestepcheckout.css (or the same file under your used theme folder)

Since there is no standardised responsive approach for magento themes you might have to tweak the responsive rules to fit your theme. Responsive css markup is contributed to OneStepCheckout by Valentin Niklasson and slightly adjusted by us to fit the default magento theme.

Other

If you have any questions about styling the checkout, you are welcome to contact us at support@onestepcheckout.com.