איך ליצור חנות מקוונת פנטסטית עם WooCommerce, Divi ו SiteGround (2023)

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

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

הערת העורך: פוסט זה פורסם במקור ב-15 בינואר 2015 ושופץ ועודכן לחלוטין לצורך דיוק ומקיפות.

יש אלפי עד מיליוני ערכות נושא של וורדפרס לבחירה כשאתה מחפש את מבנה החזית והחלק האחורי כדי להתחיל למכור באינטרנט. כמעט אותו דבר עם אירוח (אבל אנחנו מעדיפים SiteGround or Bluehost).

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

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

קודם כל קבל את הדומיין והאירוח שלך

???השלב הראשון בכל תהליך יצירת אתר הוא רכישת חשבון אחסון, שם דומיין והתקנת וורדפרס באתר. Divi אינו שונה. יש הרבה דרכים להשיג אירוח ושמות דומיין, אבל אני אישית חושב SiteGround היא אחת האפשרויות המאובטחות והאמינות ביותר. (לפרטים נוספים בדוק את המקיף שלנו SiteGround סקירה).

מה שבאמת מגניב זה SiteGround מציעה מתמחה הצליח WooCommerce אירוח חבילת שירות עם כמעט כל מה שאתה צריך כדי להתחיל למכור באינטרנט. בתוך החבילה, אתה יכול להסתפק ב- StartUp תכנית פעולה למתחילים, תוכנית GrowBig לעסקים בצמיחה, או GoGeek עבור מבוססים WooCommerce חנויות.

כל אחד מאלה מציע תכונות מתקדמות למיטוב שלך WooCommerce אתר במחיר סביר.

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

??? עכשיו, למען הבהירות, בואו נמשיך עם SiteGround...

איך מתחילים?

עבור אל SiteGround מנוהל WooCommerce אירוח עמוד, בחר תוכנית אידיאלית ולחץ קבל תוכנית.

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

??? ובכל הנוגע להקצבות משאבים, תוכנית זו מתאימה ל:

• תיבת דואר 6GB
• אחסון מסד נתונים של 1 GB
• אחסון SSD
• העברת נתונים ללא מדידה
• שטח אחסון של 30GB
• עד 100,000 ביקורים חודשיים

זכור כי שירות זה מתחיל ב-$11.95 לחודש, וזה דומה מאוד לאופן שבו הייתם מתקין אתר וורדפרס רגיל בחשבון אירוח BlueHost.

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

כעת, לאחר שבחרת את התוכנית המועדפת עליך, SiteGround יפנה אותך לדף רישום הדומיין שלו. אם כבר בבעלותך דומיין, בחר באפשרות השנייה והזן את פרטיו. אחרת, המשך ברישום שם דומיין חדש ב-$15.95 לשנה.

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

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

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

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

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

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

כעת, כדי למזער את מרחק העברת הנתונים ביניהם Sitegroundהשרתים של ושלך WooCommerce המבקרים באתר, בחרו את מיקום מרכז הנתונים הקרוב ביותר לאזור שוק היעד שלכם.

לאחר מכן בחר כל שירות תוסף נוסף שתרצה לכלול בחבילה שלך, והרי! זה כל מה שצריך כדי להקים א Siteground חֶשְׁבּוֹן.

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

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

יצירת החנות המקוונת שלך עם Divi

מה זה Divi?

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

אז מה כל כך מיוחד בנושא הזה? והאם יש משהו יוצא מן הכלל Divi"S WooCommerce?

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

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

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

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

??? בסופו של דבר, לכן, תוכל לנצל Diviשל:

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

Divi גרור ושחרר את בונה הדפים

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

אבל, ראוי לציין שהקבלן הזה אינו קשור באופן בלעדי ל Divi נושא. זה מגיע כתוספת plugin לכל נושא שנרכש מ-Elegant Themes.

עם זאת, ה- Divi WordPress Page Builder הוא עורך גרירה ושחרור עם יכולות התאמה אישית מתקדמות. זה מאפשר לך להזיז ולהגדיר אלמנטים, עמודות, שורות ומודולים ללא כל ניסיון בקידוד. במילים אחרות, זה סוג הבנאי א Divi WooCommerce מתחיל היה מקווה לקבל.

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

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

ואתם יודעים מה?

Divi אפילו מנסה להקל על כל התהליך על ידי תיוג בתוספת קידוד צבע של מודולי הפריסה שלו.

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

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

מתוכנן מראש Divi WooCommerce פריסות אתרים

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

ובכן, ליתר דיוק, Divi מספק בערך 7-8 פריסות מעוצבות מראש בכל חבילת אתרים בודדת. בהתחשב שכל אחד מהם בנוי במלואו, אתה יכול בקלות לאמץ את הפריסות מבלי לעבד מחדש באופן מקיף את המבנה הבסיסי שלהם. אתה רק כמה שינויים פה ושם.

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

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

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

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

Is Divi מתאים ל WooCommerce?

כל הדברים נחשבים, Divi פופולארי יותר ויותר מכיוון שהוא ביסודו פתרון ערכת נושא וורדפרס הכל-באחד.

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

??? בְּקִצוּר נִמרָץ, Divi היא אפשרות ששווה לשקול עבורך WooCommerce אתר כי:

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

שלב 1: הירשם עם ערכות נושא אלגנטיות לקבל גישה אליהם Divi

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

שלב 2: התקן Divi באתר הוורדפרס שלך

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

שלב 3: לחץ על כפתור הוסף חדש

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

שלב 4: הגדר את שלך WooCommerce חנות

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

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

שלב 5: הוסף את המוצרים הראשונים שלך ל WooCommerce

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

שלב 6

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

שלב 7: חקור את WooCommerce תכונות

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

שלב 8: צור את דף הבית

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

שלב 9: הוסף כותרת עבורך Divi דף

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

שלב 10

לחץ על הלחצן כותרת ברוחב מלא.

שלב 11

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

שלב 12

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

שלב 13

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

שלב 14

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

שלב 15

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

שלב 16

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

שלב 17: תצוגה מקדימה ופרסום

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

אם יש לך שאלות לגבי הגדרת ה Divi נושא WordPress, אנא הודע לנו בקטע ההערות למטה.

סיכום

וזה כל מה שצריך כדי לקבל את שלך Divi WooCommerce חנות מקוונת פועלת באמצעות א SiteGround חשבון אירוח.

להתקדם, אתה יכול להיות סמוך ובטוח בכך SiteGround יטפל בכל הדברים הטכניים הקריטיים כמו עדכוני וורדפרס ו WooCommerce בִּטָחוֹן. זה ההבדל המהותי בין מנוהל WooCommerce אירוח ופתרונות אירוח משותפים רגילים. לפיכך, זה נותן לך את הזמן והמרחב הדרושים להתמקד בעצמך WooCommerce ניהול חנות.

וכפי שכבר ראינו, זה צריך להיות משב רוח עם Divi נושא. אתה תמיד יכול לגשת שלך Divi WooCommerce פריסה מה-backend של WordPress כדי להתאים אותו עוד יותר. אם תרצה, אתה יכול אפילו לשנות את העיצוב כולו על ידי מעבר לפריסה אחרת שיכולה להתמודד עם א WooCommerce חנות גם כן. הבחירה בידיים שלך.

אם יש לך שאלות לגבי הגדרת ה Divi נושא וורדפרס, אנא הודע לנו בקטע ההערות למטה.