So I need to hide basically everything on the checkout page, but of course post everything to the backend. I dont want to unset as this removes the field and on the My Acount Billing address we've added alot of custom fields so the address is intact there. But on the checkout process I dont want to show the fields again (theyve already been set to readonly when on checkout) , is it possible using jQuery that only if on checkout to hide it from the user but still everything on the backend works as intended ?
The CSS Display hidden code works for majority but for three it just wont for some reason:
1 - Street address
House number and street name
The label and the field
Town / City
Just the labels
Postcode / ZIP
Just the labels
Codeadd_action( 'wp_footer', 'custom_hide_country_field' );
function custom_hide_country_field() {
if ( is_checkout()) {
echo "<script type='text/javascript'>
jQuery('[id=\"billing_country_field\"]').css('display','none');
jQuery('[id=\"billing_title\"]').css('display','none');
jQuery('[id=\"billing_title_field\"]').css('display','none');
jQuery('[id=\"billing_condition_field\"]').css('display','none' );
jQuery('[id=\"billing_address_1_field\"]').css('display','none, !important;');
jQuery('[id=\"billing_suburb_field\"]').css('display','none');
jQuery('[id=\"billing_suburb\"]').css('display','none');
jQuery('[id=\"billing_city\"]').css('display','none');
jQuery('[id=\"billing_postcode\"]').css('display','none');
jQuery('[id=\"billing_complex_address_inside_field\"]').css('display','none');
jQuery('[id=\"billing_complex_address_inside\"]').css('display','none');
jQuery('[id=\"billing_complex_name_field\"]').css('display','none');
jQuery('[id=\"billing_complex_name\"]').css('display','none');
jQuery('[id=\"billing_complex_other_field\"]').css('display','none');
jQuery('[id=\"billing_complex_other\"]').css('display','none');
</script>";
}
}
If I add it in console it works but from the script only those 3 just won’t work for some reason
Please try something like this:
//hide billing country field in checkout page
add_action( 'wp_footer', 'custom_hide_country_field' );
function custom_hide_country_field() {
if ( is_checkout()) {
echo "<script type='text/javascript'>
$('[id=\"billing_country_field\"]').css('display','none');
</script>";
}
}
CSS targeted it using the following:
#customer_details .woocommerce-billing-fields__field-wrapper .form-row, #customer_details .woocommerce-additional-fields__field-wrapper .form-row {
display: none !important;
}
Related
I am using WooCommerce Subscription and One Page Checkout plugins.
I am able to unset billing first name and last name (and even set 'required' attribute to false, so both fields are successively removed from my One page checkout.
But when I fill all other fields and I place order, it displays a validation error notice: "Billing First Name and Last Name are required" and I am not really sure how to solve this problem?
Maybe it has been set again from some functions or so? How I can solve this?
To remove billing first name and last name without any issues in checkout page, try to use the following instead:
// 1. Make required fields optional
add_filter( 'woocommerce_default_address_fields', 'customize_default_address_checkout_fields', 1000 );
function customize_default_address_checkout_fields( $fields ) {
if( is_checkout() ) {
$fields['first_name']['required'] = $fields['last_name']['required'] = false;
}
return $fields;
}
// 2. Remove unneeded billing fields
add_filter( 'woocommerce_billing_fields', 'customize_billing_checkout_fields', 1000 );
function customize_billing_checkout_fields( $fields ) {
if( is_checkout() ) {
unset($fields['billing_first_name'], $fields['billing_last_name']);
}
return $fields;
}
Code goes in functions.php file of the active child theme (or active theme). Tested and works…
It should works with One Page Checkout plugin too.
Have you tried removing it manually via child function.php as below?
add_filter( 'woocommerce_checkout_fields' , ' custom_remove_checkout_fields ' );
function custom_remove_checkout_fields( $fields ) {
unset($fields['billing']['billing_first_name']);
unset($fields['billing']['billing_last_name']);
return $fields;
}
I have solved the issue already.
The root cause is because one plugin always required Billing First Name and Last Name so I use this tip below to passby the problem:
I included this code into function.php of the theme:
add_filter('woocommerce_billing_fields', 'my_woocommerce_billing_fields');
function my_woocommerce_billing_fields($fields) {
$fields['billing_first_name']['default'] = 'newSubscriber';
$fields['billing_first_name']['custom_attributes']['readonly'] = TRUE;
$fields['billing_last_name']['default'] = 'newSubscriber';
$fields['billing_last_name']['custom_attributes']['readonly'] = TRUE;
return $fields;
}
So now your first name and your last name is always set as 'newSubscriber', it will pass the validation and now you hide it from dislaying using css:
p#billing_first_name_field, p#billing_last_name_field {
display: none;
}
paste these css into appearance -> Theme-> yourtheme-> additional css and save it.
So now everything would work as charm.
Hope it would help somebody struggling with the problem.
Dears,
i'm using snippet plugin to add my code to my ecommerace project , i have pickup and delivery plugin in my delivery option , what i'm trying to do is , once i select pickup option , customer address information fields will be hide which it is not logical to keep it appear and mandatory if pickup from restaurant selected.
snippet return error syntax error, unexpected '(', expecting variable (T_VARIABLE) or '{' or '$'
which it related for replacing <?php > with but thats not working also , sorry for confusing i'm new with programming and looking forward to have your support
my project checkout page.
https://www.order.ramadaencorekuwait.com/checkout-2/
$(document).ready(function() {
$('input').change(function() {
if ($('input[value="pickup"]').is(':checked') && $('input[value="delivery"]').is(':unchecked')) {
$('input[value="billing_address_4"]').hide();
}
else {
$('input[value="billing_address_4"]').show();
}
});
});
Thank you.
There are some mistakes in your code. Use the following to show / hide a custom checkout field based on radio button choice:
add_action('wp_footer', 'custom_checkout_js_script');
function custom_checkout_js_script() {
if( is_checkout() && ! is_wc_endpoint_url() ) :
?>
<script language="javascript">
jQuery( function($){
var a = 'input[name="pi_delivery_type"]:checked',
b = 'input[name="billing_address_4"]';
// Custom function that show hide specific field, based on radio input value
function showHideField( value, field ){
if ( value === 'pickup' ) {
$(field).parent().parent().hide();
} else {
$(field).parent().parent().show();
}
}
// On start after DOM is loaded
showHideField( $(a).val(), b );
// On radio button change live event
$('form.woocommerce-checkout').on('change', a, function() {
showHideField( $(this).val(), b );
});
});
</script>
<?php
endif;
}
Code goes in functions.php file of your active child theme (or active theme). Tested and works.
I am trying to set custom message on subject textbox after form load. So that I can set the custom values like customerID=1 and then wanted to place some if conditions by checking if cutomerID == 1 then add subject line "Hello john" and if customerID==2 then add subject line "hello james" on the form textbox
like here:
So in my wordpress site I wanted to add hook to customise subject line based on the condition but dont know which hook is appropriate to do this?
add_action( 'wpcf7_form_autocomplete', 'my_change_subject' );
function my_change_subject( $wf7 ) {
if($_GET['customerid'] == 1) {
<script>$("input[name='subject']").val('hello john');</script>
}
} ?>
Something like above but what hook I should use to do this?
I am also adding hooks site reference here: contact form7 hook reference site
Not sure if anyone comes to this issue before but I found simple solution;)
add_action( 'wpcf7_form_autocomplete', 'my_change_subject' );
function my_change_subject( $wf7 ) {
?>
<script>
jQuery(document).ready(function(){
//console.log('coming here...<?php echo $_GET['cid'];?>');
document.getElementsByName('your-subject')[0].value = "Customer Enquiry: <?php echo $_GET['cid'];?>";
});
</script>
<?php
}
} ?>
GOAL: Use the wpcf7_form_response_output filter to dynamically alter the "Success message" that is shown to user upon successful form submission.
ISSUE: When wp_footer is called in footer.php, the filter I have in place will not work - ever. However, when wp_footer is disabled/removed, the filter will work. Additionally, I noticed that when wp_footer is not active, after submission CF7 wil add the form ID to the URL (i.e., #wpcf7-f2294-p2295-o1). Unfortunately I need wp_footer enabled.
MY FILTER CODE:
function filter_wpcf7_response_output( $output ){
$date = date('Ymd');
if( strpos($output, 'wpcf7-mail-sent-ok') ) {
var_dump($output);
echo "in if statement";
?>
<script>
jQuery(function ($) {
$(document).ready(function () {
var newOutput = "Reference ID:" + <?=$date?> + "-00" + "5"+ ". Thank you for your message. It has been sent.";
$('.wpcf7-mail-sent-ok').html(newOutput);
});
});
</script>
<? }
return $output;
}
add_filter( 'wpcf7_form_response_output', 'filter_wpcf7_response_output', 10, 1);
ATTEMPTS:
Tried keying off of event listeners for "mailing send" event.
Tried "hardcoding" solution via .on("click", ...) jQuery method. Ultimately, could not alter html of "success message" because said message is not rendered to DOM, so jQuery cannot locate it.
ADDITIONAL INFO:
Theme utilized is a custom theme using Twenty Fifteen as model/core
Cannot share site-specific information as this is for business client
POSSIBLE RESOLUTION:
One way I was able to have wp_footer called in footer.php and utilize the above filter is if I disabled CF7 script, using: add_filter( 'wpcf7_load_js', '__return_false' );.
I am new to woocommerce and I do not have much knowledge about that. In a project I want to hide shipping calculation button from cart page.but want to show the same configuration with button on checkout page.
I want help regarding how to add shipping button on checkout.
you can fire an event after calc_shipping buton is clicked, but you need to wait native calc_shipping method to end. I used jQuery(document).ajaxComplete to wait that execution:
jQuery('[name="calc_shipping"]').click(function () {
jQuery(document).ajaxComplete(function () {
your_pretty_code;
});
Go to
WooCommerce->Settings->Shipping->Shipping Options
and make sure you have unchecked 'Enable the shipping calculator on the cart page'.
All the woocommerce files needs to be overridden by copying that file into your child theme.
Also, In woocommerce backend the option must be checked which tells to Show Shipping Calculator on cart page (As this will show calculator)
Add below code into woocommerce/cart/cart-shipping.php file before first tr (You will found in file)
if(is_checkout() && !$show_shipping_calculator && 'yes' === get_option( 'woocommerce_enable_shipping_calc' ) ) {
$show_shipping_calculator = true;
}
Add below code into your child theme's fuctions.php
add_action( 'wp_enqueue_scripts', 'test_test' );
function test_test() {
if( is_checkout() ) {
if( wp_script_is( 'wc-cart', 'registered' ) && !wp_script_is( 'wc-cart', 'enqueued' ) ) {
wp_enqueue_script( 'wc-cart' );
}
}
}
Now we need to add id tag in shipping calculator's update totals button,
For that in woocommerce/cart/shipping-calculator.php page find button which has name="calc_shipping" and add id tag in that button ====> id="calc_shipping"
Note ==> This is done by us to bind the button click event in jQuery, You can use your any other alternative way ( If you want )
Now last step,
Add below jquery code in your child theme's js file
jQuery(document).on('click','#calc_shipping',function(e){
e.preventDefault();
var shipping_country_val = jQuery("#calc_shipping_country").val();
var shipping_state_val = jQuery("#calc_shipping_state").val();
var shipping_city_name = jQuery("#calc_shipping_city").val();
var shipping_postcode = jQuery("#calc_shipping_postcode").val();
jQuery("#billing_country").val(shipping_country_val);
jQuery("#billing_state").val(shipping_state_val);
jQuery('#billing_city').val(shipping_city_name);
jQuery('#billing_postcode').val(shipping_postcode);
jQuery("#shipping_country").val(shipping_country_val);
jQuery("#shipping_state").val(shipping_state_val);
jQuery('#shipping_city').val(shipping_city_name);
jQuery('#shipping_postcode').val(shipping_postcode);
$('#billing_country , #shipping_country').trigger('change');
$('#billing_state, #shipping_state').trigger('change');
});