How to Override a phtml File Using a Custom Module in Magento 2

It is well known that customizing the core Magento 2 functionality is a bad coding practice. Once you upgrade the version, your efforts are in vain. Hence, it is advisable to override a function, class or file, as per the requirement.

Here, I’ll show you how to override a phtml file using a custom module in Magento 2.

There are two methods to do so as mentioned below:

Methods to Override a phtml file using a custom module in Magento 2:

Create registration.php file in app\code\[Vendor]\[Namespace]\

<?php
        \Magento\Framework\Component\ComponentRegistrar::register(
            \Magento\Framework\Component\ComponentRegistrar::MODULE,
            '[Vendor]_[Namespace]',
            __DIR__
        );

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::MODULE,

'[Vendor]_[Namespace]',

__DIR__

);

Create module.xml file in app\code\[Vendor]\[Namespace]\etc

<?xml version="1.0"?>
    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
        <module name="[Vendor]_[Namespace]" setup_version="1.0.0"/>
    </config>

<?xml version="1.0"?>

</config>

Method 1: Override a phtml file using a custom module in Magento 2 with plugin

In this method, we use the method to create plugin in Magento 2

Create di.xml file in app\code\[Vendor]\[Namespace]\etc

<?xml version="1.0"?>
    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
        <type name="Magento\Catalog\Block\Product\View\Type\Simple">
            <plugin name="custom-template" type="[Vendor]\[Namespace]\Plugin\Block\Product\View\Type\Simple" />
        </type>
    </config>

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

</type>

</config>

Create Simple.php file in app\code\[Vendor]\[Namespace]\Plugin\Block\Product\View\Type

<?php
    namespace [Vendor]\[Namespace]\Plugin\Catalog\Block;
    
    class Simple
    {
        public function beforeToHtml(\Magento\Catalog\Block\Product\View\Type\Simple $block)
        {
            $block->setTemplate('[Vendor]_[Namespace]::product/view/type/default.phtml');
        }
    }

<?php

namespace [Vendor]\[Namespace]\Plugin\Catalog\Block;

class Simple

{

public function beforeToHtml(\Magento\Catalog\Block\Product\View\Type\Simple $block)

{

$block->setTemplate('[Vendor]_[Namespace]::product/view/type/default.phtml');

}

Method 2: Override a phtml file using a custom module in Magento 2 with xml

Create catalog_product_view_type_simple.xml file in app\code\[Vendor]\[Namespace]\view\frontend\layout

<?xml version="1.0"?>
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <body>        
            <referenceBlock name="product.info.simple">
                <action method="setTemplate">
                    <argument name="template" xsi:type="string">[Vendor]_[Namespace]::product/view/type/default.phtml</argument>
                </action>
            </referenceBlock>
        </body>
    </page>

<?xml version="1.0"?>

<body>

<argument name="template" xsi:type="string">[Vendor]_[Namespace]::product/view/type/default.phtml</argument>

</action>

</referenceBlock>

</body>

</page>

That’s it.

The above example shows how to override a phtml file for product stock status. The default functionality to show out of stock is overridden to display an image.

Follow any of the above method suitable to you.

Please share your doubts on the topic in the Comments section below. I’d be happy to help.

Thank you.

(based on 6 Reviews)

How to Override a phtml File Using a Custom Module in Magento 2

Methods to Override a phtml file using a custom module in Magento 2:

Method 1: Override a phtml file using a custom module in Magento 2 with plugin

Method 2: Override a phtml file using a custom module in Magento 2 with xml

Sanjay Jethva

Leave a Reply Cancel reply