This is great, I was also going to suggest using some kind of toggle to show/hide the list, which is far more practical in the event you accidentally uncheck something while you're at the shop and it disappears , or you remember something when you're already away from the computer and want to add it to the list.
I assume this also means you can apply this ONLY to the notes you want to, not to every note on Joplin with checkboxes, which is more practical. (Moot points, I realise now you are adding the CSS specifically to this note.)
I use Joplin more for GTD type lists than notes. I already had used CSS to hide checked items from the preview pane, but now I no longer use the preview pane at all as I use the Rich Markdown plugin (btw, in that, images are just a link till you click or hover over them) and CSS tweaks to make the edit pane very practical to look at.
Now I have some ideas to look more into using a toggle and hiding completed items, even from the edit pane 
Update: Have now created a new thread CSS to hide completed checkbox items in the Editor (specifically using Rich Markdown) with an implementation to do this for the Editor Pane.
Of note, I used a toggle in the note title, rather than the note body, due to DOM elements being removed as you scroll. Likely the above checkbox hack for the shopping list could also run into a similar issue on desktop that I experienced when scrolling a longer list.