Grow Your Business
Promote Your Product

Got a product, service, or story to share? Promote it directly to our active community and boost your brand today.

Create an Ad

Content & SEO Promotion
Publish Bulk Blog Posts
Boost Your Reach! 📝

Have articles, guest posts, or bulk stories to publish? Send your content directly to our editorial team and feature on our platform.

Email Us Your Posts

A Complete Technical Guide to Editing Existing Web Pages in Odoo 19

0
2K

Modifying existing web pages in Odoo 19 is an essential capability for businesses that want to deliver a customized, engaging, and brand-aligned online presence. Whether you’re enhancing the homepage, adjusting product pages, or adding new dynamic sections, Odoo’s website framework provides a flexible structure built on QWeb templates, controllers, and views.

For an ERP Implementation Consultant, these customization techniques are vital, as clients often require tailored websites that still remain safe during upgrades and maintainable in the long run. Odoo achieves this through a clean inheritance system that allows modifications without altering core code.

Understanding How Web Pages Work in Odoo 19

The website module in Odoo 19 is powered by:

  • QWeb templates that define structure

  • Controllers that manage data and routing

  • Views that determine how elements appear

  • Assets (CSS/JS) that style and enhance the pages

When modifying any existing web page—like the homepage (website.homepage) or shop page (website_sale.products)—you must inherit the template rather than rewrite it. This ensures:

  • Compatibility with future Odoo updates

  • Clean separation of custom logic

  • Maintained core functionality

This guide walks through a practical example: adding a fully dynamic “Top Selling Products” section to the homepage using a custom module.


Step 1: Build a Custom Module Structure

To modify templates programmatically, you first create a dedicated Odoo module. This keeps changes organized and prevents direct edits in the Odoo core.

Folder Structure:

custom_website_mods/ │-- __init__.py-- __manifest__.py-- models/ │ ├── __init__.py │ └── product_template.py │-- controllers/ │ ├── __init__.py │ └── main.py └-- views/ └── homepage_templates.xml

Module Initialization Files

__init__.py (root):

 
from . import models, controllers

models/__init__.py:

 
from . import product_template

controllers/__init__.py:

 
from . import main

Module Manifest

The manifest controls dependencies and loaded files.

{ 'name': 'Custom Website Modifications', 'version': '19.0.1.0.0', 'category': 'Website', 'summary': 'Modify existing web pages through code', 'depends': ['website', 'website_sale'], 'data': [ 'views/homepage_templates.xml', ], 'installable': True, 'auto_install': False, }

Install via:
Apps → Update Apps List → Search “Custom Website Modifications” → Install


Step 2: Extend Models to Add Custom Product Fields

To display “Top Selling Products,” you must tag products. You can compute this from sales, but for simplicity, add a boolean field.

models/product_template.py:

from odoo import fields, models class ProductTemplate(models.Model): _inherit = 'product.template' is_top_selling = fields.Boolean( string='Top Selling', help='Mark this product as top-selling for homepage display.' )

This inheritance ensures that you never modify Odoo’s default product model directly.


Step 3: Inherit the Controller to Inject Custom Homepage Data

Controllers handle routing and supply data to QWeb templates.

controllers/main.py:

import odoo.http as http from odoo.http import request from odoo.addons.website.controllers.main import Website class WebsiteTopSelling(Website): @http.route('/', type='http', auth='public', website=True) def index(self, **kw): response = super(WebsiteTopSelling, self).index(**kw) top_products = request.env['product.template'].search([ ('is_top_selling', '=', True), ('website_published', '=', True), ], limit=4, order='sales_count desc') response.qcontext['top_selling_products'] = top_products return response

This override maintains the original homepage behavior while injecting additional data—a safe and recommended approach.


Step 4: Modify the Homepage Template Using QWeb & XPath

Odoo requires modifying templates using inheritance and XPath selectors.

views/homepage_templates.xml:

 
<?xml version="1.0" encoding="UTF-8"?> <odoo> <template id="homepage_top_selling" inherit_id="website.homepage" name="Top Selling Products Section"> <xpath expr="//div[@id='wrap']" position="inside"> <div class="container mt-5 mb-5"> <h2 class="text-center mb-4">Top Selling Products</h2> <div class="row"> <t t-foreach="top_selling_products" t-as="product"> <div class="col-md-3 mb-4"> <div class="card h-100"> <img t-att-src="product.image_1920 or '/web/static/src/img/placeholder.png'" class="card-img-top" alt="Product Image" style="height: 200px; object-fit: cover;"/> <div class="card-body d-flex flex-column"> <h5 class="card-title"><t t-esc="product.name"/></h5> <p class="card-text flex-grow-1"><t t-esc="product.list_price"/> €</p> <a t-att-href="'/shop/product/%s' % product.id" class="btn btn-primary mt-auto">View Product</a> </div> </div> </div> </t> </div> </div> </xpath> </template> </odoo>

This neatly inserts the new product section under the homepage’s main wrapper.


Step 5: Additional Advanced Page Modifications

Modifying Menus

To rename or hide menu items:

<record id="shop_menu_inherit" model="website.menu"> <field name="inherit_id" ref="website_sale.menu_shop_main"/> <field name="name">Products</field> </record>

To hide a menu:

<record id="blog_menu_hide" model="website.menu"> <field name="inherit_id" ref="website_blog.menu_blog_link"/> <field name="is_visible" eval="False"/> </record>

Creating Custom Static Pages

<template id="custom_page" name="Custom Page" page="True"> <t t-call="website.layout"> <div id="wrap" class="container"> <h1>My Custom Page</h1> </div> </t> </template>

Route:

@http.route('/custom', type='http', auth='public', website=True)

Adding Custom CSS/JS

In the manifest:

'assets': { 'web.assets_frontend': [ 'custom_website_mods/static/src/scss/custom.scss', 'custom_website_mods/static/src/js/custom.js', ], },

Conclusion

Modifying existing web pages in Odoo 19 is a powerful way to deliver tailored website features while maintaining upgrade safety. Using Odoo’s inheritance structure—model extensions, controller overrides, and QWeb template inheritance—you can enhance the homepage, adjust product displays, modify menus, or redesign entire layouts without touching the core framework.

For businesses aiming to create a branded, optimized website—or for an ERP Implementation Consultant responsible for building long-term scalable systems—these techniques are essential. As long as you follow Odoo’s best practices, your website remains maintainable, clean, and fully compatible with future Odoo upgrades.

Booking an implementation connsultant today.

Search
Categories
Read More
Home
Lmaoo IPTV Reviews: Reddit Opinions, IPTV Provider Red Flags & What to Check
There does not appear to be enough reliable Reddit evidence to conclude that Lmaoo IPTV is a...
By Jimmy Carter 2026-09-13 06:21:36 0 110
Other
Top Trending ADjewellery Necklace Set for Every Occasion
Top Trending ADjewellery Necklace Set for Every Occasion Jewellery has always been an essential...
By Adjewellery Online 2026-04-03 12:36:57 0 1K
Health
Is TitanV made from natural ingredients?
In today's fast-paced world, many men are looking for ways to support their overall wellness,...
By TitanV Canada 2026-06-23 09:11:51 0 567
Other
Elastomeric Foam Market Forecast Highlights Expanding Opportunities in Asia-Pacific
Market Overview The global elastomeric foam market size was estimated at USD 3.25 billion in...
By Ella Martin 2026-06-26 05:51:06 0 331
Other
The Vital Role Of High Temperature Precision Measurement In Modern Heavy Metallurgy
In heavy industrial manufacturing, precise thermal control is an absolute prerequisite for...
By Black Cat 2026-08-21 10:19:33 0 425
JogaJog https://jogajog.com.bd