Header and footer not shown in the checkout.tpl page

[Burak KAYMAKCI]

Hi,

Everything is working fine so far except that when I add some products to my basket then proceed to the checkout page, the header and footer are not shown properly.

How can I fix this ? Isn't the checkout page called "checkout.tpl"?

Here are two SS from index page and checkout page.

 

 

Thank you .

Edited April 13, 2018 by Burak KAYMAKCI (see edit history)

[asperon]

you need to copy  header and footer tpl files in checkout folder go to themes/classic/templates/_partials and copy header.tpl and footer.tpl files paste them into /themes/classic/checkout/_partials and override existing files

Edited April 15, 2018 by asperon (see edit history)

[Burak KAYMAKCI]

14 minutes ago, asperon said:

you need to copy  header and footer tpl files in checkout folder go to themes/classic/templates/_partials and copy header.tpl and footer.tpl files paste them into /themes/classic/checkout/_partials and override existing files

 

Wow, now everything works! I didn't know that. Thank you so much.

[asperon]

2 minutes ago, Burak KAYMAKCI said:

 

Wow, now everything works! I didn't know that. Thank you so much.

np bro glad to help you

[tobyisabelle]

Hi! When i was in the checkout part of my site, the footer and header did not show at all. I used your tip above and it shows now but doesnt show right. 

 

The first image is how it should look, while the second one is how it shows now. 

 

I would greatly appreciate any advise on how to fix it so it looks like it does in the home page. 

[DARKF3D3]

That's not a bug. It's correct that on checkout header and footer are different from rest of the website.

I think PS team do this because a lot of tests made demostrated that help increasing conversion, because removing unnecessesary things reduce customer distractions.

[tobyisabelle]

Hi, thanks for your input! : )

 

The reason why i put the header back was because if the header was not there, and i (or a customer) was trying to checkout and wanted to make a change to the order .... add quantities/ delete something for eg. ..... there was no way to go back to the shopping cart. With the header there, i could click on the shopping cart again to make the changes i wanted. 

 

If the header is not meant to be there, could you suggest another way to go back to the shopping cart from the checkout page?

Edited August 21, 2018 by tobyisabelle (see edit history)

[ican]

On 8/18/2018 at 1:12 AM, tobyisabelle said:

Hi! When i was in the checkout part of my site, the footer and header did not show at all. I used your tip above and it shows now but doesnt show right. 

 

The first image is how it should look, while the second one is how it shows now. 

 

I would greatly appreciate any advise on how to fix it so it looks like it does in the home page. 

 

Your header of checkout page looks different than another pages because of this style sheet of default theme.

body#checkout #header .header-nav {

    max-height: none;
    padding: 5rem 0 .9375rem;
    border: none;
    margin-bottom: 0;
    box-shadow: 2px 2px 8px 0 rgba(0,0,0,.2);

}

You have to override it.

[El Patron]

hiding the header and footer is 'new design' method used by ecommece,  the idea (proven) and being adopted in many high end ecommerce shops.

The idea  is to remove unnecessary links that can result in visitor not completing checkout.  

In fact ecommerce is moving to headerless pages to improve above the fold render.  see walmart.com

[ican]

14 hours ago, El Patron said:

hiding the header and footer is 'new design' method used by ecommece,  the idea (proven) and being adopted in many high end ecommerce shops.

The idea  is to remove unnecessary links that can result in visitor not completing checkout.  

In fact ecommerce is moving to headerless pages to improve above the fold render.  see walmart.com

 

But there shoplud vbe link of back to checkout page if some one wants to edit the order details. Can we add back to checkout page link?

[tobyisabelle]

On 20/08/2018 at 10:06 PM, El Patron said:

hiding the header and footer is 'new design' method used by ecommece,  the idea (proven) and being adopted in many high end ecommerce shops.

The idea  is to remove unnecessary links that can result in visitor not completing checkout.  

In fact ecommerce is moving to headerless pages to improve above the fold render.  see walmart.com

Hi! Walmart does have a very clean checkout page. I do agree that it's less distracting to customers. However, they do have a shopping cart icon at the top while Prestashop only has the Logo and a Contact Us link. I personally feel that a shopping cart link/ icon is essential in the checkout page. If I was a customer and wanted to make a change but could not find the link to do so, i would most likely give up and abandon the purchase.  I would actually prefer to have  a header-less and footer-less checkout but want to add the shopping cart icon in the header like in the walmart checkout page (image attached). Could anyone advise on how i could achieve this? TIA!

[ican]

4 minutes ago, tobyisabelle said:

Hi! Walmart does have a very clean checkout page. I do agree that it's less distracting to customers. However, they do have a shopping cart icon at the top while Prestashop only has the Logo and a Contact Us link. I personally feel that a shopping cart link/ icon is essential in the checkout page. If I was a customer and wanted to make a change but could not find the link to do so, i would most likely give up and abandon the purchase.  I would actually prefer to have  a header-less and footer-less checkout but want to add the shopping cart icon in the header like in the walmart checkout page (image attached). Could anyone advise on how i could achieve this? TIA!

 

I agree with you. Does any have any solution that how can we implement it?

[tobyisabelle]

hi! Still hoping for any advice on how to add a link back to the shopping cart. : )

[ican]

On 8/28/2018 at 9:58 PM, tobyisabelle said:

hi! Still hoping for any advice on how to add a link back to the shopping cart. : )

Put the below code

<a href="{$urls.pages.cart}" class="btn btn-primary"><i class="material-icons rtl-no-flip">&#xE876;</i>{l s='Back to Shopping Cart' d='Shop.Theme.Actions'}</a>

 

in the   \templates\checkout\_partials\cart-summary.tpl file after the

{block name='cart_summary_totals'}
    {include file='checkout/_partials/cart-summary-totals.tpl' cart=$cart}
{/block}

 

I hope it will works.

 

[jucedupp]

On 8/20/2018 at 4:06 PM, El Patron said:

hiding the header and footer is 'new design' method used by ecommece,  the idea (proven) and being adopted in many high end ecommerce shops.

The idea  is to remove unnecessary links that can result in visitor not completing checkout.  

In fact ecommerce is moving to headerless pages to improve above the fold render.  see walmart.com

What is truly annoying is that Prestashop seems to think they should make these kind of decsions on behalf of us and our customers.  I do not care what Prestashop thinks is proven.  I have a customer that is HEAVILY invested into this platform, and these unilateral decisions are not what customers want.  Now, when complaining about these (frankly, stupid) decisions, we are told "It's opensource, if you don't like it, move on." 

[El Patron]

2 hours ago, jucedupp said:

What is truly annoying is that Prestashop seems to think they should make these kind of decsions on behalf of us and our customers.  I do not care what Prestashop thinks is proven.  I have a customer that is HEAVILY invested into this platform, and these unilateral decisions are not what customers want.  Now, when complaining about these (frankly, stupid) decisions, we are told "It's opensource, if you don't like it, move on." 

or one my fav sayings, don't let the door hit you on way out .

you seem to be fighting adoption of 'best practices'.  If you want the header and footer but don't have the skills to readd then you might want to consider getting a team member that can as this is pretty trivial change.  Maybe it does not set well with every shop but for the majority it is good feature.

PS is a bit famous for burning down the house to get the 'best possible platform', things are  moving fast....desktop = mobile etc....

best of luck!

[goldies]

For me this worked fine: 

 

you need to copy  header and footer tpl files in checkout folder go to themes/yourtheme/templates/_partials and copy header.tpl and footer.tpl files paste them into /themes/yourtheme/checkout/_partials and override existing files

[koubin]

I guess this is a better, cleaner way:

https://www.sunnytoo.com/7651/use-header-footer-pages-checkout-page-prestashop-1-7