Replace an HTML element if logged in as a subscriber

replace_compliments_button.php

<?php // Ignore this first line when copying to your child theme's functions.php file.

add_filter( 'wp_footer', function() {
	if ( !is_user_logged_in() ) return; // Don't do anything if not logged in.

	global $current_user;
    	$user_roles = $current_user->roles;
	// var_dump($user_roles); // Uncomment to debug role(s).
    	$user_role = array_shift( $user_roles ); // Look at the first role. Change this if needed.
	if ( $user_role !== "subscriber") return; // Bail early if we don't have a subscriber.
?>
<script id="replace-node">
	// Load this IIFE in the footer.
	(function() {
		// alert('hiya!'); // Uncomment for debugging.

		// The code below replaces the compliments link with an empty div
		// that has an ID of compliments-replacement-link. You can style
		// that div to whatever you and and then add the '#compliments-replacement-link'
		// selector as your extra CSS class for your Click Open trigger.
		const div = document.createElement("div");
		const text = document.createTextNode("CUSTOMIZE ME! ;-)");
		div.appendChild(text);
 		div.setAttribute("id", "compliments-replacement-link"); // Create a replacement div. Customize this to what you want to launch your overriding popup.
 		const compLinkElt = document.querySelector("a[id^='compliments-']"); // Set the ID.
 		if ( compLinkElt ) compLinkElt.replaceWith(div); // If there's a compliments link, replace it with the div.
	})();
</script>
<?php
} );
/**
 * You can add the PHP code snippet to your child theme's functions.php file
 * or with third-party plugins such as My Custom Functions and Code Snippets.
 *
 * Learn more:
 * - https://docs.wppopupmaker.com/article/84-getting-started-with-custom-js
 * - https://docs.wppopupmaker.com/article/552-getting-started-with-custom-php
 */