0

I need to apply this code to checkout page:

.header-wrapper-content.sticky-menu.active{display:none;}
.hdmx__contact-button.hdmx__contact-button-right{display:none;}

This hide the sticky menu and the float contact us module from the checkout.

How can I apply this only to the checkout page?

I already tried to create "app/design/frontend/your-store/your-theme/Magento_Checkout/web/css/source/_extend.less"

where "_extend.less" file contains the CSS above, but in this way, the style is applied to the whole site.

I need to have that code only on during checkout.

  • you can only achieve this by specifying your selector – Philipp Sander Sep 17 at 15:06
  • Could you please be more specific? I have not understood your reply. – Silver Sep 17 at 16:38
2
body[class^="checkout"] {
    .header-wrapper-content.sticky-menu.active,
    .hdmx__contact-button.hdmx__contact-button-right {
        display:none;
    }
}

This will only apply the CSS selector to pages that come from actions within the checkout-module

  • It works as expected! – Silver Sep 18 at 13:22
0

1.If your have extend your theme from Luma theme then copy below file,

From : \vendor\magento\theme-frontend-luma\Magento_Checkout\web\css\source\module\checkout\_checkout.less

to 
\app\design\frontend\Package\theme\Magento_Checkout\web\css\source\module\_checkout.less

add your custom css code into this file

2.By adding your custom css file

You can add your custom css file for checkout page only with below step Create custom_checkout.css file into your theme Path

/app/design/frontend/Package/theme/web/css/custom_checkout.css

Call your custom css in <head> tag of the  XML layout handles of the checkout page 

File:Path : \app\design\frontend\Package\theme\Magento_Checkout\layout\checkout_cart_index.xml

Put below code ino above XML file.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
            <head>
                   <css src="css/custom_checkout.css" />
            </head>
    </page>
  • The point 2 is not working, the custom CSS is applied to the whole site, home page too.. I'm going to test the point 1 and let you know. – Silver Sep 18 at 12:14
  • Nor the point 1 working, it apply the styles all over the website. – Silver Sep 18 at 13:11

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.