דלג לתוכן
  • ראשי
  • אודות
    • מהתקשורת
    • המלצות
    • שאלות נפוצות
  • ההתמחות שלנו
    • בניית אתר מכירות
    • בניית אתרי תדמית לעסקים
    • בניית אתר וורדפרס
    • קידום אתרים אורגני
  • מאמרים
  • תיק עבודות
  • יצירת קשר
  • ראשי
  • אודות
    • מהתקשורת
    • המלצות
    • שאלות נפוצות
  • ההתמחות שלנו
    • בניית אתר מכירות
    • בניית אתרי תדמית לעסקים
    • בניית אתר וורדפרס
    • קידום אתרים אורגני
  • מאמרים
  • תיק עבודות
  • יצירת קשר
להתקשרות 054-395-1900

הוספת חתימה דיגיטלית לעמוד מוצר

דף הבית » טיפים לווקומרס » הוספת חתימה דיגיטלית לעמוד מוצר

  • יוסי מזרחי
  • ספטמבר 15, 2024
לרכישת אלמנטור פרו
לרכישת קרוקובלוק ג'ט

הוספת חתימה דיגיטלית בעמוד מוצר של ווקומרס – איך עושים את זה 

הוספת חתימה דיגיטלית לעמוד מוצר

כדי לאפשר את האופציה לחתימה דיגיטלית אנחנו נצטרך להוסיף קוד סניפט לתבנית או לתוסף יעודי. אני ממליץ להוסיף באמצעות תוסף של Code Snippets. מדובר בתוסף קליל שלא מכביד על המערכת יתר על המידה.

אנחנו נתקין אותו ונוסיף קוד סניפט חדש – את הקוד הבא

				
					// הוספת שדה החתימה לעמוד המוצר עם Signature Pad
add_action('woocommerce_before_add_to_cart_button', 'add_signature_pad_field');
function add_signature_pad_field() {
    ?>
    <div class="signature-field">
        <label for="customer_signature">חתימה דיגיטלית:</label>
        <canvas id="signature-pad" width="400" height="200" style="border:1px solid #000;"></canvas>
        <br>
        <button type="button" id="clear-signature">נקה חתימה</button>
        <textarea id="customer_signature" name="customer_signature" style="display:none;"></textarea>
    </div>
    <script data-minify="1" src="https://www.ymdigital.co.il/wp-content/cache/min/1/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js?ver=1778666365" data-rocket-defer defer></script>
    <script>window.addEventListener('DOMContentLoaded', function() {
        var canvas = document.getElementById('signature-pad');
        var signaturePad = new SignaturePad(canvas);

        // כאשר לוחצים על "נקה חתימה"
        document.getElementById('clear-signature').addEventListener('click', function () {
            signaturePad.clear();
        });

        // לפני הוספת מוצר לעגלה - שמירת החתימה בתור Base64 בטקסט
        jQuery('form.cart').on('submit', function () {
            if (!signaturePad.isEmpty()) {
                var dataUrl = signaturePad.toDataURL();
                document.getElementById('customer_signature').value = dataUrl;
            } else {
                alert('אנא חתם לפני הוספת המוצר לעגלה.');
                return false;
            }
        });
    });</script>
    <?php
}

// שמירת החתימה בעגלת הקניות ושמירת הקובץ בספריית ההעלאות
add_action('woocommerce_add_cart_item_data', 'save_signature_pad_to_cart', 10, 2);
function save_signature_pad_to_cart($cart_item_data, $product_id) {
    if (isset($_POST['customer_signature']) && !empty($_POST['customer_signature'])) {
        $signature_data = $_POST['customer_signature'];

        // שמירת Base64 כקובץ תמונה בשרת
        $upload_dir = wp_upload_dir();
        $upload_path = $upload_dir['basedir'] . '/signatures/';
        if (!file_exists($upload_path)) {
            mkdir($upload_path, 0755, true);
        }

        // יצירת שם קובץ ייחודי
        $file_name = uniqid() . '.png';
        $file_path = $upload_path . $file_name;
        $file_url = $upload_dir['baseurl'] . '/signatures/' . $file_name;

        // הסרת ה-Base64 header ושמירת התמונה כקובץ PNG
        $signature_data = str_replace('data:image/png;base64,', '', $signature_data);
        $signature_data = str_replace(' ', '+', $signature_data);
        $decoded_data = base64_decode($signature_data);
        file_put_contents($file_path, $decoded_data);

        // שמירת הקובץ בעגלת הקניות
        $cart_item_data['customer_signature'] = $file_url;
    }
    return $cart_item_data;
}

// הצגת החתימה בעגלת הקניות ובדף התשלום
add_filter('woocommerce_get_item_data', 'display_signature_pad_in_cart', 10, 2);
function display_signature_pad_in_cart($item_data, $cart_item) {
    if (isset($cart_item['customer_signature'])) {
        $item_data[] = array(
            'name' => 'חתימה דיגיטלית',
            'value' => '<img decoding="async" src="' . esc_url($cart_item['customer_signature']) . '" style="max-width: 200px;" data-lazy-src="http://&#039;%20.%20esc_url($cart_item%5B&#039;customer_signature&#039;%5D)%20.%20&#039;" /><noscript><img decoding="async" src="' . esc_url($cart_item['customer_signature']) . '" style="max-width: 200px;" /></noscript>'
        );
    }
    return $item_data;
}

// שמירת החתימה עם פרטי ההזמנה
add_action('woocommerce_checkout_create_order_line_item', 'save_signature_pad_to_order_items', 10, 4);
function save_signature_pad_to_order_items($item, $cart_item_key, $values, $order) {
    if (isset($values['customer_signature'])) {
        $item->add_meta_data('חתימה דיגיטלית', $values['customer_signature'], true);
    }
}





add_action('wp_head', 'custom_signature_field_styles');
function custom_signature_field_styles() {
    ?>
    <style>
        .signature-field canvas {
            width: 100% !important;
            height: auto;
        }
    </style>
    <?php
}

				
			

חתימה דיגטלית בעמוד מוצר ווקומרס

הקוד יוסיף לנו אופציה ממש לקשקש עם עט או עם האצבע. וגם יוסיף לנו כפתור לניקוי חתימה. כמו כן נקבל את החתימה עם ההזמנה של ווקומרס וכך יהיה לנו תיעוד של החתימה הדיגיטלית

כתיבת תגובה לבטל

האימייל לא יוצג באתר. שדות החובה מסומנים *

הבאכפתור קנה עכשיו ווקומרס – לרכישה מהירההבא
מה יש לנו במאמר
אוליי יעניין אתכם גם
undefined

יצירת מגה תפריט באלמנטור: UX מנצח לאתרים גדולים

לקריאת המאמר ⟵
יצירת מגה תפריט באלמנטור: UX מנצח לאתרים גדולים
כפתור קרא עוד - אלמנטור

כפתור קרא עוד – אלמנטור

לקריאת המאמר ⟵
כפתור קרא עוד – אלמנטור
כפתור בטופס יצירת קשר בשני צבעים

כפתור בטופס יצירת קשר בשני צבעים

כפתור בטופס יצירת קשר בשני צבעים איך עושים את זה? בדיפולט אלמנטור מאפשר צבע אחד בלבד בכפתור יצירת קשר וכך תעשו מעבר צבע
לקריאת המאמר ⟵
כפתור בטופס יצירת קשר בשני צבעים
טקסט מסתובב באנימצייה קבועה

טקסט מסתובב באנימצייה קבועה

טקסט מסתובב באנימצייה קבועה באלמנטור - טרנד עיצובי שתפגשו בהמון אתרים ועם ההדרכה הבאה תדעו גם להשתמש בה בפרויקטים שלכם >>
לקריאת המאמר ⟵
טקסט מסתובב באנימצייה קבועה
כותרת אלמנטור עם רקע תמונה מאחורה

כותרת אלמנטור עם רקע תמונה מאחורה

כותרת אלמנטור עם רקע של תמונה יכול לעזור לכם בעיצובים מורכבים לפי הדרישה. מצורף לכם קוד לישום באתר שלכם
לקריאת המאמר ⟵
כותרת אלמנטור עם רקע תמונה מאחורה

כותרת אלמנטור עם קו תחתון

כותרת אלמנטור עם קו תחתון בצבע לעיצוב חדשני
לקריאת המאמר ⟵
כותרת אלמנטור עם קו תחתון
YMdigital

חברה לבניית אתרים וקידום אורגני. בונים אתרי וורדפרס מתקדמים שמביאים תוצאות.

חייגו עכשיו לשיחת ייעוץ! 054-395-1900 וואטסאפ
google ביקורות גוגל
5.0
ראו את כל 20 הביקורות

ניווט באתר

  • ראשי
  • אודות
  • המלצות
  • תיק עבודות
  • צור קשר

שירותי החברה

  • בניית אתר מכירות
  • בניית אתרי תדמית
  • בניית אתר וורדפרס
  • קידום אתרים אורגני
  • קורס פיתוח אתרים

מאמרים אחרונים

  • מכירת מנויים (Subscriptions) וחיובים חוזרים בווקומרס
  • תוספי Wishlist והשוואת מוצרים: למה זה קריטי להמרה?
  • סינון מוצרים מתקדם (JetSmartFilters): שיפור חוויית הקנייה
א'-ה' · 10:00–18:00 054-395-1900 Yossimzhp@gmail.com תנופה 7-ב חריש

© 2026 YMdigital · כל הזכויות שמורות

מפת אתר הצהרת נגישות מדיניות פרטיות תקנון
חייגו עכשיו לשיחת ייעוץ! 054-395-1900