5

Theme - Luma

Location - Product detail page

I would like to add my custom class along with "column". Please review below screenshot for more information.

enter image description here

4 Answers 4

6

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.

5
  • 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. Commented 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.
    – Yogesh
    Commented Nov 13, 2017 at 9:51
  • Hello @Yogesh, Thanks For Answer. Your answer is working good. Commented Nov 13, 2017 at 9:56
  • Thank you. Don't forgot do accept & giving plus vote :)
    – Yogesh
    Commented Nov 13, 2017 at 9:57
  • Already voted :) Commented Nov 13, 2017 at 10:08
1

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>
0
0

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{}

-1

If you add below syntax for css then it will apply for product page

.catalog-product-view .columns {

}

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.