How to Change Product View Page Layout Based on Price in Magento 2?

June 18, 2020

Today, we’re going to teach you guys how to change product view page layout according to the price in Magento 2.

Many times, customers want the set the product view page layout according to their prices. But unfortunately, Magento 2 doesn’t provide an in-built option to change product view page layout based on price.

In order to do that, you’ll have to perform small customization in the backend of your Magento 2 store.

And in this tutorial, we will show you exactly how to add the customization to change product view page layout according to the price in Magento 2.

Steps to Change Product View Page Layout According to Price in Magento 2

Here’s the step-by-step process to change the product page layout in Magento 2.

Step #1

First of all, we will have to create a di.xml file to add the plugin in app/code/MD/Helloworld/etc/frontend/ directory and add the following code into the file.

<?xml version="1.0"?>
<!--
/**
 * Created By : MageDelight Pvt. Ltd.
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
   <type name="Magento\Catalog\Controller\Product\View">
      <plugin name="MD_Helloworld::change_product_view" type="MD\Helloworld\Plugin\Catalog\Controller\Product\View" sortOrder="1" />
   </type>
</config>

Step #2

Next, we will also have to create a View.php file for the plugin in the app/code/MD/Helloworld/Plugin/Catalog/Controller/Product/ directory and copy the following code in the file.

<?php
/**
 * Created By : MageDelight Pvt. Ltd.
 */
namespace MD\Helloworld\Plugin\Catalog\Controller\Product;
use Magento\Framework\Controller\ResultInterface;
use Magento\Framework\App\RequestInterface;
use Magento\Catalog\Api\ProductRepositoryInterface;
use Magento\Store\Model\StoreManagerInterface;
use Magento\Framework\Exception\NoSuchEntityException;
class View
{
    /**
     * @var RequestInterface
     */
    private $request;
    /**
     * @var ProductRepositoryInterface
     */
    private $productRepository;
    /**
     * @var StoreManagerInterface
     */
    private $storeManager;
    /**
     * @param RequestInterface           $request
     * @param ProductRepositoryInterface $productRepository
     * @param StoreManagerInterface      $storeManager
     */
    public function __construct(
        RequestInterface $request,
        ProductRepositoryInterface $productRepository,
        StoreManagerInterface $storeManager
    ) {
        $this->request = $request;
        $this->productRepository = $productRepository;
        $this->storeManager = $storeManager;
    }
    public function afterExecute(\Magento\Catalog\Controller\Product\View $subject, $resultPage)
    {
        if ($resultPage instanceof ResultInterface)

        {
            $productId = (int) $this->request->getParam('id');
            if ($productId)
            {
                try
                {
                    $product = $this->productRepository->getById($productId, false, $this->storeManager->getStore()->getId());
                    if ($product->getFinalPrice() <= 100)
                    {
                        $pageConfig = $resultPage->getConfig();
                        $pageConfig->setPageLayout('2columns-right'); //Set your page layout here.
                    }
                }
                catch (NoSuchEntityException $e)
                {
                    // Add you exception message here.
                }
            }
        }
        return $resultPage;
    }
}

In the above plugin file, you’ll need to set your desired layout in the setPageLayout().

But in our example, we will set the product page layout to be displayed 2 columns-right if the product price is less than or equal to 100.

So, once you set your desired layout, the last thing you need to do is clean the cache and check the output.