إليك كيفية إضافة حقل “تقويم” في صفحة تسجيل الخروج WooCommerce ، والسماح للأشخاص بتحديد تاريخ التسليم ، وحفظ هذه القيمة بالترتيب.
استغرق الأمر مني الأعمار لتنفيذ ذلك للعميل (كان الأمر أكثر تعقيدًا ، مع التواريخ المتاحة ، والتقويمات المختلفة بناءً على مناطق الشحن المختلفة ، والوزن الأقصى في اليوم ، وما إلى ذلك) لذلك فكرت في مشاركة المقتطف الأساسي معك! استمتع 🙂
WooCommerce: اعرض تقويم التسليم @ checkout
/**
* @snippet Display Order Delivery Date @ WooCommerce Checkout
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible Woo 3.7
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
// -------------------------------
// 1. Display Checkout Calendar if Shipping Selected
add_action( 'woocommerce_review_order_before_payment', 'bbloomer_echo_acf_date_picker' );
function bbloomer_echo_acf_date_picker( $checkout ) {
echo '<div id="show-if-shipping" style="display:none"><h3>Delivery Date</h3>';
woocommerce_form_field( 'delivery_date', array(
'type' => 'text',
'class' => array('form-row-wide'),
'id' => 'datepicker',
'required' => true,
'label' => __('Select Delivery Date'),
'placeholder' => __('Click to open calendar'),
));
echo '</div>';
}
add_action( 'woocommerce_after_checkout_form', 'bbloomer_show_hide_calendar' );
function bbloomer_show_hide_calendar( $available_gateways ) {
?>
<script type="text/javascript">
function show_calendar( val ) {
if ( val.match("^flat_rate") || val.match("^free_shipping") ) {
jQuery('#show-if-shipping').fadeIn();
} else {
jQuery('#show-if-shipping').fadeOut();
}
}
jQuery(document).ajaxComplete(function() {
var val = jQuery('input[name^="shipping_method"]:checked').val();
show_calendar( val );
});
</script>
<?php
}
add_action( 'woocommerce_checkout_process', 'bbloomer_validate_new_checkout_fields' );
function bbloomer_validate_new_checkout_fields() {
if ( isset( $_POST['delivery_date'] ) && empty( $_POST['delivery_date'] ) ) wc_add_notice( __( 'Please select the Delivery Date' ), 'error' );
}
// -------------------------------
// 2. Load JQuery Datepicker
add_action( 'woocommerce_after_checkout_form', 'bbloomer_enable_datepicker', 10 );
function bbloomer_enable_datepicker() {
?>
//code.jquery.com/ui/1.11.4/jquery-ui.js
<?php
}
// -------------------------------
// 3. Load Calendar Dates
add_action( 'woocommerce_after_checkout_form', 'bbloomer_load_calendar_dates', 20 );
function bbloomer_load_calendar_dates( $available_gateways ) {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#datepicker').click(function() {
$('#datepicker').datepicker({
dateFormat: 'dd-mm-yy',
maxDate: "+2m",
minDate: 1,
}).datepicker( "show" );
});
});
</script>
<?php
}
// -------------------------------
// 4. Save & show date as order meta
add_action( 'woocommerce_checkout_update_order_meta', 'bbloomer_save_date_weight_order' );
function bbloomer_save_date_weight_order( $order_id ) {
global $woocommerce;
if ( $_POST['delivery_date'] ) update_post_meta( $order_id, '_delivery_date', esc_attr( $_POST['delivery_date'] ) );
}
add_action( 'woocommerce_admin_order_data_after_billing_address', 'bbloomer_delivery_weight_display_admin_order_meta' );
function bbloomer_delivery_weight_display_admin_order_meta( $order ) {
echo '<p><strong>Delivery Date:</strong> ' . get_post_meta( $order->get_id(), '_delivery_date', true ) . '</p>';
}إذا كنت تحب البرمجة ولكنك لا تشعر بالثقة بنسبة 100٪ مع PHP ، فقد قررت البحث عن مكون إضافي موثوق به يحقق نفس النتيجة.
في هذه الحالة ، أوصي باستخدام المكون الإضافي WooCommerce Delivery Slots . علاوة على إظهار منتقي التاريخ والوقت على صفحة الخروج ، يمكنك أيضًا تقييد الساعات والأيام ، وتحصيل الرسوم والأقساط مقابل فترات زمنية محددة وغير ذلك الكثير.
ولكن في حال كنت تكره المكونات الإضافية وترغب في كتابة التعليمات البرمجية (أو ترغب في تجربة ذلك) ، فاستمر في القراءة 🙂
WooCommerce: قصر الشحن على دولة واحدة فقط
WooCommerce: Get / Edit Logged in Username @ Checkout
WooCommerce: قصر القوائم المنسدلة للولاية على ولاية واحدة فقط
WooCommerce: عرض إجمالي الخصم / التوفير في سلة التسوق والدفع
WooCommerce: تعيين مدينة الفوترة الافتراضية (أو حقول أخرى) @ Checkout
WooCommerce: الشحن فقط إلى عناوين “الاستلام المحلية” المحددة مسبقًا
WooCommerce: تحرير “عودة الزبون؟” رسالة @ الخروج
WooCommerce: مستخدم معفي من الضرائب بناءً على قيمة حقل الخروج
WooCommerce: عرض الحقول المخصصة المتقدمة @ منتج واحد
WooCommerce: Maxlength و Minlength لحقول الخروج
يمكنك وضع مقتطفات PHP في الجزء السفلي من ملف function.php القالب الفرعي الخاص بك (احذف “؟>” إذا كان لديك هناك). من ناحية أخرى ، ينتقل CSS في ملف style.css الخاص بسمة الطفل. تأكد من أنك تعرف ما تفعله عند تحرير مثل هذه الملفات – إذا كنت بحاجة إلى مزيد من الإرشادات ، فيرجى إلقاء نظرة على الفيديو التعليمي المجاني الخاص بي “أين تضع تخصيص WooCommerce؟”
يرجى إعلامي في التعليقات إذا كان كل شيء يعمل كما هو متوقع. يسعدني مراجعة المقتطف إذا أبلغت بخلاف ذلك (يرجى تقديم لقطات شاشة). لقد اختبرت هذا الكود مع موضوع Storefront وإصدار WooCommerce المذكور أعلاه واستضافة صديقة لـ وورد بريس على PHP 7.3.
إذا كنت تعتقد أن هذا الرمز وفر لك الوقت والمال ، فلا تتردد في الانضمام إلى أكثر من 14000 مشترك في WooCommerce Weekly للحصول على تحديثات منشورات المدونة أو أكثر من 250 من مؤيدي Business Bloomer لمدة 365 يومًا من مزايا WooCommerce . شكرا لكم مقدما 🙂
تحقق من دروس الفيديو المجانية هذه. يمكنك تعلم كيفية تخصيص WooCommerce بدون مكونات إضافية غير ضرورية ، وكيفية تكوين إعدادات البرنامج المساعد WooCommerce بشكل صحيح وحتى كيفية إتقان استكشاف أخطاء WooCommerce في حالة حدوث خطأ!
