How To Replace Header and Footer In Odoo Website

The layout of the website is one of the most important parts of the website's structure. Odoo's Website layout is very simple in structure & we can easily change the pattern of this layout by using the steps mentioned in this blog. Here we can mention step by step process to "Replace Header and Footer in Odoo Website".

When it comes to the success of a website, the most important aspect is the layout of its web pages. A good & interactive website of a company helps to increase the interest of users in their products & increase the reach of the users to the website.

In this blog, we are going to see "How we can Inherit & Replace the Headers & Footers in an Odoo Website".

Replace the Header in Odoo Website

Below is an image, where you can see the default structure of the header on the Odoo website.

Here we have given the template id and inherit id(Module name.default template id of the website)

<template id="replace_header" inherit_id="portal.frontend_layout" name="Header">

​ ​Here we have used xpath for Replacing Header

​​<xpath expr="//nav[@class='navbar navbar-expand-md navbar-light bg-light']" position="replace">

            <div class="container">
              <div class='row' style='margin-top:10px;'>
                <h1>This is your new header.</h1>
                </div>
              </div>
            <hr/>
            <hr/>
        </xpath>
    </template>

After adding the above-mentioned code you can see your custom header

Replace the Footer in Odoo

Now, we will see how we can Replace the Footer in Odoo. Below is given an image, where you can see the default structure of the footer in Odoo Website.

We have inherited the footer just like we inherited the headerof the website.

Here is the code for footer header.

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
    <template id="replace_footer" inherit_id="website.footer_custom" name="Footer">
        <xpath expr="//div[@id='footer']" position="replace">
          <!-- Write here your custom code -->
        </xpath>
    </template>
</odoo>

After adding this Code you can See in below given image that your Footer is Replaced.

After replacing footer we will Create our own Custom Footer

Here we have given template id and inherit id(Module name.default template id of website)

<template id="replace_footer" inherit_id="website.footer_custom" name="Footer">

Here we have used xpath for Replacing Footer.

<xpath expr="//div[@id='footer']" position="replace">

            <div id="footer" class="oe_structure oe_structure_solo" t-ignore="true" t-  if="not no_footer">
                <footer>
                  <hr/>
                  <hr/>
                  <div class="container">
                    <div class='row' style='margin-top:10px;'>
                        <h1>This is your new footer.</h1>
                    </div>
                  </div>
                </footer>
            </div>
        </xpath>
    </template>

After adding this code & upgrading the module, we can see that the footer of our website is changed.

Thus, we can easily replace or customize the header & footer on our website by following these simple steps in Odoo.

Our experienced team of Odoo Developers can assist you and guide you in the Odoo Website Development process. You can also check the Best Odoo Themes provided by Kanak Infosystems. Connect with us if you need any assistance regarding Odoo Website Designing & Development.