كيف اختصرت إضافات ووكومرس بأكواد (Snippets) بسيطة مفيدة للمتجر

غالبًا ما يعتمد أصحاب المتاجر الإلكترونية على عدد كبير من إضافات ووكومرس لتخصيص متاجرهم وتحسين وظائفها. إلا أن كثرة هذه الإضافات قد تتسبب في بطء الموقع أو حدوث تعارضات تؤثر على أداء واستقرار المتجر.

لذلك بحثت عن بديل عملي، فتوصلت إلى استخدام أكواد Snippets، وهي عبارة عن أكواد برمجية بسيطة تُضاف مباشرة إلى ملفات الموقع لتقديم نفس المزايا دون الحاجة إلى تثبيت العديد من الإضافات الخارجية.

في هذا المقال، سأشارك معكم بعض الأمثلة العملية لهذه الأكواد، وبالأخص الأكواد الأساسية التي أعتمد عليها في متجري، إضافةً إلى شرح طريقة إضافتها للمتجر مع توفير الأكواد الجاهزة.

كيفية إضافة أكواد سنبيتس (Snippets) إلى متاجر ووكومرس

اكواد سنبيتس (Snippets) عبارة عن أكواد برمجية تُضاف إلى كود القالب لتؤدي وظيفتها، لذلك يمكنك إضافتها داخل ملف خصائص القالب functions.php مباشرًة أو بالاعتماد على إضافات إدارة الأكواد مثل إضافة Code Snippets.

في حالة الاعتماد على ملف خصائص القالب functions.php، تستطيع الوصول إليه بسهولة عبر الانتقال إلى تبويب “المظهر” >> “محرر ملف القالب” من لوحة تحكم ووردبريس الرئيسية.

ثم اختر ملف خصائص القالب functions.php من القائمة الجانبية وأضف كود سنبيتس المطلوب. بعد ذلك اضغط على زر “تحديث القالب” لتفعيل الكود على متجرك ببساطة.

الحل الآخر الذي أفضله شخصيًا هو إضافة الأكواد عبر إضافات إدارة الأكواد مثل Code Snippets، لأنه يضيف الكود بشكل منفصل دون أن يؤثر على كود القالب نفسه، إذ أن التعديل الخاطئ على كود القالب قد يسبب مشاكل في أداء المتجر.

وقد تطرقنا سابقًا إلى طريقة إضافة الأكواد عبر إضافة Code Snippets خطوة بخطوة في مقال “كيفية إضافة كود برمجي مخصص (Code snippet) في موقعك الووردبريس“، تستطيع مراجعتها للتعرف على آلية التعامل مع الإضافة تفصليًا على ووردبريس.

تطبيقات عملية لأهم أكواد سنبيتس لتعزيز متجرك على ووكومرس

أكواد سنبيتس (Snippets) كثيرة ومتنوعة، تغطي وظائف واستخدامات متعددة في ووكومرس. في الفقرات التالية سأستعرض أبرز الأكواد التي أعتمد عليها عمليًا في متجري، لتسهيل الإدارة وتحسين تجربة المستخدم، كمثال عملي على استخدام الأكواد.

01- تغيير نص زر (Add to Cart)

بعض قوالب ووكومرس تواجه مشاكل في تعريب بعض العناصر، لذلك يمكن الاعتماد على أكواد سنبيتس بسهولة لتعديل النصوص بما يتناسب مع لغة وهوية المتجر.

على سبيل المثال، زر (Add to Cart) من أبرز العناصر التي قد يُعرب بشكل خاطئ في بعض القوالب. يمكن تعريب أو تعديل نص هذا الزر بسهولة باستخدام نص مناسب مثل “اشترِ الآن” أو “اطلب الآن” أو “أضف إلى السلة” أو غيرها.

يمكنك الاعتماد على الكود التالي لتعريب أو تعديل نص زر (Add to Cart) بسهولة:

// تغيير نص زر "أضف إلى السلة" في ووكومرس
add_filter( 'woocommerce_product_single_add_to_cart_text', 'custom_single_add_to_cart_text' );
add_filter( 'woocommerce_product_add_to_cart_text', 'custom_single_add_to_cart_text' );

function custom_single_add_to_cart_text() {
    return __( 'اطلب الآن', 'woocommerce' ); // هنا ضع النص الجديد
}

بعد إضافة الكود إلى المتجر، ستلاحظ تعديل نص زر (Add to Cart) مباشرة، دون الحاجة للاعتماد على أي إضافات ترجمة خارجية أو تعديل كود القالب، كما هو واضح في الصورة التالية:

02- إعادة توجيه العميل تلقائيًا لصفحة الدفع بعد إضافة منتج

يوفر ووكومرس خيار تحويل الزائر إلى صفحة السلة مباشرةً بعد إضافة المنتج إلى سلة المشتريات، لكنه لا يتيح خيار إعادة التوجيه التلقائي إلى صفحة الدفع. كثير من أصحاب المتاجر يفضلون تفعيل هذا الخيار لتفادي فقدان العميل في صفحة السلة وتسريع عملية الشراء، مما يعزز تجربة المستخدم على المتجر.

كنت أعتمد دائمًا على إضافة WooCommerce Direct Checkout، لكن عند استبدالها بأكواد سنبيتس استطعت بسهولة إضافة الكود التالي إلى المتجر لتفعيل التوجيه التلقائي إلى صفحة إتمام الدفع بعد إضافة المنتج، دون الحاجة لأي إضافات خارجية أو إعدادات إضافية.

// إعادة التوجيه مباشرة إلى صفحة الدفع بعد إضافة المنتج إلى السلة
add_filter( 'woocommerce_add_to_cart_redirect', 'custom_add_to_cart_redirect' );
function custom_add_to_cart_redirect() {
    return wc_get_checkout_url();
}

03- إخفاء طرق دفع معينة بناءً على شروط خاصة

تستطيع من خلال إعدادات المدفوعات في ووكومرس تفعيل أو تعطيل بوابات الدفع، لكن لا يتوفر خيار مخصص لإضافة شروط خاصة مثل إخفاء طريقة دفع معينة إذا تجاوزت قيمة الطلب مبلغًا محددًا، كما لم أجد إضافة مخصصة تتيح ذلك بسهولة.

وهذا من الأمور التي أفضل تفعيلها في متجري، حيث لا أحبذ استخدام خيار الدفع عند الاستلام في الطلبات ذات المبالغ الكبيرة، لأنها في حال كانت طلبات وهمية قد تؤثر سلبًا على المخزون والمنتجات.

لذلك من خلال كود سنبيتس التالي أستطيع إضافة شرط يمنع ظهور بوابة الدفع عند الاستلام إذا تجاوزت قيمة الطلب مبلغ 1000 ريال:

// إخفاء خيار الدفع عند الاستلام إذا تجاوز الطلب 1000
add_filter( 'woocommerce_available_payment_gateways', 'hide_cod_if_order_total_high' );

function hide_cod_if_order_total_high( $available_gateways ) {
    if ( is_admin() ) return $available_gateways;

    // التحقق من وجود جلسة الطلب
    if ( WC()->cart ) {
        $order_total = WC()->cart->get_total( 'edit' );
       
        // إذا تجاوز الإجمالي 1000، احذف خيار الدفع عند الاستلام
        if ( isset( $available_gateways['cod'] ) && $order_total > 1000 ) {
            unset( $available_gateways['cod'] );
        }
    }

    return $available_gateways;
}

يمكنك بسهولة تعديل قيمة الطلب عبر استبدال رقم (1000) بالقيمة المناسبة، وبذلك تتحكم في إتاحة خيار الدفع عند الاستلام بناءً على المبلغ الكلي للطلب على متجرك.

04- عرض عدد المنتجات المتبقية في المخزون بجانب السعر

أعتمد كثيرًا على استراتيجية عرض عدد المنتجات المتبقية في المخزون داخل صفحة المنتج، حيث تساعد هذه الطريقة على خلق إحساس بالندرة وتشجع العملاء على سرعة إتمام عملية الشراء.

صحيح أن هناك العديد من الإضافات في ووردبريس التي تحقق هذا الغرض مثل: WooCommerce Stock Manager أو Low Stock & Out of Stock Notifier، لكن الأسهل والأخف دائمًا هو الاعتماد على كود سنبيتس صغير يحقق نفس النتيجة.

// عرض عدد المنتجات المتبقية في المخزون بجانب السعر
add_filter( 'woocommerce_get_price_html', 'show_stock_next_to_price', 10, 2 );

function show_stock_next_to_price( $price_html, $product ) {
    if ( $product->is_in_stock() ) {
        $stock_quantity = $product->get_stock_quantity();
        if ( $stock_quantity !== null ) {
            $price_html .= ' (' . $stock_quantity . ' متبقي)';
        }
    }
    return $price_html;
}

بعد إضافة الكود إلى المتجر، والتوجه إلى صفحة أحد المنتجات، ستلاحظ أن عدد القطع المتبقية في المخزون يظهر بجوار السعر مباشرة كما هو موضح في الصورة التالية:

05- إضافة عمود “الرقم الضريبي” أو “رقم الهوية” في صفحة الدفع

كثير من المتاجر ذات التراخيص الرسمية، خصوصًا في المملكة العربية السعودية، تتطلب إدخال الرقم الضريبي أو رقم الهوية عند إتمام عملية الدفع حتى يظهر في تفاصيل الفاتورة. 

يمكن تنفيذ ذلك باستخدام إضافات النماذج الشهيرة مثل Checkout Field Editor، لكن الأسهل دائمًا هو إضافته عبر كود سنبيتس صغير كما يلي:

// 1. إضافة حقل الرقم الضريبي / الهوية في صفحة الدفع
add_filter( 'woocommerce_checkout_fields', 'add_tax_id_checkout_field' );
function add_tax_id_checkout_field( $fields ) {
    $fields['billing']['billing_tax_id'] = array(
        'type'        => 'text',
        'label'       => __('الرقم الضريبي / رقم الهوية', 'woocommerce'),
        'placeholder' => __('أدخل رقمك الضريبي أو رقم الهوية', 'woocommerce'),
        'required'    => true, // اجعله اختياري إذا أردت
        'class'       => array('form-row-wide'),
        'clear'       => true,
        'priority'    => 120,
    );
    return $fields;
}

// 2. حفظ الرقم الضريبي / الهوية مع طلب الشراء
add_action( 'woocommerce_checkout_update_order_meta', 'save_tax_id_checkout_field' );
function save_tax_id_checkout_field( $order_id ) {
    if ( ! empty( $_POST['billing_tax_id'] ) ) {
        update_post_meta( $order_id, '_billing_tax_id', sanitize_text_field( $_POST['billing_tax_id'] ) );
    }
}

// 3. عرض الرقم الضريبي / الهوية في صفحة تفاصيل الطلب في لوحة التحكم
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_tax_id_in_admin_order', 10, 1 );
function display_tax_id_in_admin_order( $order ){
    $tax_id = get_post_meta( $order->get_id(), '_billing_tax_id', true );
    if ( $tax_id ) {
        echo '
'.__('الرقم الضريبي / الهوية').': ' . esc_html( $tax_id ) . '
';
    }
}

// 4. عرض الرقم الضريبي / الهوية في صفحة تأكيد الطلب و البريد الإلكتروني
add_filter( 'woocommerce_order_formatted_billing_address', 'add_tax_id_to_billing_address', 10, 2 );
function add_tax_id_to_billing_address( $address, $order ) {
    $tax_id = get_post_meta( $order->get_id(), '_billing_tax_id', true );
    if ( $tax_id ) {
        $address['tax_id'] = __('الرقم الضريبي / الهوية', 'woocommerce') . ': ' . $tax_id;
    }
    return $address;
}

الكود السابق يساعدك على:

• عرض حقل الرقم الضريبي / رقم الهوية في صفحة إتمام الدفع.
• جعل الحقل إلزاميًا قبل إتمام عملية الشراء.
• إظهار الرقم في بيانات الفاتورة على المتجر كما يظهر في الصورة المرفقة.

وعند التوجه إلى تفاصيل الطلب في ووكومرس ستلاحظ أن الرقم الضريبي / الهوية يظهر أيضًا في بيانات الطلب الداخلية، بالإضافة إلى ظهوره بشكل واضح في فاتورة العميل المصدّرة من المتجر.

06- إظهار وقت الشحن المقدر على صفحات المنتج

أحد الاستراتيجيات التي أعتمدها أيضًا هي إظهار وقت الشحن المقدر على صفحات المنتج، وذلك لزيادة ثقة العميل من خلال طمأنته بموعد استلام طلبه المتوقع، مما يرفع من مستوى مصداقية المتجر ويشجّعه على إتمام عملية الشراء.

يمكن تفعيل هذه الميزة عبر إضافات ووكومرس مثل WooCommerce Estimated Delivery Date & Time أو غيرها، لكني أفضل تفعيلها ببساطة أيضًا باستخدام الكود التالي:

 '_shipping_time',
        'label'       => __('وقت الشحن المتوقع', 'wc-shipping-time','أيام'),
        'description' => __('Enter shipping time, e.g., 24H, 48H, 3 days', 'wc-shipping-time'),
        'desc_tip'    => true,
    ]);
}
add_action('woocommerce_product_options_general_product_data', 'wcst_add_shipping_time_field');

/**
* Save the shipping time field data for simple products.
*/
function wcst_save_shipping_time_field($post_id) {
    if (isset($_POST['_shipping_time'])) {
        update_post_meta($post_id, '_shipping_time', sanitize_text_field($_POST['_shipping_time']));
    }
}
add_action('woocommerce_process_product_meta', 'wcst_save_shipping_time_field');

/**
* Add shipping time field to variations.
*/
function wcst_add_shipping_time_to_variations($loop, $variation_data, $variation) {
    woocommerce_wp_text_input([
        'id'          => "variation_shipping_time_$variation->ID",
        'label'       => __('وقت الشحن المتوقع', 'wc-shipping-time','أيام'),
        'description' => __('Enter shipping time for this variation, e.g., 24H, 48H, 3 days', 'wc-shipping-time'),
        'desc_tip'    => true,
        'type'        => 'text',
        'value'       => get_post_meta($variation->ID, '_shipping_time', true),
    ]);
}
add_action('woocommerce_variation_options_pricing', 'wcst_add_shipping_time_to_variations', 10, 3);

/**
* Save shipping time for variations.
*/
function wcst_save_shipping_time_variation($variation_id) {
    if (isset($_POST["variation_shipping_time_$variation_id"])) {
        update_post_meta($variation_id, '_shipping_time', sanitize_text_field($_POST["variation_shipping_time_$variation_id"]));
    }
}
add_action('woocommerce_save_product_variation', 'wcst_save_shipping_time_variation', 10, 2);

/**
* Pass variation shipping time data to WooCommerce variation system.
*/
function wcst_add_variation_shipping_time_data($data, $product, $variation) {
    if (!is_array($data)) {
        $data = [];
    }
    $shipping_time = get_post_meta($variation->get_id(), '_shipping_time', true);
    $data['shipping_time'] = !empty($shipping_time) ? $shipping_time : '';
   
    return $data;
}
add_filter('woocommerce_available_variation', 'wcst_add_variation_shipping_time_data', 10, 3);

/**
* Display the shipping time on the product page and support default variations.
*/
function wcst_display_shipping_time() {
    global $product;

    if (!$product || !is_a($product, 'WC_Product')) {
        return;
    }

    $shipping_time="";

    // Handle default variation selection
    if ($product->is_type('variable')) {
        $default_attributes = $product->get_default_attributes();
        foreach ($product->get_available_variations() as $variation) {
            $match = true;
            foreach ($default_attributes as $attribute => $value) {
                if ($variation['attributes']['attribute_' . $attribute] !== $value) {
                    $match = false;
                    break;
                }
            }
            if ($match) {
                $variation_id = $variation['variation_id'];
                $shipping_time = get_post_meta($variation_id, '_shipping_time', true);
                break;
            }
        }
    }

    // Fallback to parent product shipping time if no variation has shipping time
    if (empty($shipping_time)) {
        $shipping_time = get_post_meta($product->get_id(), '_shipping_time', true);
    }

    ?>
    

        
        
    

    
    

بعد إضافة الكود إلى المتجر والتوجه إلى صفحة إعداد المنتج، ستجد أن تبويب وقت الشحن المتوقع ظهر ضمن خيارات المنتج كما هو موضح في الصورة التالية:

وبعد تحديد وقت الشحن المتوقع، سيظهر مباشرةً في صفحة المنتج أسفل السعر كما هو ظاهر في الصورة التالية:

استخدام أكواد سنبيتس (Snippets) يُعد وسيلة فعّالة لتقليل الاعتماد على الإضافات الكثيرة في متاجر ووكومرس، مما يساعد على تحسين سرعة الموقع وتجنب التعارضات بين الإضافات. يمكن أيضًا الاستعانة بالذكاء الاصطناعي لتوليد أكواد جاهزة أو فحصها قبل الاستخدام، أو تعديل الأكواد الجاهزة لتتوافق مع القالب المستخدم. ومع ذلك فمن الضروري دائمًا أخذ نسخة احتياطية قبل أي تعديل لضمان سلامة المتجر.

لكن هناك عيب رئيسي لهذه الطريقة: الأكواد قد لا تعمل على جميع القوالب. على سبيل المثال، كود التوجيه إلى صفحة إتمام الدفع يعمل على القوالب الشائعة لووكومرس، أما إذا كان القالب يستخدم أزرار AJAX مخصصة تمنع الكود التقليدي من العمل مباشرة، فلن تجد الكود يعمل وستحتاج إلى تعديله ليتوافق مع قالب موقعك.

لذلك في بعض الحالات، قد يكون من الأفضل اللجوء إلى إضافات متخصصة لضمان التنفيذ الكامل عند عدم قدرتك على الحصول على الكود المناسب للوظيفة المطلوبة.