Update #1: I've managed to get the page to refresh on click, but due to the delay in adding the additional product to the cart the billing fields aren't shown until a second refresh is done. So, simply refreshing the page on click is not a good solution.
Now, I'm thinking loading the whole checkout page via ajax might be a solution?
I'm not sure how to do this (or if it's even the best idea), so if anyone has a way to implement this or a better solution feel free to share.
Update #2: Here is a loom video that shows the problem in real time.
https://www.loom.com/share/8e49e8663f1c4599a306c9c9948636b2
When my mouse goes off-screen at 0:15 I'm refreshing the page.
---- Original Post ----
My checkout page is not adding the proper billing fields after an order bump is applied to the cart (via the checkbox to add an additional product to the order). This is causing customers to be charged but no order is generated on my side. This is because the cart refreshes via ajax, while the rest of the checkout page does not.
To replicate the error, add a free product to your cart from this page:
https://blacklotusaudio.com/free-downloads/
Then, skip the popup offer and head to checkout and click to add the additional product to your order via the order bump checkbox. You'll notice the billing fields stay the same unless you refresh the page, which is what I believe is causing the issue here.
So, my solution is to refresh the page every time the order bump is clicked, I'm just not 100% certain how best to do it.
I've tried adding a modified version of this code to the page, but I cannot correctly identify the right element(s) to target as there is no "button" on the order bump to select.
<button type="button" onClick="refreshPage()">Close</button>
<script>
function refreshPage(){
window.location.reload();
}
</script>
Any help in resolving this issue would be much appreciated. I'm sure there is a better way of solving this problem than refreshing the page, but right now that's the best I can come up with.
Edit - Here's what I'm using to make the free downloads work:
function sv_free_checkout_fields() {
// first, bail if WC isn't active since we're hooked into a general WP hook
if ( ! function_exists( 'WC' ) ) {
return;
}
// bail if the cart needs payment, we don't want to do anything
if ( WC()->cart && WC()->cart->needs_payment() ) {
return;
}
// now continue only if we're at checkout
// is_checkout() was broken as of WC 3.2 in ajax context, double-check for is_ajax
// I would check WOOCOMMERCE_CHECKOUT but testing shows it's not set reliably
if ( function_exists( 'is_checkout' ) && ( is_checkout() || is_ajax() ) ) {
add_filter( 'woocommerce_order_button_text', 'woo_custom_order_button_text' );
function woo_custom_order_button_text() {
return __( 'SEND MY DOWNLOADS', 'woocommerce' );
}
add_filter( 'woocommerce_checkout_fields', 'misha_email_first' );
function misha_email_first( $checkout_fields ) {
$checkout_fields['billing']['billing_email']['priority'] = 4;
return $checkout_fields;
}
add_filter('woocommerce_mailchimp_woocommerce_newsletter_default_checked', function ($checked) {
return true;
});
// remove coupon forms since why would you want a coupon for a free cart??
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
// Remove the "Additional Info" order notes
add_filter( 'woocommerce_enable_order_notes_field', '__return_false' );
// Unset the fields we don't want in a free checkout
add_filter( 'woocommerce_checkout_fields', function( $fields ) {
// add or remove billing fields you do not want
// fields: http://docs.woothemes.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/#section-2
$billing_keys = array(
'billing_last_name',
'billing_company',
'billing_phone',
'billing_address_1',
'billing_address_2',
'billing_city',
'billing_postcode',
'billing_country',
'billing_state',
);
// unset each of those unwanted fields
foreach( $billing_keys as $key ) {
unset( $fields['billing'][ $key ] );
}
return $fields;
} );
}
}
add_action( 'wp', 'sv_free_checkout_fields' );
Related
I'm using this code in functions.php on WordPress to generate an affiliate link based on the visitor location, It's working perfectly but the problem is that if page caching is turned on (W3 Total Cache), The variables get cached so if someone from the UK was the first one to open the page then the second one from Germany opened the page he will get the same link that the first visitor got.
One more thing please, I'm still very new to PHP and javascript so I would appreciate if the answer was simplified enough.
<?php
add_action( 'woocommerce_before_add_to_cart_button', 'affiliate_link', 10);
function affiliate_link() {
$not_avilable_country = '<div id="amz_not_avilable" class="amz_not_avilable">This product is not avilable in your country yet</div>';
// IP Geolocation
$country_code = $_SERVER ["HTTP_CF_IPCOUNTRY"];
// Get Custom Fields
$de_asin = get_post_meta(get_post()->ID, "wccaf_de_asin", true );
$uk_asin = get_post_meta(get_post()->ID, "wccaf_uk_asin", true );
//////////////////////////////////////////////
if ($country_code=="DE" or $country_code=="DE") {
$amazon_domain = 'https://www.amazon.de';
// $associate_id = 'bonstato-21';
$asin = $de_asin;
}
else if ($country_code=="GB" && $uk_asin!=="") {
$amazon_domain = 'https://www.amazon.co.uk';
// $associate_id = 'bonmedico-21';
$asin = $uk_asin;
}
///////////////////////////////////////////////
if( wp_is_mobile() ) {
// Amazon Link For Mobile
?>
<script>
function amzGo(){
window.location='<?php echo $amazon_domain ?>/dp/<?php echo $asin ?>/?tag=<?php echo $associate_id ?>';
}
</script>
<?php
}
else {
// Amazon Link For PC
?>
<script>
function amzGo(){
window.location='<?php echo $amazon_domain ?>/gp/aws/cart/add.html?AssociateTag=<?php echo $associate_id ?>&ASIN.1=<?php echo $asin ?>&Quantity.1=1';
}
</script>
<?php
}
?>
<div class="buy_amz_btn_wrap" >
<button type="button" id="buy_amz_btn" class="buy_amz_btn" onclick="amzGo();"><i class="fa fa-amazon fa-amz"></i><?php echo $amz_btn_title ?></button>
</div>
<?php
}
?>
A way to deactivate/disable W3 Total Cache on specific pages is to use another plugin called: "Plugin Organizer" by Jeff Sterup.
After installing and enabling it, go to settings (of the plugin) and follow the instructions to set it in the right way.
Once the plugin is enabled and settings are saved correctly, when you edit/create a new page using the editor you can see a checkbox that's show you which plugin to enable for that particular page and which to disable.
In this way you can disable W3 Total Cache on the page that's use your function on functions.php.
Hope it helps.
The most common way to bypass the cache is to serve this data via the WordPress json api and use java script to put the always fresh data into place.
The problem is not that the variable inside the code is being cached; what happens is that W3 Total Cache grabs the first page produced by your PHP code and store it in the hard disk of the server. Thenceforth, the browsers' requests are answered delivering the HTML static file stored in server's hard disk (PHP will not produce the same page again).
To solve this problem, you must transfer the "intelligence" inside your PHP code, which is responsible for create slightly different versions of your page, to your Javascript code. Bastian Haustein suggested one way to do that, using WordPress REST API. However, I would try first doing it in a simpler way: after page load, capture the link of your cached page and modify it according to the location of your visitor. Naturally, you will have to capture visitors geolocation also using JS - see the link suggested by cjmling: How to get visitor's location (i.e. country) using geolocation?
I have set subscribe popup box, but now because of Google penalty I need to have 2 different one for mobile and desktop. Function is set in function.php and ideally would like to keep it there but not sure how to gpo around it.
add_action( 'wp_footer', 'show_subscribe_popup' );
function show_subscribe_popup(){
if(is_front_page()){
//$subscribe_popup = '
//';
//echo $subscribe_popup;
include('inc/popup_form_test.php');
}
}
I created to form files and trying to incorporate var viewportWidth = $(window).width();
Any suggestions please
I am customizing the front end of Woocommerce, so I'd like to add the text "/ Per Month" after my final price before the user clicks the Add to Cart Button.
I have tried through javascript
jQuery('.woocommerce-variation-price').append(" / month")
but while it works when I run it from the console it fails when I run it through a file in the template. I can still the code when I check the page code but it does nothing.
I was thinking maybe I could achieve this through a WordPress hook.
I have inserted this in functions.php
add_filter( 'the_content', 'permonth_filter' );
function permonth_filter ( $content ) {
if ( is_single() ) {
$content .= '<div class="permonth-filter"> / Per Month </div>' . "
";
} // End IF Statement
return $content;
} // End wpcandy_filterhook_signoff()
That adds some text at the end of a blog post.
Is there a way to add some text after a specific div with a specific class? woocommerce-variation-price
Make sure that you are running your JavaScript after the page has loaded.
jQuery( document ).ready(function($) {
// Run your code
$('.woocommerce-variation-price').append(" / month");
}); // end document ready
I have this small script, which, when clicked on, will show the content from a page where I do a PHP query. My problem is, that if the user click multiply times, it will just load the content from the PHP page multiply times as well...
This is my jQuery code:
$('.notifications-load').on('click',function() {
$('#notifications-holder').load("/?i=notifications");
});
And my HTML:
<i class="fa fa-bell notifications-load"><span class="notification">5</span></i>
<div id="notifications-holder"></div>
This is the PHP page (?i=notifications):
$n=$dbh->prepare("SELECT * FROM users_notifications WHERE userid=0 OR userid=:userid");
$n->bindParam(":userid",$userdata['id']);
$n->execute();
$data=$n->fetchAll();
foreach ($data as $value) {
echo $value['text'];
}
If a user clicks example 3 times on .notifications-load , then the content from /?i=notifications will load 3 times into the #notifications-holder - how can I prevent this?
Believe it or not, one character of difference will fix it:
$('.notifications-load').one('click',function() {
// Here -------------------^
$('#notifications-holder').load("/?i=notifications");
});
jQuery's one function hooks up a handler that it automatically unhooks the first time it's called.
If you have an aversion to using one (as some do, it's really easy to misread it as on), you have a couple of options:
You can create an alias for it:
$.fn.onOnce = $.fn.one;
You can unhook the handler explicitly:
$('.notifications-load').on('click.load',function() {
$('#notifications-holder').load("/?i=notifications");
$('.notifications-load').off('click.load');
});
Besides using $.one you can check to see if $('#notifications-holder') already has a value. Something like:
$('.notifications-load').on('click',function() {
var notification = $('#notifications-holder');
if (!notification.html().trim().length) {
notification.load("/?i=notifications");
}
});
There is a social login wordpress plugin that produces a large popup window when authenticating a login from a social networking site (facebook, google, etc.)
I would like to make the popup window much smaller, but can't figure it out. The code the produces the popup window is:
if( get_option( 'wsl_settings_use_popup' ) == 1 || ! get_option( 'wsl_settings_use_popup' ) ){
?>
<html><head><script>
function init() {
window.opener.wsl_wordpress_social_login({
'action' : 'wordpress_social_login',
'provider' : '<?php echo $provider ?>'
});
window.close()
}
How do I set the width and height for this popup?
Thanks in advance!
UPDATE FOR CENTERED WINDOW
Add this 2 calculation just under provider = $(this).attr("data-provider");:
datop = (($(document).height()-400)/2);
daleft = (($(document).width()-225)/2);
Add this 2 parameters to the attributes:
top="+datop+",left="+daleft+""
like this:
"location=1,status=0,scrollbars=0,width=225,height=400,top="+datop+",left="+daleft+""
END
Edit
You can find the file here: wp-content/plugins/wordpress-social-login/assets/js/connect.js
End edit
The file is "wordpress-social-login\assets\js\connect.js" I don't know where this file will be installed, but probably you can find the function inside it in every page which contain the login (if you can locate it, you can unistall, edit the file and the reinstall with the file modified). This should be the function you are searching for:
(function($){
$(function(){
$(".wsl_connect_with_provider").click(function(){//selector.event
popupurl = $("#wsl_popup_base_url").val();//assign text of the element with id #wls_popup_base..
provider = $(this).attr("data-provider");//assign the attribute data-provider of the element with class .wls_connect..
window.open(
popupurl+"provider="+provider,//url
"hybridauth_social_sing_on", //window name
"location=1,status=0,scrollbars=0,width=1000,height=600"//attributes of the window
);
});
});
})(jQuery);
This should be the code of the popup
window.open(
popupurl+"provider="+provider,
"hybridauth_social_sing_on",
"location=1,status=0,scrollbars=0,width=1000,height=600"
);
To change width and height,edit this 2 params: ..width=1000,height=600"
Note that i add the comments to let you understand what the function do and what are you doing