How to hide buttons from New Learner Home Page?


How can I hide the upgrade button?

I also need same think. Is there any way to hide Upgrade button?


I’m sure it’s not the best way to do it but I edited the css of learner-dashboard to hide the button.

Step 1) Get the mfe container id:
sudo docker container ls
Step 2) Edit the container
sudo docker exec -it “mfe_idcontainer” /bin/sh
Step 3) Go to learner-dashboard directory
cd /openedx/dist/learner-dashboard
Step 4) Edit the .css file
vi app.b1895a913bef10623833.css (in my case)
Step 5) Add:

#dashboard-container .container-mw-xl.container-fluid .row .course-list-column .course-card .pgn__card .pgn__action-row button.btn-outline-primary {
display: none;

Step 6) Save the file with wq and then exit the container

Step 7) Commit changes to the mfe container and save as a new image

sudo docker commit <mfe_idcontaine> new-mfe-tutor-17.0.1

Step 8) To make the changes permanent edit the “docker-compose.yml” file (under .local/share/tutor/env/local/). At the end of the file change the MFE image from " image: " to " image: new-mfe-tutor-17.0.1 "

Step 9) Run sudo tutor images build openedx and sudo tutor local start -d

If you can’t see the changes, clear your browser’s cache.



I need to know the correct way to do this too. I can’t imagine that editing the MFE like that is the correct way. Do any Open edX maintainers want to weigh in on how to disable this new thing that was added in Quince?

cc @feanil since I don’t know how to contact maintainers on the forums

What I have Done is simple , I commented the UpgradeButton Componet from src/containers/CourseCard/components/CourseCardActions/index.jsx

Hope it , Helps !

@ABC I took a quick look at this, and unfortunately, it looks like currently there is no way to remove the upgrade button without forking and updating the code. I do think it is reasonable to have this feature and any other upsell capabilities behind a feature flag but that’s not the current case, I’ll bring this up to the relevant product and frontend folks to see if that’s a capability we can add in the future.

In the meantime however, I think you should modify the frontend as @vivek suggested to remove this line.


Do you think you can share the steps on how to make the changes?

Okay, here are the steps for hide or for modification in new learner home page
[ if not mounted ]
Step 1 : Clone the Learner Dashboard from Learner Dashboard Repo
Step 2 : checkout for desired branch (in my case its open-release/quince.2)
Step 3: run command tutor images build learner-dashboard-dev
Step 4: mount it learner-dashboard:(your path to folder):/openedx/app
Step 5: run tutor dev start
[ if mounted ]
Step 6: open frontend-app-learner-dashboard folder in code editor and seach for src/containers/CourseCard/components/CourseCardActions/index.jsx file and do

Hope it help !

1 Like

I also think it’s reasonable - behind a feature flag. But for people like us who run 100% free education, all it would do is confuse our users about whether we’re trying to grab their money now or something.

Agree. It absolutely should be a flag. Both org-override and course-override. Free education should be default, not “restricted access”. A surprising development :pensive:
We are trying to hide it with theming:

#dashboard-content .course-card div[data-test-id=“CourseCardActions”] button:first-child {display:none;}

Hope this get fixed.