In this tutorial series, I will explain how to override files in Magento 2. If we are working on a custom theme, we may need to override the files as per requirement. We can override module’s or parent’s theme template, layout, or web (less, js, etc).
You may also like this article:
How to override template files in Magento 2?
In Magento 2, for the template file, we place it /app/design/frontend/<vendor>/<theme>/. For example, I need to make a change to the login page so I will override login.phtml in our theme.
The original file path for login.phtml is:
/vendor/magento/module-customer/view/frontend/templates/form/login.phtml
Override in our theme:
/app/design/frontend/<vendor>/<theme>/Magento_Customer/templates/form/login.phtml
In my case, vendor is Aryan and theme is Tutorial.
app/design/frontend/Aryan/Tutorial/
├── Magento_Customer/
│ ├── templates/
│ │ ├── form/
│ | | ├── login.phtml
Now, login.phtml is overridden in theme. you can check it by enabling Template Path Hints
How to override predefined variables in Magento 2?
In Magento, there are already predefined variables for components (like button background, links, border, etc.). Here what I will show you is?
- File Location for variables
- Override variable in theme
File location for variables:
By default, files are stored in lib/web/css/source/lib/variables/
Note: Predefined variables for each mixin in variables file.
lib/web
├── css/
│ ├── docs/ (Library documentation)
│ ├── source/
│ │ ├── lib/ (Library source files)
| | | ├── variables/ (Predefined variables for each mixin)Override variable in theme:
For overriding variable in theme, we need to add _theme.less file under /app/design/frontend/Aryan/Tutorial/web/css/source/
For example, I need to change background color of page and theme primary color.
Default values:
@theme__color__primary: @color-blue1;
@page__background-color: @color-white;
Content of _theme.less for changing variables value
@theme__color__primary: #222222;
@page__background-color: grey;How to include custom CSS/LESS file?
If we are creating a new theme, we just need to add extra CSS code to the design as per our requirements. We can do this with two methods one is LESS and another one is CSS. If you have no idea about LESS, don’t worry you can use CSS File to design your page.
How to add custom CSS file in theme?
First declare css file in default_head_blocks.xml ( it will include for all pages) under app/design/frontend/Aryan/Tutorial/Magento_Theme/layout/
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/custom.css"/>
</head>
</page>Now, create custom.css in app/design/frontend/Aryan/Tutorial/web/css/.
app/design/frontend/Aryan/Tutorial/ ├── web/ │ ├── css/ │ │ ├── custom.css
Deploy and clear cache
$ php bin/magento s:s:d -f
$ php bin/magento c:fHow to add custom LESS file?
First we create _custom.less file app/design/frontend/Aryan/Tutorial/web/css/source/. We will do our code in this file. But we need to import this file in _source.less file
app/design/frontend/Aryan/Tutorial/web/css/source/_source.less
@import '_custom.less';Now execute commands
$ php bin/magento s:up
$ php bin/magento s:s:d -f
$ php bin/magento c:fNote: If you do not want to add a custom LESS file so you can do your change in app/design/frontend/Aryan/Tutorial/web/css/source/_extend.less file.
Hope this article helped you to understand the file override concept. If you have any queries, you can ask me directly over email at aryansrivastavadesssigner@gmail.com or contact me here.
If you want a live session, do direct ping me on LinkedIn I will arrange an online session on weekends.
If you like this article, you can buy me a cup of coffee Buy me a Coffee.
