How to trigger a pop up log in window when anonymous user clicks favorite butto

Maybe try something like follows – have assumed a plug in such as ZM Ajax Login & Register.

jQuery(document).ready(function() {
jQuery(‘.simplefavorite-button’).click(function() {
if (!jQuery(this).hasClass(‘active’) && !jQuery(‘body’).hasClass(‘logged-in’)) {
// the clicked element doesn’t have the active class and user not logged in
jQuery(‘#ajax-login-register-login-dialog’).dialog(‘close’);
zMAjaxLoginRegister.open_register();
if ( _zm_alr_settings.pre_load_forms === ‘zm_alr_misc_pre_load_no’ ){
zMAjaxLoginRegister.load_register();
}
}
else
{
return true;
}
});

});

I am using Codecanyon’s UserPro plugin (https://codecanyon.net/item/userpro-user-profiles-with-social-login/5958681)

I am still a WordPress novice.

Where would I insert the code that you gave me?

Sorry that I am not more knowledgable.

Assuming you have things to favourite throughout site, you can put it in footer.php of child theme.

You would wrap it in <script> </script> tags.

Have highlighted the code in bold that would change for the userpro plugin. They have email support, so you’ll have to get them to comment on what the code should be for that particular user pro plugin.

<script>
jQuery(document).ready(function() {
       jQuery('.simplefavorite-button').click(function() {
            if (!jQuery(this).hasClass('active') && !jQuery('body').hasClass('logged-in')) {
            // the clicked element doesn't have the active class and user not logged in

jQuery(‘#ajax-login-register-login-dialog’).dialog(‘close’);
zMAjaxLoginRegister.open_register();
if ( _zm_alr_settings.pre_load_forms === ‘zm_alr_misc_pre_load_no’ ){
zMAjaxLoginRegister.load_register();
}

}
               else {
                   return true;
                }
         });
});
</script>

I have some code that might help, but then again it might just confuse you as well. This assumes you are modifying your theme file, which should always be done via a child theme otherwise you will lose the changes when your theme gets updated. If you don’t know anything about child themes, it is a good idea to learn (WordPress has a good tutorial somewhere), but if you are not interested, perhaps just ignore all that follows. Anyway, if you are going to modify your theme, the most logical place will be in your single.php file or any other places where you are showing the favorites button.

The first thing I will recommend is actually not using a popup but rather displaying a special message box when the favorites button is clicked by a non-user. Doing this will save you the hassle of creating a special page to contain whatever message you wish to display and will probably be a bit more mobile-friendly; you can always add a popup registration link inside that message box if you so desire.

So, here is some code to (1) check if a user is logged in or not; (2) add a special div with your message and show it if the favorites button is clicked by a non-user; and (3) let you insert a shortcode for your Codecanyon’s UserPro plugin, assuming it offers a popup login/register option (otherwise, just link to your register page).

<script type="text/javascript">
jQuery(document).ready(function() {
   $('.showfavsdiv').click(function() {
		jQuery('#register-warning').show();
		return false;
	});
});
</script>
<?php
$user_id = get_current_user_id();
if ($user_id) {
	echo do_shortcode('[favorite_button]');
} else {
	?>
	<a href="#" class="showfavsdiv" alt="members-only feature alert">
	<?php echo do_shortcode('[favorite_button]'); ?>
	</a>
	<div id="register-warning" style="display:none;">Only logged-in members can save favorites. Registering is free and easy.
	<?php echo do_shortcode('[your UserPro plugin shortcode can go here]'); ?>
	</div>
	<?php
}

Assuming you are still only interested in a popup, here is code fairly similar to the code above but that will launch a popup instead of showing a special message div. Note that you can simply edit the height and width to suit your needs.

<script type="text/javascript">
jQuery(document).ready(function() {
   $('.popup').click(function() {
		var NWin = window.open($(this).prop('href'), '', 'scrollbars=1,height=400,width=400');
		if (window.focus) {
			NWin.focus();
		}
		return false;
	});
});
</script>
<?php
$user_id = get_current_user_id();
if ($user_id) {
	echo do_shortcode('[favorite_button]');
} else {
	?>
	<a href="/must-login-message/" class="popup" alt="members-only feature alert">
	<?php echo do_shortcode('[favorite_button]'); ?>
	</a>
	<?php
}

Hopefully that will help you, or if not you, someone else that comes along and is interested in this topic.

thanks so much for your help!

As of yet, I’m not familiar enough with code to do it myself. But I’ll take your instructions and give them to someone else who can help guide me through it. (Maybe a developer, etc.).

Thanks for taking the time to write back.

I do appreciate it!