Theme - Luma
Location - Product detail page
I would like to add my custom class along with "column". Please review below screenshot for more information.
Add a comment
|
4 Answers
Its come from this location of file path vendor/magento/module-theme/view/base/page_layout/empty.xml where you are able to that class columns. its common for all layout page.
<container name="columns" htmlTag="div" htmlClass="columns">
<container name="main" label="Main Content Container" htmlTag="div" htmlClass="column main"/>
</container>
For only product detail page , you need to add below code in your catalog_product_view.xml
<referenceContainer name="columns" htmlClass="columns add-your-class" />
htmlClass="columns add-your-class" used for adding class for div tab in Magento2.
-
Hello @Yogesh, Your solution if working perfect, But It's class display all page. I have required only product detail page. Thanks for the answer. Nov 13, 2017 at 9:49
-
Hello @Vishal , I have specified in answer , for particular product you can find your self and update answer if i will get free time i will do.– YogeshNov 13, 2017 at 9:51
-
-
-
As you want to add this class only on product view page, you have to add below code in your catalog_product_view.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" >
<body>
<referenceContainer name="columns" htmlClass="columns customClass" />
</body>
</page>
You could change it in following file.
\vendor\magento\module-theme\view\base\page_layout\empty.xml
However its not recommended, You could use the parent class like catalog-product-view .some-custom-class{}
If you add below syntax for css then it will apply for product page
.catalog-product-view .columns {
}
Teja Bhagavan Kollepara
3,8065 gold badges32 silver badges66 bronze badges
answered Nov 13, 2017 at 9:48