Hide "Enroll" button for Power Users on ecommerce courses via CSS

  • 26 May 2021
  • 6 replies
  • 166 views

Userlevel 6
Badge +2

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!


6 replies

Userlevel 7
Badge +5

@elamast Thank you so much for this!!! (sending you all the virtual high fives). 

We have a ticket open with Docebo right now because of this issue, and they have let us know that they are working on it. But in the mean time, we are potentially losing revenue because power users can simply enroll into our pay courses.  if we can hide the enroll button for now, that would be so great!!

 

Userlevel 7
Badge +3

This is awesome. Thank you for sharing @elamast! Here is some additional information about an update coming soon from our Product Updates page that might help you both! 

 

HEADS UP! Course enrollment button visibility update for Power Users

For those using the Power Users app, please note that starting on August 19, 2021, in order for Power Users to be able to see the Enrollment button for courses,  the profile they are assigned must have both Enrollment and View permissions enabled for courses.

Userlevel 7
Badge +5

This is awesome. Thank you for sharing @elamast! Here is some additional information about an update coming soon from our Product Updates page that might help you both! 

 

HEADS UP! Course enrollment button visibility update for Power Users

For those using the Power Users app, please note that starting on August 19, 2021, in order for Power Users to be able to see the Enrollment button for courses,  the profile they are assigned must have both Enrollment and View permissions enabled for courses.

Thank you for sharing @Adam Ballhaussen

Hi @elamast . Although this post is a year old just wanted to give a quick thank you for this post. My team had spent far too many hours trying to find a solution for our subscription workflows (we needed to prevent users from enrolling freely into learning plans) and removing the enroll button through CSS did the trick. Thanks a ton! 

Userlevel 6
Badge +2

Hi @elamast . Although this post is a year old just wanted to give a quick thank you for this post. My team had spent far too many hours trying to find a solution for our subscription workflows (we needed to prevent users from enrolling freely into learning plans) and removing the enroll button through CSS did the trick. Thanks a ton! 

 

You’re welcome!

Userlevel 1

Thank you so so much @elamast  for sharing this. The out-of-the-box configuration was a major blocker for our launch and we spent many hours solutioning some non-so-nice work arounds. We are so happy we stumbled on your post as this was exactly what we were looking for! 

We are very happy that the Docebo Community is very supportive and appreciate the learn and shares posts! 😁

Reply