If I see an element such as this in the code, how do I work out what to put in my less file to override the CSS used on it?

button id="bundle-slide" class="action primary customize" type="button"

I believe the background color for this one would be: @button-primary_background

  • 4
    I'm voting to close this question as off-topic because it is not related to magento, this is a CSS/Less only question that would be better suited to Stack Overflow.
    – Ben Crook
    Commented Apr 7, 2020 at 13:26
  • Given that this is specifically about the implementation on a Magento site where the naming of the CSS elements is determined in Magento and guidance on how to determine what name Magento has given to an element I would suggest that 'knowing' or learning how to determine what that name is MUST be a Magento specific issue
    – diddydave
    Commented Apr 8, 2020 at 13:08

1 Answer 1


Suppose you want to change background of bundle product button then write down below style in your less file

.bundle-actions {
    .action.primary.customize {
        background-color: @button-background;
  • Thank you, this was the code I had found. What I do not know is how to determine, from looking at the source code of a page how to work out the various selectors... i.e. are "bundle-actions" and ".action.primary.customize" noted in the HTML/CSS code and if so is there a method for determining what that is from it?
    – diddydave
    Commented Apr 8, 2020 at 13:09
  • So, in the code I gave I can see that .action.primary.customize is identical to the class. But is it just the first word of the ID (without the -slide) followed by '-actions'?
    – diddydave
    Commented Apr 8, 2020 at 13:15

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.