I have a wordpress/woocommerce/theme website. Using “appearance/customize” I added an HTML element to the header containing a shortcode from a rewards plugin. It shows how many points the customer has earned, like this: “Reward points 600”. This only shows for logged in users. The text “Reward points” is too long for the mobile version header of the website, to make it shorter I want to replace this text for a small trophy image followed by just the number of point earned, like this: trophy 600. It looks great.

The problem is that when the user isnt logged in, the shortcode is hidden but the trophy image is displayed by itself, making it look very awkward. I need the trophy image to only be visible when the user is logged in, so it shows along with the complementing shortcode.

I tried inserting the image URL inside the shortcode but that broke the shortcode, as I would expect. I looked but couldnt find a piece of code to do this. Also, there might be a smarter way to accomplish this. The plugin setting has a few attributes you can add to the shortcode but no image option.