Magento 2 is widely popular among the developers’ community, owing to its insane capability to customize and tweak the default configuration and code.
With increasing online stores and various types of businesses built with Magento 2 as the platform, there ought to be crazy requirements to fulfill customers’ expectations.
Recently, I found myself in the exact same scenario where I was required to add custom CSS class through XML file in Magento 2.
As it is not recommended to completely change the layout of the XML, I preferred the below solution:
Method to add custom CSS class through XML file in Magento 2:
The below example is to add CSS class in the product page:
Override catalog_product_view.xml to your custom theme using the method here.
Add the below code:
1 2 3 4 5 6 7 | <?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="product.info.media" htmlClass="custom col-lg-4 col-md-12 col-sm-12 product media" /> </body> </page> |
Removing blocks and adding custom CSS/HTML classes are the usual requirements during store development. So, please bookmark this solution which is surely going to help you someday!
Also, if you have any doubts, just mention them in the Comments section below 🙂
I would be happy to help.
Feel free to share the solution with the Magento community via social media.
Thank You.
Get Weekly Updates
Never miss Magento tips, tricks, tutorials, and news.
Thank you for subscribing.
Something went wrong.
