Code to show different mode (list or grid mode) for different category

To show categories in a custom way, you need to create a new module and add an attribute considering it as show_mode name. Below is the code for the same:- Firstly you need to add setup/installData.php in your module and add the install function which will create the attribute(Magento 2.1+ version):-


namespace W3solver\Customcategorymode\Setup;

use Magento\Eav\Setup\EavSetupFactory;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;
use Magento\Framework\Setup\InstallDataInterface;

class InstallData implements InstallDataInterface {

    private $eavSetupFactory;

    public function __construct(EavSetupFactory $eavSetupFactory) {
        $this->eavSetupFactory = $eavSetupFactory;

    public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context) {

        $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);
                \Magento\Catalog\Model\Category::ENTITY, 'show_mode', [
            'type' => 'varchar',
            'label' => 'Show Mode',
            'input' => 'select',
            'required' => false,
            'source' => 'W3solver\Customcategorymode\Model\Category\Attribute\Source\Showmode',
            'sort_order' => 102,
            'visible' => true,
            'user_defined' => true,
            'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
            'group' => 'Display Settings',



To view the show mode field in admin panel UI components needs to be created in view/adminhtml/ui_component/category_form.xml

<?xml version="1.0" encoding="UTF-8"?>
    <form xmlns:xsi=""
        <fieldset name="display_settings">
            <field name="show_mode">
                <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">W3solver\Customcategorymode\Model\Category\Attribute\Source\Showmode</item>
                    <item name="config" xsi:type="array">
                        <item name="sortOrder" xsi:type="number">102</item>
                        <item name="dataType" xsi:type="string">string</item>
                        <item name="formElement" xsi:type="string">select</item>
                        <item name="label" xsi:type="string" translate="true">Show Mode</item>

Also add a source model in Model/Category/Attribute/Source/Showmode.php and write below function:-

 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
namespace W3solver\Customcategorymode\Model\Category\Attribute\Source;

 * Catalog category landing page attribute source
 * @author      Magento Core Team <>
class ShowMode extends \Magento\Eav\Model\Entity\Attribute\Source\AbstractSource
     public function getAllOptions()
        if (!$this->_options) {
            $this->_options = [
                ['value' => \Magento\Catalog\Helper\Product\ProductList::VIEW_MODE_LIST, 'label' => __('List')],
                ['value' => \Magento\Catalog\Helper\Product\ProductList::VIEW_MODE_GRID, 'label' => __('Grid')],
        return $this->_options;

Now you need to override list.phtml file in frontend/layout/catalog_category_view.xml

<page xmlns:xsi="" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referenceBlock name="category.products.list" template="W3solver_Customcategorymode::product/list.phtml"/>

Now you need to change the product listing code, add a file in view/frontend/templates/product/list.phtml
Add the code on line number 28

 $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $category = $objectManager->get('Magento\Framework\Registry')->registry('current_category');//get current category
    if ($category->getShowMode() == 'list') {
        $showGrid = 'list';
    } else {
        $showGrid = 'grid';

    if ($showGrid == 'grid') {
        $viewMode = 'grid';
        $image = 'category_page_grid';
        $showDescription = false;
        $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
    } else {
        $viewMode = 'list';
        $image = 'category_page_list';
        $showDescription = true;
        $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::FULL_VIEW;


  1. Hi – is a field supposed to be created in the database? I am not seeing a new column in any table although I do see the field in admin. It is not working for me i.e. the selected attribute in admin is not being applied and possibly because I am missing a database field? (Magento 2.1.4) Thanks


Leave a Comment.