Relocating Submit My Order Button In Checkout

I would like move up the SUBMIT MY ORDER button on my Checkout page.

See screenshot below

[attachment=12755:submitmyorderbutton.png]

What part of the code and which file should I change ?

submitmyorderbutton.png

design/themes/THEME/templates/views/checkout/components/final_section.tpl

Thanks so much.

PS did you guys not have an addon that allows you to pull content from a page and put that content into a block ?

design/themes/THEME/templates/views/checkout/components/final_section.tpl

I have digging in the file final_section.tpl and see this line of code:

{$show_place_order = false}

{if $cart|fn_allow_place_order:$auth}
{$show_place_order = true}
{/if}

{if $recalculate && !$cart.amount_failed}
{$show_place_order = true}
{/if}

{if $show_place_order}

{hook name="checkout:final_section_customer_notes"} {include file="views/checkout/components/customer_notes.tpl"} {/hook} {if !$suffix} {assign var="suffix" value=""|uniqid} {/if} {include file="views/checkout/components/terms_and_conditions.tpl" suffix=$suffix}
{if !$is_payment_step}
{include file="buttons/place_order.tpl" but_text=__("submit_my_order") but_name="dispatch[checkout.place_order]" but_id="place_order"}
{if $recalculate && $cart.shipping_required} {/if}
{/if}

{else}

{if $cart.shipping_failed}
    

{__("text_no_shipping_methods")}

{/if} {if $cart.amount_failed}

{__("text_min_order_amount_required")} {include file="common/price.tpl" value=$settings.General.min_order_amount}

{/if}
{include file="buttons/continue_shopping.tpl" but_href=$continue_url|fn_url but_role="action"}

{/if}

I see the line of code between line nr 25 and 31 that you are referring to.

 {if !$is_payment_step}
        
{include file="buttons/place_order.tpl" but_text=__("submit_my_order") but_name="dispatch[checkout.place_order]" but_id="place_order"}

How far up should I move this line of code in this document ?

I have digging in the file final_section.tpl and see this line of code:

{$show_place_order = false}

{if $cart|fn_allow_place_order:$auth}
{$show_place_order = true}
{/if}

{if $recalculate && !$cart.amount_failed}
{$show_place_order = true}
{/if}

{if $show_place_order}

{hook name="checkout:final_section_customer_notes"} {include file="views/checkout/components/customer_notes.tpl"} {/hook} {if !$suffix} {assign var="suffix" value=""|uniqid} {/if} {include file="views/checkout/components/terms_and_conditions.tpl" suffix=$suffix}
{if !$is_payment_step}
{include file="buttons/place_order.tpl" but_text=__("submit_my_order") but_name="dispatch[checkout.place_order]" but_id="place_order"}
{if $recalculate && $cart.shipping_required} {/if}
{/if}

{else}

{if $cart.shipping_failed}
    

{__("text_no_shipping_methods")}

{/if} {if $cart.amount_failed}

{__("text_min_order_amount_required")} {include file="common/price.tpl" value=$settings.General.min_order_amount}

{/if}
{include file="buttons/continue_shopping.tpl" but_href=$continue_url|fn_url but_role="action"}

{/if}

I see the line of code between line nr 25 and 31 that you are referring to.

 {if !$is_payment_step}
        
{include file="buttons/place_order.tpl" but_text=__("submit_my_order") but_name="dispatch[checkout.place_order]" but_id="place_order"}

How far up should I move this line of code in this document ?

You should place it before

{include file="views/checkout/components/customer_notes.tpl"}

Thanks so much.

PS did you guys not have an addon that allows you to pull content from a page and put that content into a block ?

Sure

https://www.ecom-labs.com/ready-to-use-add-ons/cs-cart-pages-content-in-blocks-add-on.html

I tried what you suggested and played around with it but without the desired results.

But let me explain why I was playing with the idea of relocating the SUBMIT MY ORDER button. It is related to other ecommerce platforms that have the finalize my order button closer to the top of the final checkout phase.

We noticed that many of our customers have the expectation that the finalize my order button is either more closer to the top of the site as seen in this one step checkout sample.

See screenshot

[attachment=12766:2017-11-15 20_41_25-One Step Checkout.png]

2017-11-15 20_41_25-One Step Checkout.png

So did you change the location? What result did you receive?

So did you change the location? What result did you receive?

The layout broke out and everything on the left was dropped below. It was a mess so I contacted Louis from CSCartRocks to amend our one step/one page checkout which I had not yet installed.

Thank you for the information. Looks like some tags were not closed correctly

Thank you for the information. Looks like some tags were not closed correctly

Most likely not indeed but since I had to tackle a lot more things I needed a quick fix yet.. also solution for the longterm.

I have my own shortlist of cs cart service providers and although you guys are always on top my list this one I felt needed to be done by the company that we got the one step checkout module from.

70% of visitors us smartphones. Is button position actually important

70% of visitors us smartphones. Is button position actually important

I agree but even on tablets and yes smartphones.

Checkout our new layout Darius, courtesy of CSCartRocks

[attachment=12821:newsecure-checkoutlayout.png]

newsecure-checkoutlayout.png

Sure this looks nice, BUT

sometimes I get orders consisting from 20 - 50 products, so where button would appear then ?

I have made big research regarding checkout modification, checked all addons for that in market, but eventually decided not to change anything.

I like checkout experience in shopify or ebay.

I wish one day cs-cart makes checkout steps or product description elements as separate blocks, so it could be fitted anywhere you want.

Sure this looks nice, BUT

sometimes I get orders consisting from 20 - 50 products, so where button would appear then ?

I have made big research regarding checkout modification, checked all addons for that in market, but eventually decided not to change anything.

I like checkout experience in shopping or ebay.

I wish one day cs-cart makes checkout steps or product description elements as separate blocks, so it could be fitted anywhere you want.

Louis of CSCartRocks is working on that right now as we speak.

Added just 18 products, as you can see submit button is much higher then the end of the products list, so default checkout is better at this point.

checkout2.jpg

Here, check proper really ONE page checkout. All elements fit in to screen. Confirm and pay is floating if you scroll down, but there is no need since all fits nicely

ebay.jpg

Added just 18 products, as you can see submit button is much higher then the end of the products list, so default checkout is better at this point.

Yes but that is not an honest comparison as the default checkout is a multi not a one step one page checkout. But I see the merits, However in this default case you offer just a few payment option, we more multiple.(perhaps too many)

Here, check proper really ONE page checkout. All elements fit in to screen. Confirm and pay is floating if you scroll down, but there is no need since all fits nicely

Okay but here you have only ONE item, you spoke of multiple items

Okay but here you have only ONE item, you spoke of multiple items


I mean in ebay submit order is not affected by product amount. You do not need to do any scrolling down

I mean in ebay submit order is not affected by product amount. You do not need to do any scrolling down

I agree with that assumption. We will be working on that