Home » Magento tutorials » How to Change “Add to Cart” button to “Pre-Order” in Magento

How to Change “Add to Cart” button to “Pre-Order” in Magento

There’re some specific products on your Magento site that’re not always in stock, customers need to pre-order that items, so how to Change “Add to Cart” button to “Pre-Order” in Magento?

add to cart to pre order magento

As you may know, Magento allows to manage the products inventory. Together with this one can order by default only those products that are in stock. Herewith there is a possibility to order even those products that are out of stock (backorders), namely when their number (stock) is either 0 or lower than a minimal quantity (Qty for Item’s Status to Become Out of Stock attribute).

In order to make out of stock products orders possible it is necessary to state that for such products backorders are allowed, namely the number of products in stock can be negative.

The problem that arises in such a case is that customers see that a product is out of stock (in case that availability is displayed in attribute settings for the product) but at the same time there is the Add to Cart button both on category page and the product page.Not all customers pay attention to the fact that the product is out of stock while making an order which can result in an unpleasant situation when a product is not shipped on time and a customer’s expectations are not fulfilled.

One of the solutions for such a situation can be changing the Add to Cart button to the Pre-order button.

If you wish to display Pre-Order button instead of Add to Cart when the product quantity is 0, here’s how to do it.

Product List and Grid:

Open app/design/frontend/yourpackage/yourtheme/template/catalog/product/list.phtml

Add below:


Replace with:


Replace with:

Product view page:

Open app/design/frontend/yourpackage/yourtheme/template/catalog/product/view/addtocart.phtml


Add below:
Replace with:

About Brian Wilson

Brian is a freelance Magento developer with 5 years of experience with customizing Magento extensions, magento themes. He's interested in sharing Magento Tutorials to the community


  1. avatar

    GIVE ME A SHOUT EMAIL OR TEL 917-509-0816

  2. avatar

    Thanks for this! Works well!
    Would you be able to tell me how I could change the color of the Pre-order button.

    • avatar

      Hi Jessica, you can change color of the button by changing button style in your Magento site’s layout file. Read more about html/css to learn how to change color of objects on your website.

  3. avatar

    Will it work for configurable products? I tried it, it seems it does not work for configurable products

    • avatar

      I’m also interested if it does work for the configurable products.
      Can it change the Add to cart button text to Pre-order when the selected variant of the configurable product is out of stock? And vice versa.

  4. avatar


    Can you tell me how I can change the magento cart button (go to partner site) on product page in an image (affiliate-link). The image will uploaded in the affiliate_link_image attribute.

    • avatar

      There is no easy way to do this. What you will need to do is mask the existing add-to-cart code with a similar

      The custom-attribute is just your regular text field.
      1. Create a new text field attribute and assign it to your products
      2. Put a link of your choice for each of your product’s [newly created text field]
      3. Call your newly-created-attribute in catalog/product/view.phtml and list.phtml inside

      You can also read this thread for more detailed solution

Leave a Reply to DANNY DRUCKER Cancel reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Scroll To Top