create pre order products in magento

so i have had a few clients needing the ability to have a pre-order of products in magento they are going to be stocking soon. and this is the best way i came to make it happen.

firstly because the products wont be stocked yet, Manage Stock is set to No under Inventory when editing/adding  a product.

So now to easily be able to set a product as a pre order product we need to add some attributes.
So in your Magento admin go to Catalog > Attributes > Manage Attributes and click Add New Attribute

Give it an Attribute Code of preorder and for Catalog Input Type for Store Owner set to Yes/No
Set the Used in Product Listing to Yes and you can give it a fancy label under the label tab if you want.

Save it and then Add another New Attribute. This time give it the Attribute Code preordernote and make it a Textfield

Now under  Catalog > Attributes > Manage Attribute Sets edit your attribute sets and drag in the new attributes you created ( i liked them under the Prices section )

So what we have done here is have the ability to set any Magento product as a pre order product and then a field for a note to give to the customer such as “Available Late November” so the customer has an idea when they will get the product.

Now lets edit the product view page where the add to cart button is and change it to Pre-Order. you will find the theme file we need to edit here:
Your Magento Folder /app/design/frontend/*yourthemepackage*/*yourtheme*/template/catalog/product/view/addtocart.phtml

if not there then copy it from your base theme folder: /app/design/frontend/base/default/template/catalog/product/view/addtocart.phtml

you want to find the button title code like this:

and replace it with this code:

this simply changes the button text when the product attribute Preorder is set to yes.

now before the last endif; in the same file add this code:

this will display your pre order note under the button and you can add a CSS style to the .preorder-note to make it fancy if you want.

now we need to do the same for the catalog product listings. so find this file: /app/design/frontend/*yourthemepackage*/*yourtheme*/template/catalog/product/list.phtml

Again, just copy it from the base folder if it’s not there.
Open it up to edit and you will need to find the 2 spots where the Add to Cart buttons are. Around line 61 and 103. they will be like this:

change both of them to this:

Might be worth creating a new product and setting the Pre Order to Yes and then adding a Pre Order Note and then having a look at how it looks.

lets now edit the Cart to display a Pre Order message.
So lets edit this file:  /app/design/frontend/*yourthemepackage*/*yourtheme*/template/checkout/cart/item/default.phtml

Again, just copy it from the base folder if it’s not there.

Find the <h2 class=”product-name”> closing tag which will be </h2> around like 93
And directly after that add this code:

and maybe give it some fancy CSS to the .preorder-item span class in your style sheet like so:

add one of your pre order items to the cart and have a look.

and how about we also add that message to the checkout review section.
edit this file:  /app/design/frontend/*yourthemepackage*/*yourtheme*/template/checkout/onepage/review/item.phtml

and add the code we added to the above default.phtml file to this file under this line:

how about the new order email customer get.
Edit this file: /app/design/frontend/*yourthemepackage*/*yourtheme*/template/email/order/items/order/default.phtml

and under this line:

add this ( with styling ) :

do a test order and have a look. nice.

this should work on the latest magento versions. and a few earlier ones. i did it on magento 1.7.2.
any problems or add ons please let me know below in the comments.

just a note, you may also want to edit the wishlist add to cart buttons and the compare add to cart buttons. these files can be found:

/app/design/frontend/*yourthemepackage*/*yourtheme*/template/wishlist/item/column/cart.phtml
/app/design/frontend/*yourthemepackage*/*yourtheme*/template/catalog/product/compare/list.phtml