How to lock WooCommerce date created on administration area

Question

Hello there someone helped me, regarding my case on woocommerce, I want to lock the date created on woocommerce back-end area when you add order on back-end area.

I have found the same case here - link here

Is there any available snippets that doesn't require any JavaScript

The best way would be JavaScript. Because otherwise you need to modify the build function of the page. So when I understand it right, you want to only lock it for created orders, not for orders created by the customers when they buy something? — Mr. Jo, Mar 22 '19 at 12:00
Actually only our staff will create orders but only through backend so if javascript is only the way can you show me how to do that...or can you help out with it cause i have no idea how to do it... — GabrielaQ, Mar 23 '19 at 02:44
You can disable the input with the help of JavaScript. This is the only way. Otherwise you need to edit the page template. But I think when you have no idea, JavaScript will be the better solution. — Mr. Jo, Mar 23 '19 at 08:06

Mr. Jo · Answer 1 · 2019-04-18T09:00:09.767

So there we go. You first need to create a admin.js file in your child theme. You can put this into a folder named js:

- ChildTheme
   - js
    - admin.js

After this we need to include this file into WordPress. For this you need to put this part of code into your functions.php file:

/**
 * Add ressources to dashboard page
 */
add_action( 'admin_enqueue_scripts', 'admin_enqueue_styles' );
function admin_enqueue_styles() {
    wp_enqueue_script( 'admin-js', get_stylesheet_directory_uri() . '/js/admin.js' );
}

Now your admin.js is known within the WordPress backend. Open now the file and put this into your file to disable the date and time input of WooCommerce orders:

jQuery(document).ready(function () {
    jQuery(".order_data_column .date-picker, .order_data_column .hour, .order_data_column .minute").prop('disabled', true);
});

Save it and upload it onto your server. Clean the cookies and reload the page. The date and time input should be now disabled. Let me know if it works for you.

UPDATE

If you want to use CSS, you should not just disable all date-picker classes. I would be more specific here and just disable the date pickers you really want to disable:

.order_data_column .date-picker,
.order_data_column .hour,
.order_data_column .minute {
    pointer-events: none;
}

And to make it more fancy, you can set the cursor for the wrapper to not-allowd:

#order_data .order_data_column .form-field {
    cursor: not-allowed;
}

This goes into your admin.css file.

Bot solutions are working. Both of them has advantages and disadvantages.

The JS solution is HTML based because this sets a disabled parameter to each specified input field. This is a backend-code solution.

The CSS solution don't disables the input at all. You just disable the cursor click to this specific field. So this is a view-based solution.

wait and i will try again on my end...its just I dont know why it doesnt work maybe I did something wrong... — GabrielaQ, Apr 18 '19 at 08:17

score 0 · Accepted Answer · answered Apr 17 '19 at 07:19

0

I solved my problem with this simple CSS to disable that date on order backend...

.date-picker {pointer-events: none}

answered Apr 17 '19 at 07:19

GabrielaQ

7
1
5

If you would like to use CSS, I would prefer to be a bit more specific. Check my answer. – Mr. Jo Apr 18 '19 at 08:38

How to lock WooCommerce date created on administration area

2 Answers2