Change Add to Cart button in Luma 2 child theme on Magento 2

Magento Asked by Fred Faust on December 6, 2020

I have Magento 2.4.1 installed with a custom theme. I have a _theme.less file (themeDirwebcsssource_theme.less), where I changed the button color to:

@button-primary__active__background: @color-black;

But the button color is still the default blue Luma color.

2 Answers

you can try this way ..

app/design/frontend/Theme/Packagename/web/css/source/_theme.less file with the following code:

//  Primary button
 @button-primary__color: @color-white;
 @button-primary__hover__color: @color-white;
 @button-primary__background: @color-orange-red1;
 @button-primary__hover__background: @color-orange-red4;
 @button-primary__border: 1px solid @color-orange-red2;
 @button-primary__hover__border: 1px solid @color-orange-red2;

After use this command step by step

rm -rf var/cache/* var/generation/* var/page_cache/* var/view_preprocessed/*

rm -rf var/cache/* generated/*

php bin/magento setup:static-content:deploy -f

Answered by Rakesh Donga on December 6, 2020

Simplest way to extend parent styles To extend the parent theme’s styles in your theme:

In your theme directory, create a web/css/source sub-directory. Create a _extend.less file there. The path to it looks like following:

│  ├── web/
│  │   ├── css/
│  │   │   ├── source/
│  │   │       ├──_extend.less

Add your Less code in this file.

Extending a theme using _extend.less is the simplest option when you are happy with everything the parent theme has, but want to add more styles.


To use your custom file create the in your theme web/css/source/_extend.less and:

@import 'themeDirwebcsssource_theme.less';

Answered by Stevie-Ray Hartog on December 6, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP