Im new in this coding stuff, I researched many sites now and try to build my own checkout field in Woocommerce. It should be a checkout field, when it is checked, some information or warning should plop up, it worked with showing on checkout page normal, but my script doesn't work.
add_filter( 'woocommerce_checkout_fields', 'add_custom_checkout_fields' );
function add_custom_checkout_fields( $fields ) {
$fields['billing']['checkbox_trigger'] = array(
'type' => 'checkbox',
'label' => __('You dont live in Germany?', 'woocommerce'),
'class' => array('form-row-wide'),
'clear' => true
);
return $fields;
}
add_action( 'woocommerce_after_checkout_billing_form', 'echo_notice_billing' );
function echo_notice_billing() {
echo '<div class="billing-notice woocommerce-info" style="display:none">It may take forever</div>';
}
add_action( 'woocommerce_after_checkout_form', 'show_notice_billing' );
function show_notice_billing(){
?>
<script>
jQuery(document).ready(function($){
$('checkbox_trigger').change(function(){
if(this.checked){
$('billing-notice').show();
}
else {
$('billing-notice').hide();
}
});
});
</script>
<?php
}
There are some errors in your jQuery script… Try to replace your related function by this instead:
add_action( 'woocommerce_after_checkout_form', 'show_notice_billing' );
function show_notice_billing(){
?>
<script>
jQuery(function($){
$('#checkbox_trigger').click(function(){
if($(this).is(':checked') ){
$('.billing-notice').show();
}
else {
$('.billing-notice').hide();
}
});
});
</script>
<?php
}
Tested and works.
Related
How can I hide a specific button, based on the stock status of my product?
The plugin is creating this class:
function wdm_pefree_init() {
// phpcs:ignore WordPress.NamingConventions.ValidFunctionName.FunctionNameInvalid
if ( ! class_exists( 'Product_Enquiry_For_Woocommerce', false ) ) {
include_once WDM_PE_PLUGIN_PATH . '/includes/class-product-enquiry-for-woocommerce.php';
}
Product_Enquiry_For_Woocommerce::instance();
}
I only want to display this button the single product page of every product that is in backorder, but I can't get my code to work.
I'm not that great with PHP, so I'm trying to adapt some other code I have on my functions.php file, but without any luck.
Any help would be great, thanks!
I've tried this code:
add_filter('woocommerce_get_availability', 'wcs_custom_get_availability', 1, 2);
function wcs_custom_get_availability($availability, $_product) {
// Remove Enquiry Button
if (!$_product->is_in_stock()) {
remove_action('Product_Enquiry_For_Woocommerce');
}
return $availability;
}
I also see that the css class for the button is .pe-show-enq-modal, but I can't do a conditional "visibility: hidden" that only works for backorder products.
What you are looking for is this:
add_action( 'woocommerce_single_product_summary', 'remove_enquiry_button_if_out_of_stock', 30 );
function remove_enquiry_button_if_out_of_stock() {
global $product;
if ( ! $product->is_in_stock() ) {
remove_action( 'woocommerce_single_product_summary', array( Product_Enquiry_For_Woocommerce::instance(), 'enquiry_button' ), 25 );
}
}
Or Via CSS :
.product.out-of-stock .pe-show-enq-modal {
display: none;
}
The only way I got this (kinda) working was by using this JS:
function remove_enquiry() {
?>
<script type="text/javascript">
(function($){
$(document).ready(function(){
if($(".in-stock").length)
$(".pe-show-enq-modal").hide();
});
})(jQuery);
</script>
<?php
}
add_action('wp_head', 'remove_enquiry');
You can see it here.
But if you notice, it has a delay executing the JS, because when the page loads, the button still shows up for a brief moment (otherwise it seems to be working ok).
Hi I added custom field in billing form using this code below.
add_filter('woocommerce_billing_fields', 'custom_woocommerce_billing_fields');
function custom_woocommerce_billing_fields($fields)
{
$fields['billing_options'] = array(
'label' => __('If you pay by Invoice. Please add Your Invoice Number Here ', 'woocommerce'), // Add custom field label
'placeholder' => _x('Invoice Number', 'placeholder', 'woocommerce'), // Add custom field placeholder
'required' => false, // if field is required or not
'clear' => false, // add clear or not
'type' => 'text', // add field type
'class' => array('my-css') // add class name
);
return $fields;
}
I have two payment options 1. Cash on delivery 2.Realex Payments HPP – Credit Card.
Is it possible to show custom field only then 1. Cash on delivery selected as payment option.?
Thank you
The following code will hide billing_options custom optional checkout field when the selected payment method is Cash on delivery ("cod"):
// Conditional Show hide checkout fields based on chosen payment methods
add_action( 'wp_footer', 'conditionally_show_hide_billing_custom_field' );
function conditionally_show_hide_billing_custom_field(){
// Only on checkout page
if ( is_checkout() && ! is_wc_endpoint_url() ) :
?>
<script>
jQuery(function($){
var a = 'input[name="payment_method"]',
b = a + ':checked',
c = '#billing_options_field'; // The checkout field <p> container selector
// Function that shows or hide checkout fields
function showHide( selector = '', action = 'show' ){
if( action == 'show' )
$(selector).show( 200, function(){
$(this).addClass("validate-required");
});
else
$(selector).hide( 200, function(){
$(this).removeClass("validate-required");
});
$(selector).removeClass("woocommerce-validated");
$(selector).removeClass("woocommerce-invalid woocommerce-invalid-required-field");
}
// Initialising: Hide if choosen payment method is "cod"
if( $(b).val() !== 'cod' )
showHide( c, 'hide' );
else
showHide( c );
// Live event (When payment method is changed): Show or Hide based on "cod"
$( 'form.checkout' ).on( 'change', a, function() {
if( $(b).val() !== 'cod' )
showHide( c, 'hide' );
else
showHide( c );
});
});
</script>
<?php
endif;
}
Code goes in function.php file of your active child theme (or active theme). tested and works.
Works on small home project, and want to add checkmark option bellow "Proceed to Checkout" button into Cart page into my Woocommerce site. I found this function, that is add that option:
add_action( 'woocommerce_after_cart', 'bbloomer_add_checkout_privacy_policy', 9 );
function bbloomer_add_checkout_privacy_policy() {
woocommerce_form_field( 'privacy_policy', array(
'type' => 'checkbox',
'class' => array('form-row privacy'),
'label_class' => array('woocommerce-form__label woocommerce-form__label-for-checkbox checkbox'),
'input_class' => array('woocommerce-form__input woocommerce-form__input-checkbox input-checkbox'),
'required' => true,
'label' => 'By proceeding, you are agreeing to our Terms and Conditions',
));
}
// Show notice if customer does not tick
add_action( 'woocommerce_proceed_to_checkout', 'bbloomer_not_approved_privacy' );
function bbloomer_not_approved_privacy() {
if ( ! (int) isset( $_POST['privacy_policy'] ) ) {
wc_add_notice( __( 'Please acknowledge the Terms and Conditions' ), 'error' );
}
}
But seems that something is not fine with this function, because no matter if checked or not, customer can proceed to checkout page. I want to ensure that ONLY customers who will check the checkbox, can proceed to checkout. In opposite, warning message will be shown at top.
Can someone to tell me where is issue with this function or to point me to some working solution? Thanks in advance. This is image how currently looks with this function i posted before.
The following code will work in cart page for your privacy policy checkbox using mandatory jQuery code to make it work as "proceed to checkout" button is just linked to checkout page without submitting any data.
The code will disable the button on start:
It use "Sweet alert 2" JS message to display an error message on button click when the checkbox is not checked:
The complete code:
add_action( 'woocommerce_proceed_to_checkout', 'cart_privacy_policy_checkbox', 5 );
function cart_privacy_policy_checkbox() {
woocommerce_form_field( 'privacy_policy', array(
'type' => 'checkbox',
'class' => array('form-row privacy'),
'label_class' => array('woocommerce-form__label woocommerce-form__label-for-checkbox checkbox'),
'input_class' => array('woocommerce-form__input woocommerce-form__input-checkbox input-checkbox'),
'required' => true,
'label' => sprintf( __( "I've read and accept the %s", "woocommerce" ),
''.__( "Privacy Policy", "woocommerce" ).'' ),
));
// jQuery code start below
?>
<script src="https://unpkg.com/sweetalert2#8.8.1/dist/sweetalert2.all.min.js"></script>
<script src="https://unpkg.com/promise-polyfill#8.1.0/dist/polyfill.min.js"></script>
<script type="text/javascript">
jQuery( function($){
var a = '.checkout-button', b = '#privacy_policy',
c = '<?php echo wc_get_checkout_url(); ?>', d = 'disabled';
// Set disable button state
$(a).addClass(d).prop('href', '#');
// Woocommerce Ajax cart events
$('body').on('updated_cart_totals removed_from_cart', function(){
if( ! ( $(a).hasClass(d) && $(b).prop('checked') ) ){
$(a).addClass(d).prop('href', '#');
}
})
// On button click event
$('body').on('click', a, function(e){
if( ! $(b).prop('checked') ) {
// Disable "Proceed to checkout" button
e.preventDefault();
// disabling button state
if( ! $(a).hasClass(d) ){
$(a).addClass(d).prop('href', '#');
}
// Sweet alert 2
swal({
title: '<?php _e("Pricacy Policy", "woocommerce"); ?>',
text: '<?php _e("Please acknowledge the privacy policy Terms and Conditions", "woocommerce"); ?>',
type: 'error',
timer: 3500,
showConfirmButton: false
});
}
});
// On checkbox change event
$(b).change(function(){
if($(this).prop('checked')){
if( $(a).hasClass(d) ){
$(a).removeClass(d).prop('href', c);
}
} else {
if( ! $(a).hasClass(d) ){
$(a).addClass(d).prop('href', '#');
}
}
});
});
</script>
<?php
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
Sweet Alert Two documentation
Thanks a lot for this code!
It works for me, except for when the cart is updated via ajax such as when deleting an item.
In that situation, the checkbox no longer enables the Proceed to Checkout button unless I refresh the page. I finally found a solution:
Add the following snippet to the header to reload the cart page after an item is deleted from the cart.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery( document.body ).on( 'updated_cart_totals', function () {
location.reload( true );
} );
</script>
In Woocommerce, I wrote the code for billing_state to use the shipping charge. Now I want to write the value from billing_state to billing_city, when changing billing_state, billing_city also changes
This are my custom states code:
add_filter( 'woocommerce_states', 'vietnam_cities_woocommerce' );
function vietnam_cities_woocommerce( $states ) {
$states['VN'] = array(
'HCM' => __('Hồ Chí Minh', 'woocommerce') ,
'HANOI' => __('Hà Nội', 'woocommerce') ,
'HAIPHONG' => __('Hải Phòng', 'woocommerce') ,
);
return $states;
}
Any help is appreciated.
The following code will fill up the city from the state value when the country is Vietnam (VN) in the checkout page:
// Add checkout custom select fields
add_action( 'wp_footer', 'custom_checkout_city_field', 20, 1 );
function custom_checkout_city_field() {
// Only checkout page
if( is_checkout() && ! is_wc_endpoint_url() ):
$country = 'VN'; // <=== <=== The country code
// $states = WC()->countries->get_shipping_country_states()[$country];
?>
<script type="text/javascript">
jQuery(function($){
var c = '<?php echo $country; ?>', f = 'form.checkout';
// On billing state change
$(f).on('change', '#billing_state', function(){
if($('#billing_country').val() == c ){
$('#billing_city').val($(this).val());
}
});
// On shipping state change
$(f).on('change', '#shipping_state', function(){
if($('#shipping_country').val() == c ){
$('#shipping_city').val($(this).val());
}
});
});
</script>
<?php
endif;
}
Code goes in function.php file of your active child theme (active theme). Tested and works.
In Woocommerce checkout form im trying to hide billing_city and billing_address_1 fields first and after I fill the fields postcode and housenumber the other fields (address_1 and city) has to show.
This is the script, but I does not work well and I dont know what I do wrong:
?>
<script type="text/javascript">
jQuery('input#billing_housenumber').change(function(){
if (this.checked) {
jQuery('#billing_city').fadeIn();
jQuery('#billing_city input').val('');
} else {
jQuery('#billing_city').fadeOut();
}
});
</script>
<?php
Any help is appreciated.
Update 2
There is some errors, mistakes and missing things in your code. Also you should hooked it in a function (or register it as an external file).
I have added at the end a function that add the billing "housenumber" field in checkout (just for testing purpose)…
In the code below I am using some CSS inline styles to hide the billing city and address_1 fields and to show them when they have an additional selector class "on".
Here is a hooked function that will enable this code in checkout only:
add_action( 'wp_footer', 'custom_checkout_script' );
function custom_checkout_script() {
// Only checkout page
if( ! ( is_checkout() && ! is_wc_endpoint_url() ) ) return;
// CSS Styles (Hidding fields)
?>
<style>
#billing_city_field, #billing_address_1_field { display:none !important;}
#billing_city_field.on ,#billing_address_1_field.on { display:block!important;}
</style>
<?php
// Jquery script
?>
<script type="text/javascript">
jQuery( function($){
var a = 'input#billing_housenumber',
b = 'input#billing_postcode',
c = '#billing_city_field,#billing_address_1_field';
// On start
if( $(a).val() != '' && $(b).val() != '' && ! $(c).hasClass('on') ){
$(c).css('display','none !important').addClass('on').show();
console.log('start');
}
// On change: If housenumber and postcode fields are filled, we display other hidden fields
$(a+','+b).on( 'change', function(){
if ( $(a).val() != '' && $(b).val() != '' && ! $(c).hasClass('on') ) {
$(c).css('display','none !important').addClass('on').show( 500 );
console.log('change - in');
} else if( ( $(a).val() == '' || $(b).val() == '' ) && $(c).hasClass('on') ) {
$(c).hide( 200, function(){
$(c).removeClass('on').css('display','block')
});
console.log('change - out');
}
});
});
</script>
<?php
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
This code has been tested with this temporary additional code, that generates the checkout "housenumber" text field (just for testing purpose):
// Add custom checkout field
add_action( 'woocommerce_billing_fields', 'my_custom_checkout_field' );
function my_custom_checkout_field( $fields ) {
$fields['billing_housenumber'] = array(
'class' => array('form-row-wide'),
'label' => __('Housenumber ?'),
'required' => false,
'clear' => true
);
return $fields;
}
Code goes in function.php file of your active child theme (or active theme).
Related: Show or hide html element on chosen shipping method change in Woocommerce
There is one step left. I don't see the housenumber (after a customer purchase a product). So you don't see the housenumber in the mail or in invoice.
This is in the e-mail but I don't see more detail for address:
/**
* #hooked WC_Emails::customer_details() Shows customer details
* #hooked WC_Emails::email_address() Shows email address
*/
do_action( 'woocommerce_email_customer_details', $order, $sent_to_admin, $plain_text, $email );