We had a need to make the “Enroll” button disappear for Power Users. We wanted to give customers the ability to manage their own user enrollments in the system, but not to be able to get free classes for the Power User (bypassing the shopping cart). Here was the initial solution in CSS:
/*hide course enroll button*/
[aria-label="Enroll"] {
display:none;
}
However, we also offer some free online tests to the public, and the solution above affected *all* enrollment buttons. The solution to make the “enroll” button selectively disappear was based on CSS siblings:
ui-button-raised-primary + ui-button-raised-primary [aria-label="Enroll"] {
display:none;
}
/*hide course enroll button under shopping cart*/
ui-button-raised-primary + ui-button-raised-primary [aria-label="Enroll"] {
display:none;
}
This CSS allows you to essentially make the “display:none” conditional upon the appearance of the “add to cart” button being above the “enroll” button. I hope this helps someone else!
