إذا كنت قد أخذت دورة ConfigureWoo عبر الإنترنت ، فستعرف أن WooCommerce تضيف قسم “وورد بريس Customizer” الخاص به والذي يسمى “WooCommerce” ، بالفعل. من هناك يمكنك إدارة بعض الإعدادات مثل إشعار المتجر وصور المنتج وحقول الخروج وما إلى ذلك.
ماذا لو كنت ترغب في إضافة الإعدادات الخاصة بك ، والسماح لنفسك أو للعميل بتبديل الخيارات أو كتابة قيم الإدخال ، بحيث يمكن تطبيق ذلك على موقع WooCommerce الحالي الخاص بك؟ حسنًا ، هذا ممكن تمامًا ، لذا في هذا المنشور سنرى كيف يفعلون ذلك. يتمتع!
إذا ذهبت إلى وورد بريس Dashboard> Appearance> Customize ، فسترى “وورد بريس Customizer”. بشكل افتراضي ، يضيف المكون الإضافي WooCommerce قسم “WooCommerce” الخاص به إلى Customizer ، ومن هناك يمكنك إدارة بعض الإعدادات.
في هذا المثال ، سنضيف مربع اختيار إلى قسم “WooCommerce”> “Checkout” وورد بريس Customizer ، والذي سينتقل بين تخطيط الخروج من عمودين (افتراضي لبعض سمات WooCommerce مثل Storefront ، 2021 ، وما إلى ذلك) و 1 تخطيط الخروج من العمود (هو بالفعل السلوك الطبيعي للهواتف المحمولة ، لذلك يتبع الفوترة الشحن وأخيراً مراجعة الطلب ، لكننا نريد هنا الحصول على نفس الشيء على أجهزة سطح المكتب أيضًا).
كما ترى داخل المقتطف هناك 3 أجزاء:
add_setting (): تقوم وظيفة وورد بريس هذه بإنشاء الخيار
add_control (): تتحكم وظيفة وورد بريس هذه في الخيار ، وتخبر WP أنها خانة اختيار وفي أي قسم يجب أن يظهر (woocommerce_checkout في المثال أدناه)
CSS الشرطي: هذا هو CSS الذي يتم تشغيله فقط إذا تم تمكين الخيار (تم تحديد مربع الاختيار في هذه الحالة)
/**
* @snippet WordPress Customizer Setting - WooCommerce
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible WooCommerce 4.6
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
add_action( 'customize_register', 'bbloomer_woocommerce_wordpress_customizer_css_option' );
function bbloomer_woocommerce_wordpress_customizer_css_option( $wp_customize ) {
$wp_customize->add_setting( 'woocommerce_checkout_switch_col_layout', array(
'default' => 'no',
'type' => 'option',
'capability' => 'manage_woocommerce',
'sanitize_callback' => 'wc_bool_to_string',
'sanitize_js_callback' => 'wc_string_to_bool',
));
$wp_customize->add_control( 'woocommerce_checkout_switch_col_layout', array(
'label' => 'Switch layout',
'description' => 'Optionally switch to a 1-column checkout on desktops',
'section' => 'woocommerce_checkout',
'settings' => 'woocommerce_checkout_switch_col_layout',
'type' => 'checkbox',
));
}
add_action( 'wp_head', 'bbloomer_switch_checkout_cols_css' );
function bbloomer_switch_checkout_cols_css() {
if ( true === wc_string_to_bool( get_option( 'woocommerce_checkout_switch_col_layout', 'yes' ) ) ) {
?>
<style type="text/css">
.woocommerce-checkout form .col2-set, .woocommerce-checkout form #order_review, .woocommerce-checkout form #order_review_heading {
width: 100%;
float: none;
clear: none;
padding-left: 0;
padding-right: 0;
}
</style>
<?php
}
}قبل: على سطح المكتب ، يظهر المظهر الخاص بي عملية سحب مكونة من عمودين.
بعد: بمجرد تحديد الإعداد المخصص (مربع اختيار) ، ينتقل تخطيط الخروج على سطح المكتب إلى عمود واحد.
WooCommerce: قصر الشحن على دولة واحدة فقط
WooCommerce: Get / Edit Logged in Username @ Checkout
WooCommerce: قصر القوائم المنسدلة للولاية على ولاية واحدة فقط
WooCommerce: عرض إجمالي الخصم / التوفير في سلة التسوق والدفع
WooCommerce: أضف CSS لطلب رسائل البريد الإلكتروني
WooCommerce: تعيين مدينة الفوترة الافتراضية (أو حقول أخرى) @ Checkout
WooCommerce: الشحن فقط إلى عناوين “الاستلام المحلية” المحددة مسبقًا
WooCommerce: تحرير “عودة الزبون؟” رسالة @ الخروج
WooCommerce: مستخدم معفي من الضرائب بناءً على قيمة حقل الخروج
WooCommerce: عيّن حالة الطلب المخصص للأوامر الجديدة
يمكنك وضع مقتطفات PHP في الجزء السفلي من ملف function.php القالب الفرعي الخاص بك (احذف “؟>” إذا كان لديك هناك). من ناحية أخرى ، ينتقل CSS في ملف style.css الخاص بسمة الطفل. تأكد من أنك تعرف ما تفعله عند تحرير مثل هذه الملفات – إذا كنت بحاجة إلى مزيد من الإرشادات ، فيرجى إلقاء نظرة على الفيديو التعليمي المجاني الخاص بي “أين تضع تخصيص WooCommerce؟”
يرجى إعلامي في التعليقات إذا كان كل شيء يعمل كما هو متوقع. يسعدني مراجعة المقتطف إذا أبلغت بخلاف ذلك (يرجى تقديم لقطات شاشة). لقد اختبرت هذا الكود مع موضوع Storefront وإصدار WooCommerce المذكور أعلاه واستضافة صديقة لـ وورد بريس على PHP 7.3.
إذا كنت تعتقد أن هذا الرمز وفر لك الوقت والمال ، فلا تتردد في الانضمام إلى أكثر من 14000 مشترك في WooCommerce Weekly للحصول على تحديثات منشورات المدونة أو أكثر من 250 من مؤيدي Business Bloomer لمدة 365 يومًا من مزايا WooCommerce . شكرا لكم مقدما 🙂
تحقق من دروس الفيديو المجانية هذه. يمكنك تعلم كيفية تخصيص WooCommerce بدون مكونات إضافية غير ضرورية ، وكيفية تكوين إعدادات البرنامج المساعد WooCommerce بشكل صحيح وحتى كيفية إتقان استكشاف أخطاء WooCommerce في حالة حدوث خطأ!
