Skip to content
  • LinkedIn
  • Twitter
  • Facebook

Desssigner.in

Aryan Srivastava | Adobe Commerce Certified Developer | Magento Tutor

  • Home
  • About Me
  • Contact
  • Toggle search form
How to Override Files in Magento 2_

How to Override Files in Magento 2?

Posted on June 28, 2021August 26, 2021 By Aryan Srivastava No Comments on How to Override Files in Magento 2?

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:

  1. How to Create Theme in Magento 2
  2. How to Create Layout in Magento 2

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?

  1. File Location for variables
  2. 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:f

How 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:f

Note: 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.


Reference Links :

  1. https://devdocs.magento.com

Post Views: 1,343
How To?, Magento, Magento Theme, Magento2 Tags:File override, Frontend, Magento Tutorial, Magento2

Post navigation

Previous Post: How to Create Custom Module in Magento 2
Next Post: How to Display Products by Custom Attribute in Magento 2?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Command list Customer Dashboard Custom Module File override Frontend How to Layout Logout link Magento Magento2 Magento2 Cheat Sheet Magento Tutorial Product Page Theme Tutorial View.xml

CERTIFICATION DIRECTORY

Adobe Commerce Front-End Developer

Adobe Certified Professional - Adobe Commerce Front-End Developer

Adobe Certified Expert-Adobe Commerce Front-End Developer

Copyright © 2023 Desssigner.in.

Powered by PressBook WordPress theme

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.
Cookie SettingsAccept All
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT