נכתב ע״י רועי יוסף
עודכן ב- 5 למאי, 2018

וריאציות מוצרים – ווקומרס (WooCommerce)

וריאיציות מוצרים - ווקומרס

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

לדוגמא, צבעים שונים, גדלים, מחירים ועוד. במדריך זה אלמד כיצד ליצור וריאציות מוצרים (Variable Products) בווקומרס וכיצד לשייך תכונות, מונחים ווריאציות שונות למוצרים שלכם, כמו גם כיצד לשייך תמונות לאותן וריאציות.

לפני שתנחיל ואם אינכם בקיאים בכיצד להתקין ולהגדיר את ווקומרס, אתם מוזמנים לתת מבט במאמר שכתבתי על הקמת חנות וירטואלית בוורדפרס באמצעות woocommerce (הוא עודכן לאחרונה). בואו נתחיל…

יצירת תכונות

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

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

הוספת מונחים לתכונות - וריאצית מוצר - ווקומרס

יצירת מוצר עם וריאציות

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

וריאצית מוצר - ווקומרס

הוספת תכונות למוצרים

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

הוספת תכונות למוצרים - ווקומרס

כעת בחרו את המונחים שאתם מעוניינים בהם לאותו מוצר.

הוספת תכונות למוצר - ווקומרס

  1. וודאו כי האפשרויות מוצג בעמוד המוצר ו נועד עבור וריאציות מסומנות.
  2. בחרו את המונחים לאותו מוצר. ניתן לבחור את כל המונחים של אותה תכונה או חלקם, לדוגמא, אם מוצר מסויים קיים רק בגודל בינוני, הוסיפו רק מונח זה לאותו מוצר. לחצו על שמור תכונות.
  3. באפשרותכם ללחוץ על לבחור הכל. כפתור זה יוסיף את כל המונחים אשר שויכו לתכונה מסויימת למוצר שלכם.
  4. באפשרותכם להוסיף מונחים נוספים (שלא יצרתם לפני כן) למוצר באמצעות לחיצה על הכפתור הוסף חדש.

וריאציות

כעת אנו צריכים להוסיף את הוריאציות למוצר, גשו ללשונית וריאציות באותו עמוד.

הוספת וריאצית מוצר - ווקומרס
1. בשדה ערכי ברירת מחדל בטופס אתם יכולים לבחור את תכונת ברירת המחדל אשר תופיע בעמוד המוצר שהלקוח רואה.
2. כאשר מוסיפים וריאציות, עריכה קבוצתית יכולה לשמש ולהקל עלינו במידה וישנם הרבה וריאציות. שדה ה drop down מאפשר לכם לבצע פעולות על כל קבוצת הוריאציות שהוספתם למוצר זה אך גם מאפשר לכם להוסיף וריאציה ספציפית. לדוגמא, האפשרות הוסף וריאציות מכל התכונות תיצור אוטומטית כל וריאציה אפשרית בהתאם לתכונות ולמונחים שבחרתם לאותו מוצר. זוהי הדרך המהירה ביותר להוסיף וריאציות למוצר.

♥
הצטרפו לרשימת התפוצה!

הגדרת וריאציות

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

חלון זה נפתח על ידי לחיצה על המשולש הקטן (מסומן בתמונה) ליד הוריאציה אותה הוספתם.

הגדרת וריאציה למוצר יחיד - ווקומרס

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

שמרו את השינויים ופרסמו את המוצר. הציגו את המוצר באתר, וברגע שתבחרו את הוריאציה שיצרנו צבע צהוב – גודל בינוני) תראו משהו בסגנון הזה:

וריאציות מוצרים - תצוגה באתר

מעוניינים להרחיב את האפשרויות של מוצר עם וריאציות?

ההרחבה הבאה תאפשר לכם להחליף את ה drop down של בחירת הוריאציות בתמונות וצבעים. זוהי אפשרות מצויינת בכדי להציג את כל הצבעים האפשריים של מוצר מסויים ואת הדוגמאות שלו או כל מה שאתם חושבים שיכול להיות מוצג לפי תמונה או צבע כבדוגמא הבאה:

Variation-Swatches-and-Photos.png

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

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

 

רועי יוסף
רועי יוסף

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

עוד בנושא ווקומרס וחנויות אונליין
מהי Woocommerce ?
מהי ווקומרס (WooCommerce)?
woocommerce-store-wordpress
הקמת חנות וירטואלית בוורדפרס באמצעות WooCommerce
28תגובות...
הוסיפו תגובה
  • נירית 12 באוקטובר 2017, 21:54

    הי, יופי של מאמר ! תודה רבה !
    מדוע כשאני מנסה ליצור וריאציות הוא לא מאפשר לי לקבוע כמויות, זה נמצא על אפס ואין אפשרות לשנות.. אצלך פה כן יש אפשרות כזו..
    תודה

    הגיבו לתגובה זו קישור ישיר
    • רועי יוסף 12 באוקטובר 2017, 21:58

      היי נירית 🙂 איני מבין את השאלה.. על איזה כמויות בדיוק את מדברת? תפרטי…

      הגיבו לתגובה זו קישור ישיר
      • נירית 12 באוקטובר 2017, 22:05

        אם הוספתי רשימת וריאציות של צבעים למשל ויש לי 2 שחור, 2 אדום וכו'… אין לי אפשרות לערוך את הכמות של כל אחד מהצבעים. יש עמודה של כמויות (גם בתמונות אצלך) אבל אין לי גישה אליה/ אתה קורא לזה מונחים בטקסט…

        הגיבו לתגובה זו קישור ישיר
        • רועי יוסף 12 באוקטובר 2017, 22:14

          הבנתי אותך.. הכמויות שאת רואה זה בעצם מספר המוצרים להם מוגדר מונח זה. לדוגמא, ברגע שתוסיפי מוצר עם התכונה צבע והמונח צהוב, אז בכמות ליד המונח צהוב תראי 1..

          הגיבו לתגובה זו קישור ישיר
          • נירית 13 באוקטובר 2017, 12:55

            זו הבעיה, הוספתי צהוב, ירוק וכו' ולידם מראה אפס ולא 1…
            ועוד שאלה, אז כדי שיהיו שלושה אני צריכה להוסיף צהוב שלוש פעמים?

            קישור ישיר
  • רחל 15 בדצמבר 2017, 12:49

    תודה על ההדרכה!

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

    הגיבו לתגובה זו קישור ישיר
  • שמעון 24 בינואר 2018, 0:06

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

    הגיבו לתגובה זו קישור ישיר
  • Rubb 5 במרץ 2018, 16:01

    מאמר טוב, איך מטפלים בנושא של המק"ט?
    למוצר יש צבעים שונים וגדלים שונים אבל אותו מק"ט ומותר רק מק"ט אז איך משלבים בינהם?
    למשל: מוצר ירוק קטן ומוצר ירוק גדול.
    בכלל יש הבדל אם זה "מוצר ירוק קטן ומוצר ירוק גדול." או "מוצר קטן ירוק ומוצר גדול ירוק."?
    (הפכתי את הסדר של האפשרויות)

    הגיבו לתגובה זו קישור ישיר
  • Rubb 6 במרץ 2018, 9:02

    תודה, מצאתי שאפשר להכניס מק"ט לכל וריאציה אבל מה אני עושה אם הוא זהה? (למורת שזה די לא הגיוני)
    אתה חושב שלצבע כחול גדול וצבע כחול קטן צריך להיות מק"ט שונה?

    הגיבו לתגובה זו קישור ישיר
  • אסנת 8 באפריל 2018, 19:34

    שלום רב ! כיצד ניתן לייבא בבת אחת כמות גדולה של וריאציות עם מק"טים ומחירים ? כמו למשל בקובץ CSV

    הגיבו לתגובה זו קישור ישיר
  • גליה 4 במאי 2018, 18:34

    היי,
    האם ניתן ליצור רשימה נשלפת (drop down) שמציגה את הוריאציות לגולש והוא יכול לבחור את הוריאציה המתאימה לו (למשל: חולצה במידה L בצבע ירוק)?

    והאם ניתן ליצור שתי רשימות כאלה, באחת בוחרים את הגודל ובשנייה את הצבע?

    תודה רבה, גליה

    הגיבו לתגובה זו קישור ישיר
  • rz 11 ביוני 2018, 11:05

    מודה לך מאד על המאמר המפורט והברור!

    התקשיתי למצוא את המקום שמגדירים המק״ט בוריאציות ואתה הצבעת באופן מוחשי ביותר על החץ הקטן שם בצד… בהזדמנות אקרא את כל מה שיש לך לומר!

    הגיבו לתגובה זו קישור ישיר
  • טל 29 ביוני 2018, 11:02

    מאמר מעולה! עזר לי מאוד 🙂 האם יש אפשרות לשנות את המלל מ"בחר אפשרות" ל"בחר כמות"? והאם ניתן להגדיל ולהדגיש את הטקסט של הוריאציות? תודה רבה

    הגיבו לתגובה זו קישור ישיר
    • רועי יוסף 8 באוקטובר 2018, 3:22

      סליחה על התגובה המאוחרת, אך מוטב מאוחר מאף פעם לא…. לא? 😉

      אז באידיאל הייתה צריכה להיות אפשרות לשנות זאת בקבצי השפה (po, mo) אך איני חושב שניתן לעשות זאת בשלב הנוכחי. ווקומרס גם לא סיפקו פילטר עבור שינוי זה אך אתה יכול להעתיק את הקוד הבא לקובץ functions.php של התבנית (או תבנית הבת) שלך ולאחר מכן לשנות את הטקסט תחת show_option_none לטקסט שתרצה:

      /**
 * Output a list of variation attributes for use in the cart forms.
 *
 * @param array $args Arguments.
 * @since 2.4.0
 */
function wc_dropdown_variation_attribute_options( $args = array() ) {

    $args = wp_parse_args( apply_filters( 'woocommerce_dropdown_variation_attribute_options_args', $args ), array(
        'options'          => false,
        'attribute'        => false,
        'product'          => false,
        'selected'         => false,
        'name'             => '',
        'id'               => '',
        'class'            => '',
        'show_option_none' => __( 'בחר כמות' ),
    ) );



    // Get selected value.
    if ( false === $args['selected'] && $args['attribute'] && $args['product'] instanceof WC_Product ) {
        $selected_key     = 'attribute_' . sanitize_title( $args['attribute'] );
        $args['selected'] = isset( $_REQUEST[ $selected_key ] ) ? wc_clean( urldecode( wp_unslash( $_REQUEST[ $selected_key ] ) ) ) : $args['product']->get_variation_default_attribute( $args['attribute'] ); // WPCS: input var ok, CSRF ok, sanitization ok.
    }

    $options               = $args['options'];
    $product               = $args['product'];
    $attribute             = $args['attribute'];
    $name                  = $args['name'] ? $args['name'] : 'attribute_' . sanitize_title( $attribute );
    $id                    = $args['id'] ? $args['id'] : sanitize_title( $attribute );
    $class                 = $args['class'];
    $show_option_none      = (bool) $args['show_option_none'];
    $show_option_none_text = $args['show_option_none'] ? $args['show_option_none'] : __( 'Choose an option', 'woocommerce' ); // We'll do our best to hide the placeholder, but we'll need to show something when resetting options.

    if ( empty( $options ) && ! empty( $product ) && ! empty( $attribute ) ) {
        $attributes = $product->get_variation_attributes();
        $options    = $attributes[ $attribute ];
    }

    $html  = '<select id="' . esc_attr( $id ) . '" class="' . esc_attr( $class ) . '" name="' . esc_attr( $name ) . '" data-attribute_name="attribute_' . esc_attr( sanitize_title( $attribute ) ) . '" data-show_option_none="' . ( $show_option_none ? 'yes' : 'no' ) . '">';
    $html .= '<option value="">' . esc_html( $show_option_none_text ) . '</option>';

    if ( ! empty( $options ) ) {
        if ( $product && taxonomy_exists( $attribute ) ) {
            // Get terms if this is a taxonomy - ordered. We need the names too.
            $terms = wc_get_product_terms( $product->get_id(), $attribute, array(
                'fields' => 'all',
            ) );

            foreach ( $terms as $term ) {
                if ( in_array( $term->slug, $options, true ) ) {
                    $html .= '<option value="' . esc_attr( $term->slug ) . '" ' . selected( sanitize_title( $args['selected'] ), $term->slug, false ) . '>' . esc_html( apply_filters( 'woocommerce_variation_option_name', $term->name ) ) . '</option>';
                }
            }
        } else {
            foreach ( $options as $option ) {
                // This handles < 2.4.0 bw compatibility where text attributes were not sanitized.
                $selected = sanitize_title( $args['selected'] ) === $args['selected'] ? selected( $args['selected'], sanitize_title( $option ), false ) : selected( $args['selected'], $option, false );
                $html    .= '<option value="' . esc_attr( $option ) . '" ' . $selected . '>' . esc_html( apply_filters( 'woocommerce_variation_option_name', $option ) ) . '</option>';
            }
        }
    }

    $html .= '</select>';

    echo apply_filters( 'woocommerce_dropdown_variation_attribute_options_html', $html, $args ); // WPCS: XSS ok.
}
      הגיבו לתגובה זו קישור ישיר
  • משה 7 באוגוסט 2018, 16:27

    היי רועי,

    הגדרתי ווריאציות למוצר.

    1. הוא לא מופיע אצלי בצורה בה ניתן לבחור ווריאציה.
    2. כשאפשרות הווריאציה מופעלת, אז הוא לא מציג את האפשרות של מחיר ושל הוסף לסל. מה הסיבה? או מה אני לא עושה נכון?

    ותודה על המאמרים בכל האתר. אתה מלך!

    הגיבו לתגובה זו קישור ישיר

השאירו תגובה

פעימות