0

I Need to add a CSS for checkout page, the css file should load only in checkout page alone it should not render for any any other pages. How should add the CSS file in the Magento 2.4.2.

Improve this question

2 Answers 2

Reset to default
4

If CSS is merged then, that merged css will call in all page. Otherwise, you can add css in checkout_index_index.xml file :

<head>
        <css src="Magento_Checkout::css/customcheckout.css"/>
</head>

File should be available on

app/design/frontend/VendorName/ThemeName/Magento_Checkout/web/css/customcheckout.css

And in css file add .checkout-index-index class before all css's class name. So, that css only apply on checkout page.

Suggestion : Instead of create css file. Add css in less file.

Improve this answer
4

Create "checkout_index_index.xml" file in module Vendor_Module/view/frontend/layout/checkout_index_index.xml add below code in it.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/custom.css" rel="stylesheet" type="text/css"  />
    </head>
</page>

Add css file in Vendor_Module/view/frontend/web/css/custom.css

You can also add in theme

Create 'css file'

app/design/frontend/VendorName/ThemeName/web/css/custom.css

Add into layout file if available already or create a new one

app/design/frontend/VendorName/ThemeName/Magento_Checkout/layout/checkout_index_index.xml

Then run below commands and check:

php bin/magento setup:static-content:deploy

php bin/magento cache:clean
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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