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…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1024","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_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