0

i want to add custom css to only checkout index page but it seems not working

tried below steps

1: created css file /usr/share/nginx/html/app/design/frontend/package_name/theme_name/Magento_Checkout/web/css/checkout.css

2: update code of checkout_index_index.xml app/design/frontend/colora/colora_home2/Magento_Checkout/layout/override/checkout_index_index.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">


    <head>
        <css src="css/checkout.css"  src_type="url" rel="stylesheet" type="text/css"  />
    </head>

still checkout.css is not getting called on URL : checkout/#payment

please let me know what i am missing

Improve this question
0

1 Answer 1

Reset to default
0

I was able to do this in my local test environment. Here are my steps:

Inside your theme create a new layout file: app/design/frontend/Vendor/theme/Magento_Checkout/layout/checkout_index_index.xml

Inside that file I added this layout update:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Magento_Checkout::css/custom-checkout.css"/>
    </head>
</page>

I then created a CSS file here:

app/design/frontend/Vendor/theme/Magento_Checkout/web/css/custom-checkout.css

I added in some test CSS inside:

.opc-progress-bar {
    background: #000000;
}

Be sure to deploy your static content and flush the cache.

I hope this helps!

Improve this answer

Your Answer

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

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