2

I created a custom module that overrides the addtocart.phtml file. In that module, I also created a css file. Here is what I did:

Here is my layout - catalog_product_view.xml:

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Vendor_Module::css/style.css"/>
    </head> 
    <body>
        <referenceBlock name="product.info.addtocart">
            <action method="setTemplate">
                <argument class="Magento\Catalog\Block\Product\View" name="template" xsi:type="string">Vendor_Module::product/view/addtocart.phtml</argument>
            </action>
        </referenceBlock>
        <referenceBlock name="product.info.addtocart.additional">
            <action method="setTemplate">
                <argument class="Magento\Catalog\Block\Product\View" name="template" xsi:type="string">Vendor_Module::product/view/addtocart.phtml</argument>
            </action>
        </referenceBlock>
    </body>
</page>

and then I put the style.css in /Vendor/Module/view/frontend/web/css

I thought that in this case the css file could be visible ONLY in the module, but it is not. How can I make it visible ONLY in that phtml file? I mean, I want the css to be able to edit ONLY the files into the module.

Is it possible?

Thanks

Improve this question

1 Answer 1

Reset to default
2

You cant make css visible only in a phtml file or only in a module because it gets loaded globally. However, you can continue to include it globally but limit the scope of its effect.

For example, you could add a css class to the outermost element in your template. 

<div class="module-outermost-element">
    <div class="something">my stuff</div>
    <div class="something">more of my stuff</div>
</div>

Then in your css, prepend all of your css like this

.module-outermost-element .something {
    background-color: #00FF00;
    /* more css here */
}

On another note, it's not best practice to include the css directly in the head the way you are doing it. That adds additionall http requests to an already heavy-on-requests page load. You should use LESS so it's compiled and included with Magento's css.

You can do so by including your code in Vendor/Module/web/css/source/_module.less. This file will get included automatically.

Update in response to question posted in comments. To add that css only for specific products:

  • Go the product edit page for each product
  • Scroll down to the Design section
  • Add your css include in the Layout Update XML section as shown in the screenshot below

Improve this answer
14
  • Mmm, I understand. And how can I solve my issue? I created the custom module only for certain products. How can I use that css ONLY for those products?
    – Gerardo Siano
    Oct 5, 2019 at 19:49
  • That one is easy. Updating my answer momentarily.
    – Shawn Abramson
    Oct 5, 2019 at 19:50
  • Answer updated.
    – Shawn Abramson
    Oct 5, 2019 at 19:56
  • Oh wow, didn't know that. Still it is not the best thing to do actually since I have something like 20-30 products and I would have more. Is there a faster way?
    – Gerardo Siano
    Oct 5, 2019 at 21:16
  • It actually is the best way. You can probably do it in bulk from the product grid. Use the checkboxes and select “Update Attributes”. The field should be there I think
    – Shawn Abramson
    Oct 5, 2019 at 21:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.