Clear Billing Address when change Billing State Woocommerce - woocommerce

When i change "Billing State", the "Billing City" field it resets (thats ok)
But the "Billing Address 1" keeps the same information.
For Example i select (State='Lima', City='Miraflores', Address 1='Av. Jose Larco293')
When i change Lima to other State it shows like ('Arequipa', ' - ', 'Av. Jose Larco293')
I would also like the "Billing Address 1" to be clear emptied when change state, thanks.

This is the code i make to solution this! just post on Functions.php and work for others options just change. (is_page '61' = Checkout Page for me)
Thanks
function wpb_hook_javascript() {
if (is_page ('61')) {
?>
<script type="text/javascript">
jQuery(function ($) {
$("#billing_state_field").change(function() {
$("#billing_address_1").val("");
})
})
;
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');

Related

how to capture dynamic conversion values on Google ads?

I am trying to get dynamic the order total price on my thankyou page(the page seeing the user after a successful order) to the google ads report through the goole-tag-manager chrome extension.
The google ads snippet I am using on my thankyou page is this:
*I have follow the google support before (https://support.google.com/google-ads/answer/6095947?hl=en)
<!-- Event snippet for Purchase conversion page -->
<script>
gtag('event', 'conversion', {
'send_to': 'My Conversion ID/My Conversion Label',
'value': 11.50,
'currency': 'EUR',
'transaction_id': ''
});
</script>
and the order total amount is the " 'value': 11.50, "
So instead of 11.50 I am placing the below code
document.querySelector("#cost>.woocommerce-Price-amount.amount").innerText.match(/^.{1}(.*).{0}/i)[1].trim();
so I can take the total for each order every time dynamicaly by scaning the dom, but doesn't work. Are my thoughts right? Is this the right way to do it by addin code manually on my site without use gootle tag manager? Any Ideas about how to do it?
Well its actually quite simple when you do it with php.
// Hook the function in head.
add_action('wp_head', 'bks_head_social_tracking_code');
function bks_head_social_tracking_code() {
// Check if its thank you page.
if(is_wc_endpoint_url( 'order-received' )) {
// Get order object.
$order = wc_get_order(get_query_var('order-received'));
// Get total.
$order_total = $order->get_total();
// Prepare.
$output = "
<script>
gtag('event', 'conversion', {
'send_to': 'My Conversion ID/My Conversion Label',
'value': ". $order_total .", // Use dynamically.
'currency': 'EUR',
'transaction_id': ''
});
</script>";
// echo.
echo $output;
}
}
You can make the currency dynamic too. You can use this to to get different kinds of data. https://www.businessbloomer.com/woocommerce-easily-get-order-info-total-items-etc-from-order-object/

<script>document.cookie = "humans_21909=1"; document.location.reload(true)</script>

web API build with wordpress is showing error of
<script>document.cookie = "humans_21909=1"; document.location.reload(true)</script>
it works sometime on some network and sometime not working
I got same response for an API ending with api/register , then i change the name /register to /new_registerthen issue solved,
I think register in url is the reason for this error
First of all, clone the website using the All In One WP Migration to your local development machine. Then, check the REST API, if the same error persists. It means you have some error in your code. In my case, the REST API works perfectly fine in my local machine but shows the same HTTP 409 conflict. I contacted with the Bluehost support. They told me they have some mod_security issues. After 2 3 days, they fixed it. It worked fine after that.
I ran into the same Problem and below are the two json api have issues which are using Json API User Plugin.
http://example.com/api/get_nonce/?json=get_nonce&controller=user&method=register
http://example.com/api/user/register/?username=eww_test&email=john#domain.com&display_name=John&notify=both&seconds=100&insecure=cool
Then i move whole site to localhost and check APIs and they were working fine so i contacted host in my case hostgator.
They suggested to disable mod_security for that domain which was subdomain in my case.
And The issue has been resolved.
Tested and worked well
I am facing same issue while loading image. My image name is contact-desktop.png and contact-display-mob.png
My cpanel hosting provider block name which contain words like contact or register.
So I renamed that file and it is working perfectly.
At times this error occurs when you name you folder or files a reserved or blocked name.
In my case I named a folder contact, turns out the name was blocked from being used as folder names.
When testing my script on postman, I was getting this error:
<script>
document.cookie = "humans_21909=1"; document.location.reload(true)
</script>
I changed the folder name from contact to contacts and it worked. The error was gone.
I had the same issue, I was hosting on bigrock.in.
In my case, the issue that my hosting provider said was the user's IP was blacklisted.
You can do a blacklist IP check from here https://mxtoolbox.com
I ran into the same issue as mentioned above. In my situation I was hosting a website on bluehost, which used contact.php to send an e-mail according to the contact-form on the website.
My contact form looked like this:
<div class="col-md-7 contact-form wow animated fadeInLeft">
<form id="contact-form" role="form" onsubmit="formSubmit(event)">
<div class="input-field">
<input id="name" type="text" required name="name" class="form-control" placeholder="Your Name...">
</div>
<div class="input-field">
<input id="email" type="email" required name="email" class="form-control" placeholder="Your Email...">
</div>
<div class="input-field">
<input type="text" name="subject" class="form-control" placeholder="Subject...">
</div>
<div class="input-field">
<textarea id="message" name="message" class="form-control" placeholder="Messages..."></textarea>
</div>
<button type="submit" id="submit" class="btn btn-blue btn-effect">Send</button>
</form>
<div id="form-success-message" class="form-success-message alert alert-success alert-dismissible" role="alert">
<h4 class="alert-heading">Thank you for contacting us!</h4>
<hr>
<p></p>
<strong>The form was submitted successfully.</strong>
<br>In a few minutes you will receive an e-mail confirming that your question was sent successfully.
<br>Our team will contact you soon!
<br>
<br>In case the confirmation e-mail would not arrive within the next hours, verify that the email is not in your SPAM folder, or please contact us directly (****#******.tech).
<button onclick="document.getElementById('form-success-message').style.display = 'none';" type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close form submitted message"></button>
</div>
<div id="form-no-success-message" class="form-no-success-message alert alert-danger alert-dismissible" role="alert">
<h4 class="alert-heading">Oeps, something went wrong</h4>
<hr>
<p></p>
<strong>The form was not submitted.</strong>
<br>Please try again later, or contact us directly via e-mail (******#******.tech) or via WhatsApp.
<button onclick="document.getElementById('form-success-message').style.display = 'none';" type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close form submitted message"></button>
</div>
</div>
The script on my index.html page looked like this:
<script>
// Function responsible for sending the e-mail via the message contact form.
// At the moment the message contact form is submitted, it tries to fetch a php function
// in case the php function is not working, it will return a response from which the ok is false.
// Otherwise, it should return a possitive ok.
// FYI: function does not return a inscanceof error for now.
//
// In case no errors are thrown, the website will display a form success message
// In case the ok response from the php form is negative, a form no success message is displayed.
function formSubmit(event) {
/* Prevent button causing default browser submit */
event.preventDefault();
/* Get form element */
const form = document.getElementById('contact-form');
/* Create form data object from form element which contains post data */
let formData = new FormData(form);
/* Issue "ajax request" to server. Change /post-to-url to the appropriate
url on your server */
fetch('/contact.php', {
body: formData,
method: "post"
})
.then(function(response) {
if(!response.ok){
document.getElementById('form-no-success-message').style.display = 'block';
document.getElementById('contact-form').reset();
}else{
document.getElementById('form-success-message').style.display = 'block';
document.getElementById('contact-form').reset();
}
})
.catch(function(error) {
console.log('Error', error);
});
}
</script>
The file contact.php looked like this:
<?php
if(!isset($_POST['submit']))
{
//This page should not be accessed directly. Need to submit the form.
echo "error; you need to submit the form!";
}
//setting the variables
$name = $_POST['name'];
$visitor_email = $_POST['email'];
$message = $_POST['message'];
//Validate first
if(empty($name)||empty($visitor_email))
{
echo "Name and email are mandatory!";
exit;
}
if(IsInjected($visitor_email))
{
echo "Bad email value!";
exit;
}
//variables for the e-mail to client
$email_from = '***#******.tech';//<== update the email address
$email_subject = "New message via your website contact form";
$email_body = "You have received a new message from the following website visitor (name): $name.\n\nThe visitor used the e-mail address: $visitor_email\n\nThe content of the message is: \n\n $message.";
//variables for the confirmation e-mail to website user
$confirmation_email_subject = "We received your question!";
$confirmation_email_body = "We have received the following message from you via our contact form on our website *****.tech: \n\n Your name: $name.\n\n Your e-mail: $visitor_email\n\n Your message: \n\n $message. \n\nWe will get in contact as soon as possible! If you would not receive an answer in the coming 2 weeks, don't hesitate to contact us via:*****#*****.tech. \n\n This is an automated e-mail. We haven't read your question yet. This is merely a confirmation of the recieval.";
//e-mail of client
$to = "****#*******.tech";//<== update the email address
$headers = "From: $email_from \r\n";
//headers for confirmation
$confirmation_headers = "From: *****#******.tech"; //<== update the email address
//Send the email!
mail($to,$email_subject,$email_body,$headers);
mail($visitor_email,$confirmation_email_subject,$confirmation_email_body,$confirmation_headers);
// Function to validate against any email injection attempts
function IsInjected($str)
{
$injections = array('(\n+)',
'(\r+)',
'(\t+)',
'(%0A+)',
'(%0D+)',
'(%08+)',
'(%09+)'
);
$inject = join('|', $injections);
$inject = "/$inject/i";
if(preg_match($inject,$str))
{
return true;
}
else
{
return false;
}
}
?>
After hosting on bluehost, things worked for 5 minutes. Then I started receiving errors. More specifically, on submitting the form, I received a 409 error, containing:
<script>document.cookie = "humans_21909=1"; document.location.reload(true)</script>
I did some research, and found this page: https://www.geminigeeks.com/bluehost-blocking-contact-form-7-submissions-409-conflict-error/
At the bottom of the page you will read:
This issue still exists. If visitor’s IP is blacklisted, URL with the word “contact” will give 409 error. The plugin author of Contact Form 7 could solve the issue by renaming folders/files and any API calls, from “contact” to “kontact”.
So I changed the PHP file to kontact.php.
And then changed in my script the reference:
<script>
// Function responsible for sending the e-mail via the message contact form.
// At the moment the message contact form is submitted, it tries to fetch a php function
// in case the php function is not working, it will return a response from which the ok is false.
// Otherwise, it should return a possitive ok.
// FYI: function does not return a inscanceof error for now.
//
// In case no errors are thrown, the website will display a form success message
// In case the ok response from the php form is negative, a form no success message is displayed.
function formSubmit(event) {
/* Prevent button causing default browser submit */
event.preventDefault();
/* Get form element */
const form = document.getElementById('contact-form');
/* Create form data object from form element which contains post data */
let formData = new FormData(form);
/* Issue "ajax request" to server. Change /post-to-url to the appropriate
url on your server */
fetch('/kontact.php', { *<===== changes here*
body: formData,
method: "post"
})
.then(function(response) {
if(!response.ok){
document.getElementById('form-no-success-message').style.display = 'block';
document.getElementById('contact-form').reset();
}else{
document.getElementById('form-success-message').style.display = 'block';
document.getElementById('contact-form').reset();
}
})
.catch(function(error) {
console.log('Error', error);
});
}
</script>
After that my contact form started working on bluehost.
I also got the same error, I was getting error code 409 conflicts and an error message :
<script> document.cookie = "humans_21909=1"; document.location.reload(true) </script>
So in my case issue was because my API name is register.php and it was giving an error on mac os, not on windows. So I renamed the API regsiter.php to registerApi.php and it solved the issue.
If you are also using any reserved name for your API name or any method try changing it. Hope it will help.

Make changes to the Edit Account Details page

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' );

Remote dropdown default value

I have a form done with semantic-ui and one of the elements is a dropdown that has values pulled from a remote url. It works fine for adding things but how do I set a value for the dropdown when editing.
If a user searched for a country and submitted the form with United Kingdom how do I display the selected value when the user wants to edit the object?
$('.ui.dropdown.country_select').dropdown('setting', {
apiSettings: {
url: '../countries/{query}'
}
});
Found the answer after some digging:
var dd = $('.ui.dropdown.country_select').dropdown('setting', {
apiSettings: {
url: '../countries/{query}'
}
});
dd.dropdown('set text', 'yahoo');
dd.dropdown('set value', 'google');
I was having a similar issue but with a dropdown that was multiple, searchable, and remote data. For me, the solution was to seed ONLY the <option> tag(s) that corresponds with the default value. So, using your code sample:
$('.ui.dropdown.country_select').dropdown('setting', {
apiSettings: {
url: '../countries/{query}'
}
});
// Assuming defaultValue = '1';
<select class="ui dropdown country_select">
<option value="1" selected>Default Value Item</option>
</select>
Then the dropdown should overwrite the options with the remote source after initialization.

Wordpress: Load custom field in ajax

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>

Resources