דלג לתוכן
חברה לבניית אתרים YMDigital
  • ראשי
  • אודות
    • מהתקשורת
    • המלצות
    • שאלות נפוצות
  • ההתמחות שלנו
    • בניית אתר מכירות
    • בניית אתרי תדמית לעסקים
    • בניית אתרים ב-AI
    • בניית אתר וורדפרס
    • קידום אתרים אורגני
  • מאמרים
  • תיק עבודות
  • יצירת קשר
  • ראשי
  • אודות
    • מהתקשורת
    • המלצות
    • שאלות נפוצות
  • ההתמחות שלנו
    • בניית אתר מכירות
    • בניית אתרי תדמית לעסקים
    • בניית אתרים ב-AI
    • בניית אתר וורדפרס
    • קידום אתרים אורגני
  • מאמרים
  • תיק עבודות
  • יצירת קשר
להתקשרות 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=1785172548" 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
}

				
			

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

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

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

המאמרים בבלוג נכתבים ע"י יוסי מזרחי, מומחה וורדפרס בכיר עם ניסיון מעל 8 שנים (מאז 2017) בבניית נכסים דיגיטליים מבוססי אסטרטגיה.

המומחיות מתמקדת בשיפור ביצועי ליבה (Core Web Vitals) והשגת ציוני PageSpeed ירוקים באופן עקבי, תוך הבטחת אופטימיזציה מלאה לקידום אתרים אורגני (SEO).

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

אודות יוסי ו - YMDigital

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

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

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

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

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

ניווט באתר

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

שירותי החברה

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

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

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

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

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

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

הבנתי