एलिमेंट के साथ एक अद्भुत WooCommerce उत्पाद पृष्ठ बनाएं और डिज़ाइन करें

अपने ई-कॉमर्स स्टोर को प्रतिस्पर्धा से अलग करने और अपने ग्राहकों को एक अनूठा अनुभव प्रदान करने के लिए आपको अपने उत्पाद पृष्ठ को संशोधित करना होगा। इसके अलावा, आपके उत्पाद पृष्ठ को सौंदर्यपूर्ण रूप से वैयक्तिकृत करने का विकल्प आपके पूरे ऑनलाइन स्टोर में एक सुसंगत दृश्य डिज़ाइन बनाए रखने के लिए महत्वपूर्ण है।

एलिमेंट बाजार में अग्रणी वर्डप्रेस वेबसाइट बिल्डरों में से एक है, लेकिन क्या आप यह भी जानते हैं कि आप इसका उपयोग करके WooCommerce स्टोर बना सकते हैं?

कई बिल्ट-इन एलीमेंटर WooCommerce मॉड्यूल आपको एलिमेंटर बिल्डर का उपयोग करके WooCommerce सामग्री या कार्यक्षमता ब्लॉक डालने या उन्हें स्टाइल करने की अनुमति देते हैं। बहुत बढ़िया, है ना?

WooCommerce को स्टाइल और कस्टमाइज़ करने के लिए हर छोटे बदलाव के लिए PHP और CSS की आवश्यकता होती थी, लेकिन जैसे-जैसे एलिमेंटर जैसे उपकरण बेहतर होते जाते हैं और अधिक जटिल होते जाते हैं, आपके स्टोर के दिखने और काम करने के तरीके को नियंत्रित करने के लिए अधिक से अधिक विकल्प उपलब्ध हो जाते हैं।

आएँ शुरू करें।

• एलिमेंट टेम्पलेट बनाना
• बिल्डिंग एलिमेंट उत्पाद छवि या गैलरी
• WooCommerce उत्पाद शीर्षक, मूल्य और कार्ट में जोड़ें
• एलिमेंट उत्पाद टैब सेट करना
• तत्व उत्पाद संक्षिप्त विवरण
• एलिमेंटर और WooCommerce उत्पाद अपसेल
• निष्कर्ष – एलिमेंट उत्पाद पेज बिल्डर

एलिमेंट टेम्पलेट बनाना

प्रक्रिया में पहला कदम वर्डप्रेस डैशबोर्ड में टेम्प्लेट पर नेविगेट करके एक नया एलिमेंट टेम्पलेट बनाना है। 'नया बनाएँ' पर क्लिक करें और फिर एकल उत्पाद को टेम्पलेट के रूप में चुनें जिसे आप बनाना चाहते हैं।

जैसा कि हम इस टेम्पलेट को खरोंच से विकसित करते हैं, कोई भी ब्लॉक लगाने की आवश्यकता नहीं है; जब तक आप एक नए पेज के लिए सामान्य एलिमेंटर बिल्डर स्क्रीन तक नहीं पहुंच जाते, तब तक अगले बॉक्स से बाहर निकलें।

बिल्डिंग एलिमेंट उत्पाद छवि या गैलरी

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

एक साधारण 2 कॉलम पंक्ति बनाएं और बाएं कॉलम में उत्पाद छवियाँ मॉड्यूल दर्ज करें; यह व्यावहारिक दिखता है और काम करता है, लेकिन आइए इस लेख के लिए उपयोग किए जा रहे एलिमेंट हैलो थीम से मेल खाने के लिए बिक्री बैज को अनुकूलित करें। ऐसा करने के लिए, हमें कस्टम सीएसएस की एक छोटी सी लाइन लागू करने की आवश्यकता है, जिसे उन्नत> कस्टम सीएसएस पर जाकर पेश किया जा सकता है और नीचे दिए गए कोड को पेस्ट कर सकते हैं।

चयनकर्ता .onsale { \sbackground-color: #cc3366; \एस}

WooCommerce पी उत्पाद शीर्षक, मूल्य और कार्ट में जोड़ें

हम दाहिने हाथ के कॉलम में उत्पाद शीर्षक, उत्पाद मूल्य और कार्ट में जोड़ें के लिए एलिमेंटर मॉड्यूल जोड़ेंगे ।

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

इन मॉड्यूल की सामग्री उत्कृष्ट है। इस प्रकार हम स्टाइल टैब के तहत काम करने जा रहे हैं। सबसे पहले, उत्पाद शीर्षक के फ़ॉन्ट और रंग को हैलो एलीमेंटर थीम में उपयोग किए गए लोगों से मिलान करने के लिए अपडेट करें।

फिर हमें प्रत्येक मॉड्यूल पर क्लिक करके और टेक्स्ट रंग को संशोधित करके उत्पाद मूल्य और टोकरी में जोड़ें मॉड्यूल के लिए भी ऐसा ही करने की आवश्यकता है। उत्पाद मूल्य के लिए, मैं शीर्षक के विपरीत गहरे भूरे रंग का उपयोग करने जा रहा हूं, इसलिए यदि आप अनुसरण कर रहे हैं तो यह हेक्स कोड टाइप करें – #54595f

इसके बाद, कार्ट में जोड़ें मॉड्यूल पर, हम कुछ चीजों को अपडेट करेंगे। नीचे दी गई सेटिंग्स का उपयोग करके बटन की पृष्ठभूमि का रंग और बटन की सीमा त्रिज्या:

• सामग्री को 'कार्ट में जोड़ें' पर सेट करें।
• पृष्ठभूमि का रंग '#cc3366' पर सेट करें
• सीमा त्रिज्या को 0 . पर सेट करें

मैंने राशि चयनकर्ता की सीमा त्रिज्या को 0 में बदल दिया है, जिसे आप मात्रा के लिए शैली टैब में कर सकते हैं।

एलिमेंट उत्पाद टैब सेट करना

प्रत्येक उत्पाद को कुछ बुनियादी जानकारी प्रदर्शित करनी होती है जैसे उत्पाद विवरण और यदि उपलब्ध हो तो समीक्षाएं; यह आमतौर पर उत्पाद टैब के माध्यम से नियंत्रित किया जाता है।

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

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

.woocommerce #review form #reply .form-submit input { background-color: #cc3366; रंग: #fff; सीमा-त्रिज्या: 0px; }

एलिमेंट पी उत्पाद संक्षिप्त विवरण

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

कृपया WooCommerce संक्षिप्त विवरण मॉड्यूल खोजें, फिर उसे उत्पाद मूल्य के नीचे और कार्ट में जोड़ें मॉड्यूल के ऊपर खींचें और छोड़ें।

यहां अभी तक किसी स्टाइल की आवश्यकता नहीं है क्योंकि यह हैलो एलिमेंट से शैलियों को विरासत में मिला है।

एलिमेंटर और WooCommerce पी उत्पाद अपसेल

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

कृपया एलीमेंटर बिल्डर में उत्पाद अपसेल मॉड्यूल खोजें और उत्पाद डेटा टैब के पीछे एक नई पंक्ति में डालें।

जैसा कि आप देख सकते हैं, इसमें हमारी बाकी शैली के पूरक के लिए थोड़ा सा समायोजन की आवश्यकता है। मॉड्यूल को संशोधित करना प्रारंभ करें और निम्नलिखित परिवर्तन करें:

• शीर्षक का रंग इस पर सेट करें – #cc3366
• शीर्षक का रंग इस पर सेट करें – #cc3366
• कीमत का रंग - #54595f . पर सेट करें
• बटन की पृष्ठभूमि का रंग इस पर सेट करें – #cc3366
• बटन का रंग - #fff – पर सेट करें
• बटन बॉर्डर त्रिज्या t0 - 0 . सेट करें

तैयार उत्पाद ऊपर जैसा दिखेगा। यदि आप इस गाइड का उपयोग अपने टेम्पलेट के लिए जंपिंग-ऑफ पॉइंट के रूप में करते हैं, तो आप रंग हेक्स कोड को समायोजित कर सकते हैं जैसा कि आप फिट देखते हैं।

एक बार जब आप कर लेते हैं, तो आप अपना टेम्प्लेट प्रकाशित करते हैं। अगली विंडो में, आपको "आप अपना टेम्प्लेट कहाँ प्रदर्शित करना चाहते हैं?" प्रश्न दिखाई देगा। इस टेम्पलेट का उपयोग कब किया जाना चाहिए, यह निर्धारित करने के लिए "शर्त जोड़ें" पर क्लिक करें। आप अपने सभी उत्पाद पृष्ठों पर टेम्पलेट का उपयोग करने के लिए "सभी उत्पाद" का चयन कर सकते हैं। आप इस टेम्प्लेट का उपयोग केवल उन उत्पादों के लिए भी कर सकते हैं जो किसी विशिष्ट श्रेणी में आते हैं या उनके साथ कोई विशेष टैग जुड़ा हुआ है।

निष्कर्ष – एलिमेंटर पी प्रोडक्ट पेज बिल्डर

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

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

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