Digital experiences for all disciplines
New Landing › How can we help? › Atelier › adjust checkout page
New Landing › How can we help? › Atelier › adjust checkout page
- This topic has 7 replies, 3 voices, and was last updated 8 years by
David Martin – Support.
Viewing 8 posts - 1 through 8 (of 8 total)
-
Posted in: Atelier
-
April 3, 2016 at 11:15 am #259354
Hi,
I want to rearrange the checkout page and include two datepickers. I have added this code to my functions.php in the child theme:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <style type="text/css"> #pickup_time { width: 110px; } #dropoff_time { width: 110px; } </style> <?php /** * Add Pickup & Dropoff DIV */ add_action( 'woocommerce_before_checkout_billing_form', 'pickup_dropoff' ); function pickup_dropoff( $checkout ) { echo '<div id="pickup_dropoff"><h2>' . __('Pickup & Dropoff') . '</h2>'; woocommerce_form_field( 'pickup_day', array( 'type' => 'text', 'id' => 'datepickerpickup', 'class' => array('my-field-class form-row-wide'), 'label' => __('Pickup Day'), 'placeholder' => __('Select'), ), $checkout->get_value( 'pickup_day' )); woocommerce_form_field( 'pickup_time', array( 'label' => __('Pickup Time', 'woocommerce'), 'placeholder' => _x('', 'time', 'woocommerce'), 'required' => false, 'clear' => false, 'type' => 'select', 'options' => array( '3-5' => __('15.00 - 17.00', 'woocommerce' ), '5-7' => __('17.00 - 19.00', 'woocommerce' ), '7-9' => __('19.00 - 21.00', 'woocommerce' )), ), $checkout->get_value( 'pickup_time' )); woocommerce_form_field( 'dropoff-day', array( 'type' => 'text', 'id' => 'datepickerdropoff', 'class' => array('my-field-class form-row-wide'), 'label' => __('Dropoff Day'), 'placeholder' => __('Select'), ), $checkout->get_value( 'dropoff-day' )); woocommerce_form_field( 'dropoff_time', array( 'label' => __('Dropoff Time', 'woocommerce'), 'placeholder' => _x('', 'time', 'woocommerce'), 'required' => false, 'clear' => false, 'type' => 'select', 'options' => array( '3-5' => __('15.00 - 17.00', 'woocommerce' ), '5-7' => __('17.00 - 19.00', 'woocommerce' ), '7-9' => __('19.00 - 21.00', 'woocommerce' )), ), $checkout->get_value( 'dropoff_time' )); echo '</div>'; } ?> <script> $(function() { $( "#datepickerpickup" ).datepicker({ minDate: +0, firstDay: 1, dateFormat: "dd-mm-yy" }); }); $(function() { $( "#datepickerdropoff" ).datepicker({ minDate: +1, firstDay: 1, dateFormat: "dd-mm-yy" }); }); </script>The problem is that with this code the checkout page does not stop loading. If I use only the php code between the <?php ?> tags, the page will load.
I now have included the css part in the theme’s custom css area and the js area in the custom js area, but my question is: where do I need to paste this part of the code:
‘<link rel=”stylesheet” href=”//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css”>
<script src=”//code.jquery.com/jquery-1.10.2.js”></script>
<script src=”//code.jquery.com/ui/1.11.4/jquery-ui.js”></script>
<link rel=”stylesheet” href=”/resources/demos/style.css”>’Thank you
April 4, 2016 at 7:19 am #259396Hi,
1- Please font add this code anywhere:-<script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>2- Now add all this css code only Admin > Theme Options > Custom CSS like this.
@import url("/resources/demos/style.css"); #pickup_time {width: 110px;} #dropoff_time {width: 110px;}3- Insert only php code at functions.php.
Thanks
MohammadApril 4, 2016 at 10:00 pm #259602Hi Mohammad,
I’m sorry I don’t understand. If I remove this code
<script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>then my datepicker does not work anymore..
At the moment I have this code:
<script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script> $(function() { $( "#datepickerpickup" ).datepicker({ minDate: +0, firstDay: 1, dateFormat: "dd-mm-yy" }); }); $(function() { $( "#datepickerdropoff" ).datepicker({ minDate: +1, firstDay: 1, dateFormat: "dd-mm-yy" }); }); </script>pasted in my theme’s custom JS area. The datepicker does work like this but it causes other errors on my site so I think I have pasted the code in the wrong place. Looking forward to your advice.
Kind regardsApril 5, 2016 at 8:06 am #259630Hi,
Please provide me login detail after installing WPIDE plugin. I will check and resolve the issue.
Thanks
MohammadApril 5, 2016 at 8:48 pm #259790Thanks Mohammad, the problem is that I am testing this offline on my testing site (desktopserver) so I don’t think its possible to give you access to my site.
Ill try to be as clear as possible so maybe its possible to help me without access.
To be able to get a datepicker on my checkout page, I am using this code in my childs theme function.php:
<?php wp_enqueue_style('jquery-style', 'http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'); /** * Add Pickup & Dropoff DIV */ add_action( 'woocommerce_before_checkout_billing_form', 'pickup_dropoff' ); function pickup_dropoff( $checkout ) { echo '<div id="pickup_dropoff"><h2>' . __('Pickup & Dropoff') . '</h2>'; woocommerce_form_field( 'pickup_day', array( 'type' => 'text', 'id' => 'datepickerpickup', 'class' => array('my-field-class form-row-wide'), 'label' => __('Pickup Day'), 'required' => true, 'placeholder' => __('Select'), ), $checkout->get_value( 'pickup_day' )); woocommerce_form_field( 'pickup_time', array( 'label' => __('Pickup Time', 'woocommerce'), 'placeholder' => _x('', 'time', 'woocommerce'), 'required' => true, 'clear' => false, 'type' => 'select', 'options' => array( '3-5' => __('15.00 - 17.00', 'woocommerce' ), '5-7' => __('17.00 - 19.00', 'woocommerce' ), '7-9' => __('19.00 - 21.00', 'woocommerce' )), ), $checkout->get_value( 'pickup_time' )); woocommerce_form_field( 'dropoff-day', array( 'type' => 'text', 'id' => 'datepickerdropoff', 'class' => array('my-field-class form-row-wide'), 'label' => __('Dropoff Day'), 'required' => true, 'placeholder' => __('Select'), ), $checkout->get_value( 'dropoff-day' )); woocommerce_form_field( 'dropoff_time', array( 'label' => __('Dropoff Time', 'woocommerce'), 'placeholder' => _x('', 'time', 'woocommerce'), 'required' => true, 'clear' => false, 'type' => 'select', 'options' => array( '3-5' => __('15.00 - 17.00', 'woocommerce' ), '5-7' => __('17.00 - 19.00', 'woocommerce' ), '7-9' => __('19.00 - 21.00', 'woocommerce' )), ), $checkout->get_value( 'dropoff_time' )); echo '</div>'; } /** * Make fields required */ add_action('woocommerce_checkout_process', 'error_if_no_pickup_selected'); function error_if_no_pickup_selected() { // Check if set, if its not set add an error. if ( ! $_POST['pickup_day'] || ! $_POST['dropoff-day']) wc_add_notice( __( 'Please select a pickup & dropoff slot' ), 'error' ); } /** * Update the order meta with field value */ add_action( 'woocommerce_checkout_update_order_meta', 'update_order_meta_delivery_time' ); function update_order_meta_delivery_time( $order_id ) { if ( ! empty( $_POST['pickup_day'] ) ) { update_post_meta( $order_id, 'Pickup Day', sanitize_text_field( $_POST['pickup_day'] ) ); update_post_meta( $order_id, 'Pickup Time', sanitize_text_field( $_POST['pickup_time'] ) ); update_post_meta( $order_id, 'Dropoff Day', sanitize_text_field( $_POST['dropoff-day'] ) ); update_post_meta( $order_id, 'Dropoff Time', sanitize_text_field( $_POST['dropoff_time'] ) ); } } /** * Display field value on the order edit page */ add_action( 'woocommerce_admin_order_data_after_billing_address', 'update_user_info_delivery_time', 10, 1 ); function update_user_info_delivery_time($order){ echo '<p><strong>'.__('Pickup Day').':</strong> ' . get_post_meta( $order->id, 'Pickup Day', true ) . '</p>'; echo '<p><strong>'.__('Pickup Time').':</strong> ' . get_post_meta( $order->id, 'Pickup Time', true ) . '</p>'; echo '<p><strong>'.__('Dropoff Day').':</strong> ' . get_post_meta( $order->id, 'Dropoff Day', true ) . '</p>'; echo '<p><strong>'.__('Dropoff Time').':</strong> ' . get_post_meta( $order->id, 'Dropoff Time', true ) . '</p>'; } ?>I then pasted this is my theme’s custom JS area:
<script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script> $(function() { $( "#datepickerpickup" ).datepicker({ minDate: +0, firstDay: 1, dateFormat: "dd-mm-yy" }); }); $(function() { $( "#datepickerdropoff" ).datepicker({ minDate: +1, firstDay: 1, dateFormat: "dd-mm-yy" }); }); </script>Finally to make the datepicker fields look good I pasted this in my themes custom CSS area:
/*CHECKOUT PAGE*/ #pickup_time {width: 110px;} #dropoff_time {width: 110px;} /*CHECKOUT PAGE*/The Problem:
At the moment the fields on the checkout page work correctly but I have some JS problems (the variations for my variable products cannot be selected). If I remove this code
<script src=”//code.jquery.com/jquery-1.10.2.js”></script>
<script src=”//code.jquery.com/ui/1.11.4/jquery-ui.js”></script>`
from the JS theme area, the JS error is gone but then my checkout fields do not work anymore.Hopefully you can see what I am doing wrong.
Thanks againApril 6, 2016 at 7:16 am #259817Hi,
Please take a screenshot of browser console and send me to check the error.
Thanks
MohammadApril 9, 2016 at 12:09 pm #260499This reply has been marked as private.April 11, 2016 at 11:25 am #260657Hi there,
Unfortunately that customisation is beyond our scope of support as it is more work than a small customisation.
We only provide support for theme issues, and at times basic customisations.I’d highly recomend you use an existing plugin rather then doing this yourself if you are not a developer: https://www.woothemes.com/products/woocommerce-checkout-field-editor/.
Thanks.
-
Posted in: Atelier
Viewing 8 posts - 1 through 8 (of 8 total)
You must be logged in and have valid license to reply to this topic.