0

I want to add custom class in Magento 2 category page like in

column main and sidebar sidebar-main

How to add custom class with these class ?

Any help is appreciated.

2
  • where you want to use this ?
    – Amit Bera
    Commented Oct 6, 2020 at 9:42
  • on category page i just want to show sidebar after menu then my all products @AmitBera
    – Prits
    Commented Oct 6, 2020 at 10:38

4 Answers 4

2

Check the relevant page layout, for example:

/vendor/magento/module-theme/view/frontend/page_layout/2columns-left.xml

This contains the column containers like:

<referenceContainer name="columns">
    <container name="div.sidebar.main" htmlTag="div" htmlClass="sidebar sidebar-main" after="main">
        <container name="sidebar.main" as="sidebar_main" label="Sidebar Main"/>
    </container>
    <container name="div.sidebar.additional" htmlTag="div" htmlClass="sidebar sidebar-additional" after="div.sidebar.main">
        <container name="sidebar.additional" as="sidebar_additional" label="Sidebar Additional"/>
    </container>
</referenceContainer>

Replicate layout file in your own theme, like:

/app/design/frontend/<Vendor_Name>/<Theme>/Magento_Theme/page_layout/2columns-left.xml

Add classes in htmlClass accordingly like 'test123' below:

<referenceContainer name="columns">
    <container name="div.sidebar.main" htmlTag="div" htmlClass="sidebar sidebar-main" after="main">
        <container name="sidebar.main" as="sidebar_main" label="Sidebar Main"/>
    </container>
    <container name="div.sidebar.additional" htmlTag="div" htmlClass="sidebar sidebar-additional test123" after="div.sidebar.main">
        <container name="sidebar.additional" as="sidebar_additional" label="Sidebar Additional"/>
    </container>
</referenceContainer>

Run commands to compile etc and refresh frontend to check if you see new class.

This is tested and works in v2.3.x.

0

I have same requirement for add class on category content, i used htmlClass on content area as below newarrival_custom_category, it works.

For add class on body tag, Use class name attribute after body, the class will be added on body tag of category page.

Ex.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>     
        <attribute name="class" value="newarrival_category"/>
        <referenceContainer name="content" htmlTag="div" htmlClass="newarrival_custom_category">
        ...
        </referenceContainer>
    </body>
    </page>

newarrival_category will be added on category body tag and

newarrival_custom_category will be added on content area.

-1

already custom class add in body tag, you can use that class

https://drops.meetanshi.com/H0s5yj

3
  • Thanks for your response Which class will you please tell me @Jiga
    – Prits
    Commented Oct 6, 2020 at 10:16
  • for every category page its catalog-category-view and for particular category its using class Commented Oct 6, 2020 at 12:00
  • This does not answer the question.
    – zigojacko
    Commented Oct 29, 2020 at 17:50
-1

In your layout or template file, you need to add an attribute to the body tag, like this:

<body>
    <attribute name="class" value="my-css-class"/>
    ...

Hope that Helps

4
  • This does not answer the question.
    – zigojacko
    Commented Oct 29, 2020 at 17:50
  • @zigojacko please add right ans. Commented Oct 29, 2020 at 18:04
  • Answer added @Jigar Patel.
    – zigojacko
    Commented Oct 30, 2020 at 8:56
  • Thanks @zigojacko Commented Oct 30, 2020 at 9:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.