I want to remove Username Field on Woocommerce Registration Page, how do I do that? Or How do I use user email as username, or make the username field not required? Any help would be appreciated. Thanks a lot.
Yes, that is possible. Follow below steps properly.
Step-1: Remove Username textfield
add_action('login_head', function(){
?>
<style>
#registerform > p:first-child{
display:none;
}
</style>
<script type="text/javascript" src="<?php echo site_url('/wp-includes/js/jquery/jquery.js'); ?>"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#registerform > p:first-child').css('display', 'none');
});
</script>
<?php
});
Step-2: Remove Username error
//Remove error for username, only show error for email only.
add_filter('registration_errors', function($wp_error, $sanitized_user_login, $user_email){
if(isset($wp_error->errors['empty_username'])){
unset($wp_error->errors['empty_username']);
}
if(isset($wp_error->errors['username_exists'])){
unset($wp_error->errors['username_exists']);
}
return $wp_error;
}, 10, 3);
Step-3: Manipulate Background Registration Functionality.
add_action('login_form_register', function(){
if(isset($_POST['user_login']) && isset($_POST['user_email']) && !empty($_POST['user_email'])){
$_POST['user_login'] = $_POST['user_email'];
}
});
Put above code in your theme's functions.php file.
Related
I have 2 checkboxes. When 1 is selected then the other one is un-checked. I have used JS to accomplish this and it works fine. But then when I click save, the option that is un-checked does not get saved. If I actually un-check the checkbox with a mouse click then it does save. What's the best way to accomplish the above situation?
PHP Action and JS that I am using:
add_action( 'customize_controls_print_footer_scripts', 'my_customizer_custom_scripts' );
function my_customizer_custom_scripts() { ?>
<script type="text/javascript">
jQuery(document).ready(function() {
/* This one shows/hides the an option when a checkbox is clicked. */
jQuery('#customize-control-checkbox1 input').click(function() {
if (jQuery('#customize-control-checkbox2 input:checked').val() !== undefined) {
jQuery('#customize-control-checkbox2 input').attr('checked', false);
}
});
jQuery('#customize-control-checkbox2 input').click(function() {
if (jQuery('#customize-control-checkbox1 input:checked').val() !== undefined) {
jQuery('#customize-control-checkbox1 input').attr('checked', false);
}
});
});
</script>
<?php
}
Figured it out have to use trigger('click') instead of the attr('checked', false).
So
jQuery('#customize-control-checkbox1 input').attr('checked', false);
Becomes
jQuery('#customize-control-checkbox1 input').trigger('click');
I'm using WordPress.
I want to navigate my attachment page with left and right key.
Here is my codes, but not working;
function GoToLocation(url)
{
window.location = url;
}
Mousetrap.bind("j", function() {
//alert('j pressed' + document.getElementById("next").href);
//document.getElementById("next").click();
window.location=<?php echo $image->next_image_link ?>;
});
<script src="https://craig.global.ssl.fastly.net/js/rainbow-custom.min.js?39e99"></script>
<script src="https://craig.global.ssl.fastly.net/js/mousetrap/mousetrap.js?bc893"></script>
If I change that
window.location=<?php echo $image->next_image_link ?>;
to this
window.location="http://mylink.com";
script working well. but I can't use WordPress based link (like next_image_link();)
What can I do?
Replace window.location=<?php echo $image->next_image_link ?>; with
window.location="<?php echo $image->next_image_link ?>";. Your string declariation is not valid so it can't work.
PHP doesn't echo link with inverted commas.
Edit: Wordpress doesn't print just the URL. It prints link element. So the solution will be
Binding to existing navigation
Using regex to cut off the htmt syntax
var element = '<?php echo $image->next_image_link ?>';
window.location = element.match(/href="([^"]*)/)[1];
i did myself,
firstly add this to top
<script src="https://craig.global.ssl.fastly.net/js/rainbow-custom.min.js?39e99"></script>
<script src="https://craig.global.ssl.fastly.net/js/mousetrap/mousetrap.js?bc893"></script>
Then add this script too
function GoToLocation(url)
{
window.location = url;
}
Mousetrap.bind("right", function() {
document.getElementById('next-page').click();
});
function GoToLocation(url)
{
window.location = url;
}
Mousetrap.bind("left", function() {
document.getElementById('prev-page').click();
});
lastly, put "next-page" , "prev-page" ID to the location of the link tag
for example;
<a id="next-page"></a>
or
<a id="prev-page"></a>
So, when you press Left or Right keyboard button, script will work well. See ya
Currently the Edit Account Details page have these fields: First Name, Last Name, Email address, Current Password & New Password. Now I need to overwrite the 'Save Changes' button which basically submits the form to update the user details. Before the form is being submitted, I want to do a javascript-based validation which checks the user's new password. How can I do this?
Btw I'm using WooCommerce, if that matters here.
You can use woocommerce_edit_account_form_end action to inject your custom JS snippet and do your validation.
like this
function add_my_account_edit_script() { ?>
<script type="text/javascript">
(function($){
$(document).ready(function(){
$("form.edit-account").submit(function(){
var old_pass = $("#password_1").val();
var new_pass = $("#password_2").val();
if( old_pass != new_pass ) {
// Show your validation message here
// return false to prevent the form submitting
return false;
}
// no validation error so allow the form to be submitted.
return false;
});
});
})(jQuery);
</script>
<?php
}
add_action( 'woocommerce_edit_account_form_end', 'add_my_account_edit_script' );
On wordpress I want to make a post template where if a user clicks on a link it will load the custom field value via ajax. I found a plugin here How to load the custom field values of the post via ajax in wordpress but the download link seems to be dead so I'm unable to download :( can anyone help me code? I'm not a programmer so tell me the easiest solution
In functions.php file
<?php
add_action('wp_ajax_load_custom_field_data','load_custom_field_data');
add_action('wp_ajax_nopriv_load_custom_field_data','load_custom_field_data');
function load_custom_fields_data(){
$postid=$_POST['postid'];
$metakey= $_POST['metakey'];
echo get_post_meta($postid,$metakey,true);
die();
?>
In your template where you will have your link like below(remember to have postid and metakey attributes in the links with class get_meta_val)
<a class="get_meta_val" postid="<?php echo $post->ID?>" metakey ="your_meta_key">Get Custom Value</a>
//get postid in any way you want and put you customfield name in your_meta_key
<script type="text/javascript">
jQuery(document).ready(function(e) {
jQuery(document).one('click','.get_meta_val',function(e){
e.preventDefault();
var pid = jQuery(this).attr('postid');
var metakey = jQuery(this).attr('metakey');
var data = {
'action': 'load_custom_field_data',
'postid': pid,
'metakey':metakey
};
// since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
jQuery.post(ajaxurl, data, function(response) {
alert('Custom Field Value is: ' + response);
//Here you can do whatever you want with your returned value
});
});
});
</script>
Just playing around with Wordpress / Contact Form 7.
Is it possible to add custom javascript function on successful email send event?
Write this in additional settings at the bottom of the contact form configuration page:
on_sent_ok: "some js code here"
UPDATE:
You can use it to call functions like this:
on_sent_ok: "your_function();"
Or write some code (this one redirects to thank you page):
on_sent_ok: "document.location='/thank-you-page/';"
Contact Form 7 emits a number of Javascript events that bubble up to the document object. In version 4.1 they can be found in contact-form-7/includes/js/scripts.js. If you're using jQuery you can access those events like this:
$(document).on('spam.wpcf7', function () {
console.log('submit.wpcf7 was triggered!');
});
$(document).on('invalid.wpcf7', function () {
console.log('invalid.wpcf7 was triggered!');
});
$(document).on('mailsent.wpcf7', function () {
console.log('mailsent.wpcf7 was triggered!');
});
$(document).on('mailfailed.wpcf7', function () {
console.log('mailfailed.wpcf7 was triggered!');
});
try this:
$( document ).ajaxComplete(function( event,request, settings ) {
if($('.sent').length > 0){
console.log('sent');
}else{
console.log('didnt sent');
}
});
Example 1:
on_sent_ok: "location = 'http://mysite.com/thanks/';"
Example 2:
In form script:
<div id="hidecform">
<p>You name<br />
[text* your-name] </p>
...
</div>
Then at the bottom of the admin page under "Additional Settings" put the following:
on_sent_ok: "document.getElementById('hidecform').style.display = 'none';"
Just a quick note that on_sent_ok is deprecated.
Contact form 7 is now using event listeners, like this;
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '11875' == event.detail.contactFormId ) { // if you want to identify the form
// do something
}
}, true );
</script>
Then add this to the wp_footer action.
like this;
add_action( 'wp_footer', 'wp1568dd4_wpcf7_on_sent' );
function wp1568dd4_wpcf7_on_sent() {
// the script above
}