Course page with multiple registration options
I'm designing a website where people register for courses (online or physical/in-class). The difference with other websites is that every course may have multiple registration options (multiple sign-up buttons).
For example, the course "Cooking in 30 days" has three options:
- Class A - Mondays - $40
- Class B - Sundays - $40
- Class C (Online) - Fridays - $35
Currently, this is how I am doing it:
- Users will Immediately see all options (no extra clicks)
- Users can compare options
- The page looks empty when only one option is available
- I can't make the signup button or card sticky (so it stays when user scrolls). The alternative I can think of is an anchor link to signup cards section like a "back to top" button.
- Can make Signup card sticky
- Users can't compare options easily
- Some users (especially because we have some eldery customers) may not understand how those buttons (< and >) work
Mobile Version of both
Which one do you think is better (and why)? Also, do you know examples of other websites doing this? I searched dribble, Google and visited some learning websites I knew like udemy, LinkedIn learning, ... but couldn't find a design for "multiple" options.
You can't make the cards sticky but you can put the price table in a block and make it sticky. https://codepen.io/tutsplus/pen/abojPjP . It even fixes the other problem, if there is only one price, the price row can take up the whole width of the block.