Magento 2 is widely popular among the developers\u2019 community, owing to its insane capability to customize and tweak the default configuration and code.<\/p>\n\n\n\n
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\u2019 expectations.<\/p>\n\n\n\n
Recently, I found myself in the exact same scenario where I was required to add custom CSS class through XML file in Magento 2<\/strong><\/em>.<\/p>\n\n\n\n As it is not recommended to completely change the layout of the XML, I preferred the below solution:<\/p>\n\n\n\n The below example is to add CSS class in the product page:<\/p>\n\n\n\n Add the below code:<\/p>\n\n\n\n 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!<\/p>\n\n\n\n Feel free to share the solution with the Magento community via social media.<\/p>\n\n\n\n Thank You.<\/p>\n\n\n\n Also Read:<\/strong><\/p>\n\n\n\n Magento 2 is widely popular among the developers\u2019 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\u2019 expectations. Recently, I found myself in the […]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1024","post","type-post","status-publish","format-standard","hentry","category-magento"],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1024","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=1024"}],"version-history":[{"count":3,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1024\/revisions"}],"predecessor-version":[{"id":14895,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1024\/revisions\/14895"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1024"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1024"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1024"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Method to add custom CSS class through XML file in Magento 2:<\/h2>\n\n\n\n
<?xml version=\"1.0\"?>\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n <body>\n <referenceContainer name=\"product.info.media\" htmlClass=\"custom col-lg-4 col-md-12 col-sm-12 product media\" \/>\n <\/body>\n<\/page><\/pre>\n\n\n\n
\n