Elementor और WooCommerce मिलकर WordPress पर कस्टम ऑनलाइन स्टोर बनाने के लिए सबसे लचीले संयोजनों में से एक बनाते हैं। जबकि WooCommerce ई-कॉमर्स कार्यक्षमता (उत्पाद, कार्ट, चेकआउट, भुगतान) को संभालता है, Elementor आपको उन स्टोर पृष्ठों के रूप और कार्य पर दृश्य नियंत्रण देता है। इस गाइड में, हम Elementor के साथ प्रमुख WooCommerce पृष्ठों को बनाने के बारे में बात करते हैं, जिसमें उत्पाद पृष्ठ, दुकान आर्काइव और कार्ट अनुभव शामिल हैं।
यह ट्यूटोरियल मानता है कि आपके पास WordPress, WooCommerce, और Elementor Pro स्थापित है। WooCommerce विजेट्स के लिए Elementor Pro की आवश्यकता है - Elementor का मुफ्त संस्करण उन्हें शामिल नहीं करता।
शुरू करने से पहले आपको क्या चाहिए
| आवश्यकता | क्यों इसकी आवश्यकता है | कहाँ से प्राप्त करें |
|---|---|---|
| WordPress 6.x+ | कोर CMS प्लेटफ़ॉर्म | wordpress.org |
| WooCommerce (मुफ्त) | ई-कॉमर्स कार्यक्षमता | WordPress प्लगइन निर्देशिका |
| Elementor Pro | WooCommerce विजेट्स और थीम बिल्डर | PluginTheme.net |
| अनुकूलित थीम | आपके स्टोर के लिए आधार | थीम चयन गाइड |
| नमूना उत्पाद | टेम्पलेट डिज़ाइन करने के लिए सामग्री | WooCommerce → उपकरण → नमूना डेटा आयात करें |
Elementor के WooCommerce बिल्डर को समझना
Elementor Pro में इसके थीम बिल्डर सिस्टम के भीतर एक समर्पित WooCommerce बिल्डर शामिल है। यह आपको निम्नलिखित के लिए कस्टम टेम्पलेट बनाने की अनुमति देता है:
- एकल उत्पाद पृष्ठ: व्यक्तिगत उत्पाद पृष्ठों के लेआउट को नियंत्रित करें
- उत्पाद आर्काइव: दुकान पृष्ठ और श्रेणी पृष्ठों को अनुकूलित करें
- कार्ट पृष्ठ: एक कस्टम कार्ट लेआउट डिज़ाइन करें
- चेकआउट पृष्ठ: चेकआउट फॉर्म लेआउट को अनुकूलित करें
- मेरा खाता पृष्ठ: ग्राहक खाता डैशबोर्ड को फिर से डिज़ाइन करें
प्रत्येक टेम्पलेट WooCommerce-विशिष्ट विजेट्स का उपयोग करता है जो आपके उत्पादों से गतिशील डेटा खींचता है। इसका मतलब है कि आप एक बार लेआउट डिज़ाइन करते हैं, और यह सभी उत्पादों (या विशिष्ट श्रेणियों) पर स्वचालित रूप से लागू होता है।
कस्टम उत्पाद पृष्ठ बनाना
चरण 1: टेम्पलेट बनाएं
- अपने WordPress प्रशासन में Templates → Theme Builder पर जाएं
- "नया जोड़ें" पर क्लिक करें और टेम्पलेट प्रकार के रूप में "एकल उत्पाद" चुनें
- एक पूर्व-निर्मित उत्पाद पृष्ठ टेम्पलेट चुनें या एक खाली कैनवास से शुरू करें
- Elementor संपादक WooCommerce विजेट्स के साथ पैनल में खुलेगा
चरण 2: WooCommerce विजेट्स जोड़ें
उत्पाद पृष्ठों के लिए प्रमुख WooCommerce विजेट्स:
| विजेट | यह क्या प्रदर्शित करता है | अनुकूलन विकल्प |
|---|---|---|
| उत्पाद छवियाँ | थंबनेल और लाइटबॉक्स के साथ गैलरी | गैलरी लेआउट, थंबनेल स्थिति, ज़ूम टॉगल |
| उत्पाद शीर्षक | उत्पाद का नाम (H1) | टाइपोग्राफी, रंग, संरेखण |
| उत्पाद मूल्य | नियमित और बिक्री मूल्य | टाइपोग्राफी, बिक्री बैज रंग, लेआउट |
| उत्पाद रेटिंग | समीक्षाओं से स्टार रेटिंग | स्टार रंग, आकार, संरेखण |
| कार्ट में जोड़ें | मात्रा चयनक + कार्ट में जोड़ें बटन | बटन शैली, रंग, मात्रा लेआउट |
| उत्पाद संक्षिप्त विवरण | संक्षिप्त उत्पाद सारांश | टाइपोग्राफी, स्पेसिंग |
| उत्पाद मेटा | SKU, श्रेणियाँ, टैग | लेआउट, टाइपोग्राफी, विभाजक |
| उत्पाद डेटा टैब | विवरण, समीक्षाएँ, अतिरिक्त जानकारी टैब | टैब शैली, सीमा, स्पेसिंग |
| संबंधित उत्पाद | एक ही श्रेणी के उत्पाद | स्तंभ, संख्या, क्रम |
| अपसेल्स | हाथ से जुड़े अपसेल प्र |
चरण 3: लेआउट सर्वोत्तम प्रथाएँ
एक उच्च-परिवर्तित उत्पाद पृष्ठ एक परीक्षण किया हुआ लेआउट पैटर्न का पालन करता है:
- फोल्ड के ऊपर: उत्पाद छवियाँ (बाएँ, 50-60% चौड़ाई) + शीर्षक, मूल्य, रेटिंग, संक्षिप्त विवरण, और कार्ट में जोड़ने का बटन (दाएँ, 40-50% चौड़ाई)
- फोल्ड के नीचे: उत्पाद डेटा टैब (पूर्ण विवरण, विनिर्देश, समीक्षाएँ)
- तल का भाग: संबंधित उत्पाद और अपसेल एक ग्रिड में (3-4 स्तंभ)
- विश्वास तत्व: शिपिंग जानकारी, वापसी नीति, कार्ट में जोड़ने के बटन के पास सुरक्षा बैज
डेस्कटॉप और मोबाइल दोनों पर स्क्रॉल किए बिना कार्ट में जोड़ने का बटन दृश्यमान रखें। ध्यान आकर्षित करने के लिए बटन के लिए विपरीत रंगों का उपयोग करें।
शॉप पृष्ठ को अनुकूलित करना (उत्पाद संग्रह)
चरण 1: एक संग्रह टेम्पलेट बनाएं
- टेम्पलेट्स → थीम बिल्डर → उत्पाद संग्रह पर जाएं
- एक नया टेम्पलेट जोड़ें और प्रकार के रूप में "उत्पाद संग्रह" चुनें
- प्रदर्शन स्थितियाँ निर्धारित करें (सभी संग्रह, विशिष्ट श्रेणियाँ, या टैग पृष्ठ)
चरण 2: उत्पाद ग्रिड को कॉन्फ़िगर करें
आर्काइव उत्पाद विजेट आपके उत्पाद सूची को इन विकल्पों के साथ प्रदर्शित करता है:
- स्तंभ: 2-6 स्तंभ (3-4 अधिकांश स्टोर के लिए अच्छा काम करता है)
- प्रत्येक पृष्ठ पर उत्पाद: 12-24 उपयोगकर्ता अनुभव के लिए मानक है
- पृष्ठांकन: क्रमांकित पृष्ठ, "और अधिक लोड करें" बटन, या अनंत स्क्रॉल
- क्रमबद्धता ड्रॉपडाउन: ग्राहकों को मूल्य, लोकप्रियता, या रेटिंग के अनुसार क्रमबद्ध करने की अनुमति दें
- बिक्री बैज: बिक्री बैज की स्थिति, रंग, और पाठ को अनुकूलित करें
कई उत्पादों वाले स्टोर के लिए, ग्रिड के ऊपर श्रेणी फ़िल्टरिंग जोड़ें। आप उन्नत फ़िल्टरिंग विकल्पों के लिए Elementor के मेनू विजेट या उत्पाद फ़िल्टर प्लगइन जैसे JetWooBuilder का उपयोग कर सकते हैं।
कार्ट पृष्ठ को डिज़ाइन करना
Elementor Pro आपको कार्ट पृष्ठ लेआउट को अनुकूलित करने की अनुमति देता है। एक अच्छा कार्ट पृष्ठ होना चाहिए:
- उत्पाद छवियाँ, नाम, मूल्य, और मात्राएँ एक साफ तालिका में प्रदर्शित करें
- चल रहे कुल को प्रमुखता से दिखाएँ
- "खरीदारी जारी रखें" बटन शामिल करें जो शॉप पृष्ठ पर लौटता है
- एक शिपिंग कैलकुलेटर प्रदर्शित करें ताकि ग्राहक डिलीवरी लागत का अनुमान लगा सकें
- कार्ट तालिका के नीचे क्रॉस-सेल उत्पाद दिखाएँ
Elementor कार्ट विजेट डिफ़ॉल्ट WooCommerce कार्ट लेआउट को एक दृश्य संपादक के साथ बदलता है जहाँ आप हर तत्व को स्टाइल कर सकते हैं—तालिका की सीमाएँ, बटन के रंग, टाइपोग्राफी, और स्पेसिंग।
चेकआउट पृष्ठ को अनुकूलित करना
चेकआउट पृष्ठ सीधे आपके रूपांतरण दर को प्रभावित करता है। Elementor Pro का चेकआउट विजेट निम्नलिखित पर नियंत्रण प्रदान करता है:
- फॉर्म लेआउट: एक-स्तंभ या दो-स्तंभ बिलिंग/शिपिंग फॉर्म
- ऑर्डर सारांश स्थिति: फॉर्म के साथ बगल में या ऊपर/नीचे
- बटन स्टाइलिंग: ऑर्डर बटन का रंग, आकार, और पाठ
- भुगतान अनुभाग: भुगतान विधियों के लिए रेडियो बटन या टैब लेआउट
- विश्वास बैज: भुगतान फॉर्म के पास सुरक्षा आइकन और गारंटी पाठ जोड़ें
चेकआउट रूपांतरण अनुकूलन टिप्स के लिए, हमारे WooCommerce चेकआउट अनुकूलन गाइड को देखें।
प्रदर्शन पर विचार
Elementor आपके पृष्ठों पर CSS और JavaScript जोड़ता है। एक WooCommerce स्टोर के लिए, प्रदर्शन सीधे रूपांतरणों से जुड़ा होता है। इन सुझावों को ध्यान में रखें:
- कम DOM तत्वों के लिए सेक्शन/स्तंभ के बजाय फ्लेक्सबॉक्स कंटेनर का उपयोग करें
- उत्पाद छवियों का अनुकूलन करें: WebP प्रारूप, उचित आयाम, और लेज़ी लोडिंग का उपयोग करें। हमारे छवि अनुकूलन गाइड को देखें
- विजेट की संख्या सीमित करें: प्रत्येक विजेट मार्कअप जोड़ता है; केवल वही उपयोग करें जिसकी आपको आवश्यकता है
- Elementor के प्रदर्शन सुविधाओं को सक्षम करें: बेहतर एसेट लोडिंग, बेहतर CSS लोडिंग
- कैशिंग प्लगइन का उपयोग करें: WP Rocket Elementor WooCommerce सेटअप के साथ अच्छी तरह से काम करता है
Elementor WooCommerce के लिए आवश्यक ऐडऑन
ये Elementor ऐडऑन WooCommerce निर्माण क्षमताओं को बढ़ाते हैं:
| ऐडऑन | मुख्य WooCommerce सुविधाएँ |
|---|---|
| JetWooBuilder | उन्नत उत्पाद ग्रिड, कस्टम आर्काइव टेम्पलेट, शर्तीय लॉजिक के साथ एकल उत्पाद लेआउट |
| Essential Addons Pro | उत्पाद ग्रिड, उत्पाद कैरोसेल, WooCommerce चेकआउट |
| Happy Elementor Addons | उत्पाद श्रेणी ग्रिड, मिनी कार्ट, उत्पाद कैरोसेल |
अक्सर पूछे जाने वाले प्रश्न
क्या मुझे WooCommerce के लिए Elementor Pro की आवश्यकता है, या क्या मुफ्त संस्करण काम करता है?
WooCommerce-विशिष्ट विजेट्स (उत्पाद छवियाँ, कार्ट में जोड़ें, उत्पाद डेटा टैब, कार्ट, चेकआउट, आदि) के लिए Elementor Pro आवश्यक है। Elementor का मुफ्त संस्करण इन विजेट्स को शामिल नहीं करता है। आप नियमित पृष्ठों को डिज़ाइन करने के लिए मुफ्त संस्करण का उपयोग कर सकते हैं, लेकिन कस्टम WooCommerce टेम्पलेट्स के लिए Elementor Pro की आवश्यकता होती है।
क्या मैं चेकआउट पृष्ठ के लिए Elementor का उपयोग कर सकता हूँ?
हाँ। Elementor Pro में एक चेकआउट विजेट शामिल है जो डिफ़ॉल्ट WooCommerce चेकआउट लेआउट को बदलता है। आप फ़ॉर्म फ़ील्ड, ऑर्डर सारांश, भुगतान अनुभाग, और समग्र लेआउट को अनुकूलित कर सकते हैं। हालाँकि, भारी अनुकूलन के साथ सावधान रहें जो भुगतान गेटवे एकीकरण को तोड़ सकते हैं—परिवर्तन करने के बाद हमेशा पूर्ण खरीद प्रक्रिया का परीक्षण करें।
मैं विभिन्न श्रेणियों के लिए विभिन्न उत्पाद पृष्ठ लेआउट कैसे बनाऊं?
Elementor के थीम बिल्डर में, आप प्रत्येक टेम्पलेट के लिए प्रदर्शन शर्तें निर्धारित कर सकते हैं। कपड़ों के लिए एक उत्पाद पृष्ठ टेम्पलेट बनाएं (आकार/रंग चयनकर्ताओं के साथ), डिजिटल उत्पादों के लिए एक और (शिपिंग जानकारी के बिना), और इसी तरह। प्रत्येक टेम्पलेट केवल निर्दिष्ट श्रेणियों में उत्पादों पर लागू होता है।
क्या Elementor WooCommerce को धीमा करता है?
Elementor किसी भी पृष्ठ पर CSS और JavaScript ओवरहेड जोड़ता है। कई विजेट वाले उत्पाद पृष्ठों पर, यह डिफ़ॉल्ट WooCommerce टेम्पलेट्स की तुलना में लोड समय को 0.5-1.5 सेकंड बढ़ा सकता है। Elementor की अंतर्निहित प्रदर्शन सुविधाओं का उपयोग करना, छवियों को अनुकूलित करना, और कैशिंग प्लगइन का उपयोग करना इस प्रभाव को कम करने में मदद करता है। प्रदर्शन-संवेदनशील स्टोर के लिए, GeneratePress जैसे हल्के थीम पर विचार करें।
क्या मैं किसी भी थीम के साथ Elementor WooCommerce टेम्पलेट्स का उपयोग कर सकता हूँ?
अधिकांश Elementor WooCommerce टेम्पलेट्स किसी भी थीम के साथ काम करते हैं जो WooCommerce का समर्थन करती है। हालाँकि, कुछ थीम में अपनी स्वयं की उत्पाद पृष्ठ स्टाइलिंग हो सकती है जो Elementor टेम्पलेट्स के साथ संघर्ष करती है। Astra, GeneratePress, और OceanWP जैसी थीम को Elementor के साथ निर्बाध रूप से काम करने के लिए डिज़ाइन किया गया है और कस्टम टेम्पलेट्स के लिए सबसे साफ कैनवास प्रदान करती है।
WooCommerce स्टोर निर्माण के लिए Elementor Pro प्राप्त करें
सभी WooCommerce विजेट्स, थीम बिल्डर, और 100+ प्रो टेम्पलेट्स तक पहुँच प्राप्त करें। कस्टम उत्पाद पृष्ठ, शॉप आर्काइव, और चेकआउट लेआउट को दृश्य रूप से बनाएं।
Elementor Pro ब्राउज़ करें →
