WooCommerce चेकआउट में महारत हासिल करें: अपने चेकआउट पेज को कस्टमाइज़ करने के लिए शुरुआती गाइड

पिछले हफ्ते, मैंने एक ऑनलाइन स्टोर से शर्ट खरीदने की कोशिश की। डिज़ाइन, साइज़ और रंग चुना जो मुझे पसंद आया, और कार्ट क्लियर करने की कोशिश की। चेकआउट पेज बहुत बड़ा था और यह कई पेजों पर विभाजित था। हर बार जब मुझे लगता था कि मैं प्रक्रिया के साथ समाप्त हो गया हूं, तो मुझे और जानकारी भरने की आवश्यकता होती थी। 10 मिनट के बाद, मैं तंग आ गया और दूसरी साइट पर चला गया।

हालांकि यह आपका सटीक अनुभव नहीं हो सकता है, लेकिन आपने शायद कुछ असुविधा का अनुभव किया होगा जिसने आपको ऑनलाइन उत्पाद खरीदने से रोका। निश्चिंत रहें, आपके ग्राहकों ने भी ऐसा किया होगा। यही कारण है कि अपनी बिक्री के लिए एक शानदार चेकआउट अनुभव बनाना महत्वपूर्ण है। इस लेख में WooCommerce चेकआउट पेज कस्टमाइज़ेशन के बारे में वह सब कुछ है जो आपको जानना चाहिए ताकि यह आपके खरीदारों के लिए तेज़, स्नैपियर और बेहतर हो।

TL;DR: आपका संपूर्ण WooCommerce पेज SeedProd या Elementor जैसे पेज बिल्डर प्लगइन्स के साथ आसानी से कस्टमाइज़ करने योग्य है। लेकिन, अपनी साइट पर कोई भी बदलाव करने से पहले, हम अनुशंसा करते हैं कि आप BlogVault के साथ अपनी WordPress साइट का बैकअप लें। BlogVault के रियल-टाइम बैकअप विशेष रूप से WooCommerce साइटों की सुरक्षा के लिए डिज़ाइन किए गए हैं। यह बैकअप और रिस्टोर को आसान बनाता है, बस कुछ क्लिक के साथ, यह सुनिश्चित करते हुए कि चाहे कुछ भी हो आपकी साइट सुरक्षित है।

डिफ़ॉल्ट WooCommerce चेकआउट पेज कैसा दिखता है?

डिफ़ॉल्ट WooCommerce चेकआउट पेज बुरा नहीं है; यह बस महान नहीं है। इसे एक सामान्य चेकआउट पेज के रूप में डिज़ाइन किया गया है जो उत्पादों की एक विशाल भीड़ में काम करता है। इसलिए जब हम WooCommerce चेकआउट पेज को कस्टमाइज़ करने के बारे में बात करने जा रहे हैं, तो हम निश्चित रूप से डिफ़ॉल्ट को खराब नहीं करने जा रहे हैं। यह एक बेहतरीन शुरुआती बिंदु है, और हम इसे आपके उत्पादों, आपके ग्राहकों और उनके व्यवहार के आपके ज्ञान के आधार पर ट्वीक करने की सलाह देते हैं।

अपनी साइट को एक इनकॉग्निटो टैब में खोलें और अपने कार्ट में उत्पाद जोड़ें। चेकआउट पर जाएं और आइए डिफ़ॉल्ट चेकआउट पेज पर एक नज़र डालें:

WooCommerce चेकआउट में महारत हासिल करें: अपने चेकआउट पेज को कस्टमाइज़ करने के लिए शुरुआती गाइड

डिफ़ॉल्ट रूप से, WooCommerce चेकआउट पेज आपके ग्राहक से नाम, पता और फोन नंबर जैसे बुनियादी बिलिंग विवरण मांगता है। इसमें आपके ऑर्डर और भुगतान विधि के बारे में विवरण भी हैं। यह कम से कम आपकी आवश्यकता है लेकिन यह आपके ग्राहकों के लिए सबसे अच्छा अनुभव नहीं बनाता है। यह लेख आपको विभिन्न तरीकों से WooCommerce चेकआउट पेज को संपादित करने का तरीका दिखाएगा।

नोट: WooCommerce चेकआउट पेज को संपादित करना शुरू करने से पहले, कार्ट में कुछ उत्पाद रखें। यह आपके चेकआउट पेज पर आपके परिवर्तनों के प्रभाव को देखने का एक उत्कृष्ट तरीका है।

Elementor के साथ WooCommerce चेकआउट पेज को आसानी से कैसे कस्टमाइज़ करें

आप या तो डिफ़ॉल्ट WooCommerce चेकआउट पेज को संपादित कर सकते हैं या किसी मौजूदा टेम्पलेट का उपयोग कर सकते हैं। आप साइडबार में टेम्पलेट पर क्लिक करके विभिन्न टेम्पलेट्स को आज़मा सकते हैं। यदि आप डिफ़ॉल्ट चेकआउट पेज को संपादित करना चाहते हैं, तो यह खंड आपके लिए है। अपने चेकआउट पेज को सजाने का सबसे आसान और तेज़ तरीका पेज बिल्डर का उपयोग करना है। हम ऐसा करने के लिए लोकप्रिय Elementor का उपयोग कर रहे हैं, हालांकि कोई अन्य पेज बिल्डर इसी तरह काम करेगा। हमें Elementor पसंद है क्योंकि इसे सेट अप और उपयोग करना आसान है, साथ ही यह WooCommerce-विशिष्ट विजेट्स की एक पूरी मेजबानी के साथ आता है।

चेकआउट पेज को संपादित करने के लिए, आपको केवल Elementor के चेकआउट विजेट की आवश्यकता है। woocommerce_checkout शॉर्टकोड को विजेट से बदलें, और यह आपको एक पूरी तरह से कस्टमाइज़ करने योग्य चेकआउट पेज के साथ छोड़ देगा। यह Elementor के कार्ट विजेट के साथ भी बढ़िया काम करता है, जिससे पूरी डिजाइनिंग प्रक्रिया आसान हो जाती है। ध्यान रखें, यह ऑल-इन-वन समाधान एक कीमत के साथ आता है। इन विजेट्स का उपयोग करने के लिए आपको Elementor के प्रो संस्करण की आवश्यकता है। यदि आप Elementor में निवेश करने के लिए तैयार हैं, तो यहां चरण हैं:

Elementor इंस्टॉल और सक्रिय करें: अपने WordPress डैशबोर्ड पर, प्लगइन्स पर क्लिक करें और फिर नया जोड़ें। Elementor खोजें। संकेत मिलने पर इंस्टॉल करें और सक्रिय करें पर क्लिक करें। यह Elementor Pro इंस्टॉल करेगा।

लाइसेंस कुंजी जोड़ें: साइडबार में Elementor पर क्लिक करें। लाइसेंस पर क्लिक करें, लाइसेंस कुंजी जोड़ें, और सक्रिय करें पर क्लिक करें। प्लगइन अब उपयोग के लिए तैयार है।
Elementor एडिटर में चेकआउट पेज खोलें: पेज पर होवर करें और सभी पेज पर क्लिक करें। चेकआउट पेज पर होवर करें और संपादित करें पर क्लिक करें। शीर्ष पर, Elementor के साथ संपादित करें पर क्लिक करें। एक सेकंड प्रतीक्षा करें और यह पेज को Elementor एडिटर में खोल देगा।

Elementor के साथ संपादन से परिचित हों: Elementor क्षैतिज अनुभागों में काम करता है जिन्हें आप प्रत्येक अनुभाग में कितने कॉलम होंगे यह चुनकर कस्टमाइज़ कर सकते हैं। पेज एडिटर पर + पर क्लिक करके एक अनुभाग जोड़ें और यह आपको उस अनुभाग में आपके द्वारा चाहे जाने वाले कॉलम की संख्या और लेआउट चुनने के लिए प्रेरित करता है। साइडबार से तत्वों को कॉलम में जोड़ने के लिए खींचें और छोड़ें। साइडबार से प्रत्येक तत्व को कस्टमाइज़ करें। जब आप प्रत्येक व्यक्तिगत तत्व का चयन करते हैं तो आपको लागू सेटिंग्स दिखाई देंगी।
चेकआउट शॉर्टकोड को चेकआउट विजेट से बदलें: शॉर्टकोड को हटाएं और बाईं ओर लाइब्रेरी से चेकआउट विजेट जोड़ें। यह आपको एक झलक देगा कि Elementor चेकआउट पेज कैसा दिखता है।
चेकआउट पेज कस्टमाइज़ करें: आप साइडबार में Elementor चेकआउट विजेट की कई सेटिंग्स का पता लगा सकते हैं।

यहां कुछ सेटिंग्स हैं जिन्हें आप बदल सकते हैं:

सामान्य: एक या दो कॉलम लेआउट में से चुनें, और यहां तक कि एक कॉलम को स्टिकी भी बनाएं।
बिलिंग या शिपिंग फॉर्म बदलना: इनमें से प्रत्येक फॉर्म के लिए हेडर, प्रत्येक प्लेसहोल्डर और प्रत्येक फ़ील्ड को संपादित करें।
अतिरिक्त जानकारी: अपने ग्राहकों के लिए उनके ऑर्डर के लिए निर्देश या जानकारी जोड़ने के लिए एक विशेष अनुभाग प्रदान करें।
कूपन सेटिंग्स: अपने कूपन के संरेखण और टाइपोग्राफी को कस्टमाइज़ करें।

आप स्टाइल पर क्लिक करके और चीजें संपादित कर सकते हैं:

खरीदें बटन: आप खरीदें बटन के लिए रंग, टेक्स्ट, स्पेसिंग आदि बदल सकते हैं।
ऑर्डर सारांश: आप ऑर्डर किए गए उत्पादों की सूची की टाइपोग्राफी और स्पेसिंग चुन सकते हैं।
टाइपोग्राफी: आप फॉर्म को छोड़कर सभी टेक्स्ट को कस्टमाइज़ कर सकते हैं।
फॉर्म: अपने फॉर्म की टाइपोग्राफी और रंग कस्टमाइज़ करें। स्पेसिंग बढ़ाने के लिए रोज़ गैप सेटिंग्स का उपयोग करें।

मोबाइल व्यू में पेज की समीक्षा करें: रेस्पॉन्सिव डिज़ाइन बहुत महत्वपूर्ण है, और आप यह देखने के लिए Elementor के अंतर्निहित व्यू का उपयोग कर सकते हैं कि आपके पेज विभिन्न स्क्रीन आकारों पर कैसे दिखते हैं।

चेकआउट पेज को संपादित करना केवल सतह को खरोंचता है। Elementor और WooCommerce एक शक्तिशाली संयोजन हैं जिनका उपयोग आप अपने स्टोर को वास्तव में अलग बनाने के लिए कर सकते हैं।

तो, हमने बात की है कि Elementor जैसे प्लगइन के साथ अपने पूरे चेकआउट पेज को कस्टमाइज़ करना कितना आसान है। लेकिन, क्या होगा यदि आप Elementor जैसे प्लगइन का उपयोग नहीं करना चाहते हैं और केवल अंतर्निहित संपादक का उपयोग करना पसंद करेंगे? यह देखने के लिए पढ़ते रहें कि आप यह कैसे कर सकते हैं।

अंतर्निहित संपादक के साथ अपने चेकआउट पेज के डिज़ाइन को कैसे कस्टमाइज़ करें

इस खंड में, हम बात करेंगे कि WooCommerce चेकआउट पेज में बदलाव करने के लिए Gutenberg संपादक का उपयोग कैसे करें। एडिटर में पेज खोलने के लिए, चेकआउट पेज पर होवर करें और संपादित करें पर क्लिक करें।

यह आपको Gutenberg ब्लॉक एडिटर पर ले जाएगा। ब्लॉक एडिटर विभिन्न प्रकार की सामग्री के क्षैतिज ब्लॉक में काम करता है। आप बाईं ओर लाइब्रेरी से एक ब्लॉक जोड़कर टेक्स्ट, इमेज या हेडिंग जोड़ सकते हैं। प्रत्येक ब्लॉक को अलग से कस्टमाइज़ किया जा सकता है। आप साइडबार में ब्लॉक लाइब्रेरी देखेंगे, शीर्ष बाईं ओर + पर क्लिक करके। आप शीर्ष दाईं ओर ब्लॉक टैब पर गियर बटन पर क्लिक करके प्रत्येक ब्लॉक की सेटिंग्स बदल सकते हैं।

आप वास्तविक पेज पर कुछ टेक्स्ट, शॉर्टकोड भी देखेंगे। शॉर्टकोड WooCommerce का आपके पेज पर चेकआउट फ़ील्ड शामिल करने का तरीका है। यह ऐसा दिखता है:

woocommerce_checkout

इस शॉर्टकोड को न हटाएं। आप इस शॉर्टकोड के ऊपर और नीचे इमेज या टेक्स्ट जोड़ सकते हैं। बाद में इस लेख में, हम उन फ़ील्ड को संपादित करने के बारे में बात करेंगे। लेकिन, अभी के लिए, आइए बात करते हैं कि सामान्य डिज़ाइन में बदलाव कैसे करें। यहां चरण हैं:

टेक्स्ट जोड़ें

पैराग्राफ विजेट जोड़ें: आप अपने शॉर्टकोड के ऊपर और नीचे टेक्स्ट जोड़ सकते हैं। आप टेक्स्ट देखेंगे जो कहता है "टाइप करें/एक ब्लॉक चुनें"। आप या तो पैराग्राफ विजेट को खींचकर छोड़ सकते हैं या बस वह टेक्स्ट टाइप करना शुरू कर सकते हैं जो आप चाहते हैं। एक अलग ब्लॉक पर जाने के लिए डबल-क्लिक करें।
टेक्स्ट कस्टमाइज़ करें: आप दाईं ओर ब्लॉक टैब में टाइपोग्राफी और रंगों को संपादित कर सकते हैं। बस टेक्स्ट या ब्लॉक का चयन करें।

हेडर जोड़ने के लिए, आप हेडर विजेट जोड़ सकते हैं और इसे वैसे ही संपादित कर सकते हैं। H1, H2, आदि जैसे विभिन्न आकार हैं जिन्हें आप चुन सकते हैं।

इमेज जोड़ें

इमेज विजेट जोड़ें: ऊपर बाईं ओर + पर क्लिक करें और सर्च बार में इमेज टाइप करें। जिस प्रकार का इमेज विजेट आप चाहते हैं उसे चुनें और क्लिक करें, या एक कॉलम में खींचकर छोड़ें।
एक इमेज चुनें: मीडिया लाइब्रेरी पर क्लिक करके अपनी मीडिया लाइब्रेरी से एक इमेज चुनें, या अपने स्थानीय कंप्यूटर से फ़ाइल चुनने के लिए अपलोड पर क्लिक करें। यदि आप चाहें तो एक कैप्शन जोड़ सकते हैं।

बटन जोड़ें

बटन विजेट जोड़ें: आप इसे ब्लॉक्स लाइब्रेरी में सर्च बार में खोज सकते हैं।
बटन कस्टमाइज़ करें: बटन का लेबल, संरेखण, और लेबल की टाइपोग्राफी को दिखाई देने वाले पॉपअप में बदलें। आप ब्लॉक सेटिंग्स में रंग, बॉर्डर और आकार भी बदल सकते हैं।
बटन को हाइपरलिंक करें: पॉप-अप में URL बटन पर क्लिक करें और उस पेज का URL पेस्ट करें जिसे आप बटन से लिंक करना चाहते हैं।

पूरे पेज को कस्टमाइज़ करने में आपकी मदद के लिए ब्लॉक एडिटर में अन्य विजेट्स का पता लगाएं। हम यह भी सलाह देते हैं कि शीर्ष दाईं ओर पूर्वावलोकन पर क्लिक करके पेज का पूर्वावलोकन करें। एक बार जब आप कर लें, तो अपडेट पर क्लिक करें।

जबकि आप केवल Gutenberg संपादक के साथ बहुत कुछ कर सकते हैं, आप फ़ील्ड जैसी विशिष्ट चीजों को नहीं बदल सकते। अगला खंड उन बदलावों को करने के तरीके को कवर करेगा।

चेकआउट पेज फ़ील्ड को कैसे कस्टमाइज़ करें

चेकआउट पेज फ़ील्ड को बदलना आपके विचार से अधिक प्रभावशाली हो सकता है। यह वास्तव में आपके ग्राहक के लिए अनुभव को परिभाषित करता है। इसके बारे में जाने के दो तरीके हैं: फ़ील्ड मैनेजर प्लगइन के साथ या मैन्युअल रूप से। हम इस खंड में दोनों के बारे में बात करेंगे।

एक्सटेंशन के साथ पेज फ़ील्ड कस्टमाइज़ करना

हम इस ट्यूटोरियल के लिए WooCommerce के लिए चेकआउट फ़ील्ड मैनेजर प्लगइन का उपयोग कर रहे हैं। आपको एक्सटेंशन खरीदना होगा। एक बार जब आप ऐसा कर लेते हैं, तो यहां शुरू करने के चरण हैं।

प्लगइन इंस्टॉल और सक्रिय करें: अपने wp-admin पैनल पर, प्लगइन्स पर होवर करें और नया जोड़ें पर क्लिक करें। प्लगइन अपलोड करें पर क्लिक करें और फ़ाइल चुनें और अभी डाउनलोड किए गए ज़िप फ़ोल्डर का चयन करें। अभी इंस्टॉल करें और सक्रिय करें पर क्लिक करें।

WooCommerce सेटिंग्स में फ़ील्ड संपादित करें या जोड़ें: WooCommerce पर होवर करें और चेकआउट पर क्लिक करें। शीर्ष पर बिलिंग, शिपिंग और अतिरिक्त पर क्लिक करें और यहां आप अपने सभी फ़ील्ड को निम्नानुसार प्रबंधित करते हैं:

फ़ील्ड अक्षम करें: आप अक्षम कॉलम को टॉगल करके अनावश्यक फ़ील्ड को अक्षम कर सकते हैं।
कुछ फ़ील्ड अनिवार्य बनाएं: आप आवश्यक पर टॉगल करके कुछ फ़ील्ड को अनिवार्य बना सकते हैं।
फ़ील्ड का रूप संपादित करें: आप पोजिशन कॉलम में ड्रॉपडाउन मेनू से चुनकर किसी फ़ील्ड के संरेखण को बाएं संरेखित, दाएं संरेखित, या चौड़ा बना सकते हैं।
मौजूदा सामग्री संपादित करें: प्रासंगिक फ़ील्ड के अंत में संपादित करें पर क्लिक करें और एक पॉपअप दिखाई देगा। आप नाम, प्रकार, लेबल, विवरण आदि बदल सकते हैं। फिर, सहेजें पर क्लिक करें।
नए फ़ील्ड जोड़ें: ऊपर बाईं ओर + नया फ़ील्ड जोड़ें पर क्लिक करें। आप विवरण को अपनी पसंद के अनुसार भर सकते हैं। सहेजें पर क्लिक करें।

परिवर्तन सहेजें: एक बार जब आप कर लें, तो नीचे बाईं ओर सहेजें पर क्लिक करें।

कोड के साथ पेज फ़ील्ड कस्टमाइज़ करें

यदि आप कोडिंग से परिचित हैं, तो आप अपने थीम की function.php फ़ाइल में कोड जोड़ सकते हैं। आम तौर पर, कोड का उपयोग करके थीम को संशोधित करते समय, पहले एक चाइल्ड थीम बनाएं और उसे संशोधित करें। यह आपके परिवर्तनों और अनुकूलन को तब संरक्षित करेगा जब थीम अपडेट होगी।

यह ध्यान रखना महत्वपूर्ण है कि पिछले खंड में उल्लिखित एक्सटेंशन, चेकआउट फ़ील्ड मैनेजर, functions.php फ़ाइल में किए गए परिवर्तनों को ओवरराइड करता है। इसलिए, उनका समानांतर उपयोग नहीं किया जा सकता।

इसके अतिरिक्त, यह समझना महत्वपूर्ण है कि WooCommerce पहली बार में पेज फ़ील्ड को कैसे लोड करता है। WooCommerce फ़ील्ड को एक फ़िल्टर के माध्यम से रखता है। यह आपको फ़ील्ड में परिवर्तन करने के लिए कस्टम कोड जोड़ने की अनुमति देता है। WooCommerce चेकआउट पेज के मामले में, यह फ़िल्टर इस प्रकार है:

$this->checkout_fields = apply_filters('woocommerce_checkout_fields', $this->checkout_fields);

इसका मतलब है कि woocommerce_checkout_fields में हुक करने से किसी भी मौजूदा कोड को ओवरराइड किया जा सकता है। हुक अनिवार्य रूप से कोड के टुकड़े हैं जो WordPress कोर फ़ाइलों को संशोधित करते हैं। आपकी साइट में कुछ हुक हैं जो इसके साथ आते हैं:

woocommerce_before_checkout_form
woocommerce_checkout_before_customer_details
woocommerce_checkout_billing
woocommerce_checkout_shipping
woocommerce_checkout_after_customer_details
woocommerce_checkout_before_order_review
woocommerce_checkout_order_review
Woocommerce_checkout_after_order_review
Woocommerce_after_checkout_form

इसके अतिरिक्त, WooCommerce द्वारा प्रदान किए गए हुक की एक लंबी सूची है जिसे आप चुन सकते हैं। आप Business Bloomer पर हुक की इस सूची को भी देख सकते हैं जो आपको हुक को विज़ुअलाइज़ करने में मदद करता है। अब, आइए बात करते हैं कि फ़ील्ड को कैसे बदलें।

order_comments फ़ील्ड में प्लेसहोल्डर बदलें

// हुक में
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
// हमारा हुक किया गया फ़ंक्शन - $fields फ़िल्टर के माध्यम से पारित
function custom_override_checkout_fields( $fields ) 
$fields['order']['order_comments']['placeholder'] = 'मेरा नया प्लेसहोल्डर'
return $fields
}

order_comments फ़ील्ड का लेबल बदलें

// हुक में
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
// हमारा हुक किया गया फ़ंक्शन - $fields फ़िल्टर के माध्यम से पारित!
function custom_override_checkout_fields( $fields ) 
$fields['order']['order_comments']['placeholder'] = 'मेरा नया प्लेसहोल्डर'
$fields['order']['order_comments']['label'] = 'मेरा नया लेबल'
return $fields;
}

एक फ़ील्ड हटाएं

// हुक में
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
// हमारा हुक किया गया फ़ंक्शन - $fields फ़िल्टर के माध्यम से पारित!
function custom_override_checkout_fields( $fields ) {
unset($fields['order']['order_comments'])
return $fields;
}

कोड का उपयोग करके अपने चेकआउट फ़ील्ड को कस्टमाइज़ करने में आपकी सहायता के लिए WooCommerce पर एक लेख है।

अब, आइए बात करते हैं कि अपने चेकआउट पेज के लेआउट को कैसे बदलें।

चेकआउट पेज लेआउट कैसे बदलें

आप एक्शन हुक जोड़कर अपने WooCommerce पेज के लेआउट को कस्टमाइज़ कर सकते हैं। यहां कुछ तरीके हैं जिनसे आप इसे बदल सकते हैं:

स्निपेट मैनेजमेंट प्लगइन का उपयोग करना

हम आसान विधि से शुरू करेंगे जो स्निपेट मैनेजमेंट प्लगइन का उपयोग करके इसे जोड़ना है।

स्निपेट मैनेजमेंट प्लगइन इंस्टॉल और सक्रिय करें: हम कोड स्निपेट्स का उपयोग कर रहे हैं। आप इसे अपने प्लगइन्स डायरेक्टरी में पा सकते हैं। प्लगइन्स पर होवर करें और नया जोड़ें पर क्लिक करें। फिर कोड स्निपेट्स खोजें और इंस्टॉल और सक्रिय करें पर क्लिक करें।

हुक कॉपी करें: WooCommerce हुक लाइब्रेरी पर जाएं और कोड कॉपी करें या टेक्स्ट एडिटर में एक कस्टम हुक बनाएं और इसे कॉपी करें। यदि, उदाहरण के लिए आप नीचे एक नियम और शर्तें अनुभाग जोड़ना चाहते हैं, तो यहां वह है जो आप कॉपी करेंगे।
कोड जोड़ें: बाईं ओर कोड स्निपेट्स पर होवर करें और नया जोड़ें पर क्लिक करें। हुक के लिए एक पहचानने योग्य नाम जोड़ें। फ़ंक्शन टैब चुनें। नीचे कोड पेस्ट करें। सुनिश्चित करें कि स्निपेट को हर जगह चलाएं विकल्प चुना गया है और परिवर्तन सहेजें और सक्रिय करें पर क्लिक करें। आपने अब सफलतापूर्वक एक हुक जोड़ लिया है।

मैन्युअल रूप से कोड जोड़ना

यदि आप इसे अपने थीम की function.php फ़ाइल में जोड़ना चाहते हैं, तो यहां चरण हैं:

थीम फ़ाइल एडिटर खोलें: साइडबार पर अपीयरेंस पर होवर करें और थीम फ़ाइल एडिटर पर क्लिक करें।
हुक कोड कॉपी करें: आप इसे WooCommerce लाइब्रेरी से कॉपी कर सकते हैं या टेक्स्ट एडिटर पर एक कस्टम बनाएं और कॉपी करें। जैसे हमने पिछले खंड में उपयोग किया था, यदि आप एक T&C अनुभाग जोड़ना चाहते हैं, तो यहां वह कोड है जिसे आप कॉपी करेंगे। WooCommerce हुक लाइब्रेरी में और भी बहुत कुछ है।
functions.php फ़ाइल संपादित करें: दाईं ओर, फ़ाइलों के मेनू के माध्यम से स्क्रॉल करें जब तक कि आपको functions.php न मिल जाए। आपके द्वारा कॉपी किए गए कोड को पेस्ट करें और फ़ाइल अपडेट करें पर क्लिक करें। बधाई हो। आपने अपने थीम में एक हुक जोड़ लिया है।

आपके चेकआउट पेज के लिए अतिरिक्त प्लगइन्स और एक्सटेंशन

यहां कुछ अतिरिक्त एक्सटेंशन हैं जिन्हें हम अनुशंसा करते हैं कि आप इंस्टॉल करें क्योंकि यह निश्चित रूप से आपको एक अद्भुत चेकआउट अनुभव बनाने में मदद करेगा:

WooCommerce चेकआउट एडऑन्स: यह एक्सटेंशन ग्राहक को अपने ऑर्डर में एडऑन शामिल करने की अनुमति देता है जैसे गिफ्ट रैपिंग, उदाहरण के लिए।
WooCommerce वन पेज चेकआउट: यह आपको किसी भी पेज को चेकआउट पेज बनाने की अनुमति देता है और खरीदारी प्रक्रिया को आसान बनाता है क्योंकि ग्राहक अब उसी पेज पर उत्पाद चुन और खरीद सकता है।
WooCommerce सोशल लॉगिन: यह ग्राहक को उनके ईमेल या फोन नंबर के बजाय सोशल मीडिया अकाउंट से लॉगिन करने की अनुमति देता है।
YITH WooCommerce ऑर्डर ट्रैकिंग: यह शिपिंग जानकारी को आसानी से प्रबंधित करने में मदद करता है। यह आपके ग्राहकों को उनकी खरीदारी ट्रैक करने की अनुमति देता है।
YITH एडवांस्ड रिफंड सिस्टम WooCommerce के लिए: यह आपको रिफंड सिस्टम सेट अप करने में मदद करता है।

आपको अपना WooCommerce चेकआउट पेज क्यों कस्टमाइज़ करना चाहिए?

आपके चेकआउट पेज का मुख्य लक्ष्य अपने ग्राहकों को अपनी साइट से चीजें खरीदने के लिए प्रोत्साहित करना है और यहां बताया गया है कि एक कस्टम चेकआउट पेज ऐसा क्यों करता है:

आपके ग्राहकों के लिए तेज़: यदि आप अनावश्यक फ़ील्ड हटा सकते हैं और अपने ग्राहकों के लिए खरीदारी की प्रक्रिया को तेज़ बना सकते हैं, तो उनके कार्ट छोड़ने की संभावना कम है। प्रक्रिया जितनी लंबी होगी, ग्राहक के कुछ भी खरीदने के लिए प्रेरित होने की संभावना उतनी ही कम होगी।
अधिक उत्पाद अपसेल करें: आप चेकआउट पेज का उपयोग अन्य उत्पादों को बेचने के लिए कर सकते हैं जिनमें वे रुचि रखते हों या संबंधित उत्पाद। यह आपके लिए अपने ग्राहकों को यह दिखाने का अवसर है कि वे क्या जानते थे कि उन्हें ज़रूरत है लेकिन यह नहीं जानते थे कि आप बेचते हैं।
चेकआउट प्रक्रिया को सुरक्षित महसूस कराएं: आप प्रशंसापत्र जोड़ सकते हैं और इससे ग्राहकों को लगेगा कि वे आप पर भरोसा कर सकते हैं। आप यह भी पारदर्शी हो सकते हैं कि आप कुछ जानकारी क्यों मांग रहे हैं।

अपने WooCommerce चेकआउट पेज को कस्टमाइज़ करने के सर्वोत्तम तरीके

आसानी से एक अकाउंट बनाएं: अपने ग्राहक के लिए अकाउंट बनाने की प्रक्रिया को पीड़ारहित बनाएं। उत्पाद को कार्ट में जोड़ने और उत्पाद के लिए भुगतान करने के बीच का समय जितना संभव हो उतना तेज़ बनाएं। "कंपनी" जैसे अनावश्यक फ़ील्ड हटाएं। यदि संभव हो, तो इसे वैकल्पिक बनाएं।
भरोसे के कारक जोड़ें: यह ग्राहक के भीतर विश्वास पैदा करता है कि उनका पैसा सुरक्षित जगह जा रहा है।
सोशल प्रूफ तत्व जोड़ें: यह ग्राहकों को अपने सोशल मीडिया साइटों पर आपके स्टोर के साथ अपने अनुभव को साझा करने के लिए प्रोत्साहित करता है।
पारदर्शी शुल्क: अनावश्यक रूप से अतिरिक्त शुल्क न रखें। सुनिश्चित करें कि आप इस बारे में स्पष्ट हैं कि उनका पैसा कहां जा रहा है। उदाहरण के लिए, उत्पाद की लागत के अलावा केवल शिपिंग शुल्क जोड़ें।
पर्याप्त चेकआउट विकल्प प्रदान करें: बहुत अधिक और बहुत कम भुगतान विकल्प जोड़ने के बीच संतुलन बनाएं। उन भुगतान गेटवे का उपयोग करें जो आपके लक्षित दर्शकों के बीच लोकप्रिय हैं। हमारे पास लेख हैं जो आपके WooCommerce पेज पर Stripe या PayPal जोड़ने पर हैं जिन्हें आप देख सकते हैं।

अंतिम विचार

डिफ़ॉल्ट WooCommerce चेकआउट बुनियादी है लेकिन कस्टमाइज़ करने योग्य है। चेकआउट पेज के हर पहलू को आपके ग्राहकों के लिए एक अद्भुत खरीदारी अनुभव बनाने के लिए संपादित किया जा सकता है। लेकिन, कोई भी बदलाव करने से पहले, BlogVault का उपयोग करके अपनी साइट का बैकअप लेना आवश्यक है। यह आपको बीमा देता है जब कुछ गलत हो जाता है या यदि आपने गलती से खरीदारी अनुभव को बदतर बना दिया है। BlogVault न केवल रियल-टाइम बैकअप लेता है बल्कि रिस्टोर प्रक्रिया एकदम आसान है।

FAQ

एक्शन हुक क्या हैं?

एक्शन हुक आपको अपने कोर फ़ाइलों में कोड का एक स्निपेट जोड़ने में मदद करते हैं जो आपकी साइट के कार्य करने के तरीके को प्रभावित करता है। WordPress में हुक की एक अत्यधिक बड़ी लाइब्रेरी है जिसका आप उपयोग कर सकते हैं या आप अपने स्वयं के कस्टम बना सकते हैं।

WooCommerce चेकआउट पेज पर टेक्स्ट कैसे संपादित करें?

आप अपने अंतर्निहित WordPress संपादक या पेज बिल्डर प्लगइन के साथ अपनी साइट पर फोंट और टेक्स्ट को संपादित और कस्टमाइज़ कर सकते हैं। हम SeedProd जैसे पेज बिल्डर का उपयोग करने की सलाह देते हैं। यह उपयोग में आसान है और इसमें मुफ्त और सशुल्क दोनों संस्करण हैं।

हुक और फ़िल्टर कहां जोड़ते हैं?

आपको हुक और फ़िल्टर को अपने चाइल्ड थीम की function.php फ़ाइल में जोड़ना चाहिए। चाइल्ड थीम में आपके पैरेंट थीम के समान रूप और अनुभव होते हैं लेकिन आपको कोड को ट्वीक और जोड़ने की अनुमति देते हैं। आप अपीयरेंस > थीम पर जाकर और बिना फीचर इमेज वाले थीम को देखकर अपने चाइल्ड थीम की पहचान कर सकते हैं। यदि आपके पास चाइल्ड थीम नहीं है, तो एक बनाने पर इस लेख को देखें।