cancel
Showing results for 
Search instead for 
Did you mean: 

Per Product CSS

SOLVED

Per Product CSS

Is there a way built into Magento 2 to add CSS specific to a product?

 

Or is there a way to turn off a specific element on a product page? (i.e. the 'Add to Cart' button for a product that is only sold in store)

1 ACCEPTED SOLUTION

Accepted Solutions

Re: Per Product CSS

@AmagArtwork

 

Yes & Yes. 

 

You can't really add a specific CSS for a particular product but Magento does allow you to apply a different design for different products, CMS blocks and pages. To apply a unique design to a particular product, do the following: 

 

  • Login to Magento
  • Navigate to Products - Catalog - Add new Product
  • On the next page, you can select the custom layout from the drop down. Screenshot below: custom design.png
  • You can also remove specific elements of the product from the same section. Just put the appropriate XML in the Layout Update XML  section. i.e. to remove Add to Cart for a particular product, just copy paste the following into the text area. 
<!--Remove Add to cart FOR SIMPLE PRODUCT-->
<referenceBlock name="product.info.addtocart" remove="true" /> 

Please accept my answer as a solution if I was able to help. 

Magento Certified Solution Specialist | Lead Magento developer
If this response was helpful to you, consider giving kudos to this post

View solution in original post

3 REPLIES 3

Re: Per Product CSS

@AmagArtwork

 

Yes & Yes. 

 

You can't really add a specific CSS for a particular product but Magento does allow you to apply a different design for different products, CMS blocks and pages. To apply a unique design to a particular product, do the following: 

 

  • Login to Magento
  • Navigate to Products - Catalog - Add new Product
  • On the next page, you can select the custom layout from the drop down. Screenshot below: custom design.png
  • You can also remove specific elements of the product from the same section. Just put the appropriate XML in the Layout Update XML  section. i.e. to remove Add to Cart for a particular product, just copy paste the following into the text area. 
<!--Remove Add to cart FOR SIMPLE PRODUCT-->
<referenceBlock name="product.info.addtocart" remove="true" /> 

Please accept my answer as a solution if I was able to help. 

Magento Certified Solution Specialist | Lead Magento developer
If this response was helpful to you, consider giving kudos to this post

Re: Per Product CSS

@ShoaibRehman89 Do you happen to know what the XML is for the Configurable Product Buy button?

Re: Per Product CSS

@AmagArtwork

 

Sure, here you go but mind it that it will also remove the configurable options: 

 

<!--Removed Add to cart for Configurable products-->
<referenceBlock name="product.info.addtocart.additional" remove="true" /> 
Magento Certified Solution Specialist | Lead Magento developer
If this response was helpful to you, consider giving kudos to this post