WooCommerce उत्पाद स्लाइडर कैसे बनाएं (2 निःशुल्क प्लगइन्स)

WooCommerce उत्पाद स्लाइडर कैसे बनाएं (2 निःशुल्क प्लगइन्स)

आपका उत्पाद कैटलॉग जितना बड़ा होता जाता है, विज़िटर के लिए अपनी इच्छित चीज़ों को ढूँढना उतना ही कठिन होता जाता है। सही वस्तु का पता लगाने की उम्मीद में पृष्ठ दर पृष्ठ ब्राउज़ करना एक घर का काम बन सकता है। यहीं उत्पाद स्लाइडर काम आ सकता है।

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

इस लेख में, हम आपको ईकामर्स स्लाइडर्स के हमारे कुछ पसंदीदा उदाहरण दिखाएंगे। फिर हम दो अलग-अलग प्लगइन्स का उपयोग करके WooCommerce उत्पाद स्लाइडर बनाने के तरीके के बारे में जानेंगे, जो दोनों एक मुफ्त संस्करण प्रदान करते हैं।

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

अपने स्टोर पर उत्पाद स्लाइडर का उपयोग करने के लाभ

वेब पर हर जगह स्लाइडर मौजूद हैं. कई वेबसाइटें अब अपने नायक वर्गों के एक भाग के रूप में स्लाइडिंग गैलरी का उपयोग करती हैं:

एक स्लाइडर की विशेषता वाला नायक अनुभाग।

यदि आप समीक्षाएँ या ग्राहक प्रशंसापत्र दिखाना चाहते हैं, तो स्लाइडर भी एक उत्कृष्ट विकल्प हो सकते हैं:

स्लाइडिंग प्रशंसापत्र एक छोटी सी जगह में ढेर सारी जानकारी पैक करने का एक शानदार तरीका है।

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

एकाधिक उत्पाद पृष्ठ।

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

उत्पाद स्लाइडर का एक उदाहरण।

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

अपने ऑनलाइन वर्डप्रेस स्टोर में उत्पाद स्लाइडर जोड़ने के दो आसान तरीके

वर्डप्रेस में स्लाइडर जोड़ने के लिए आप बहुत सारे प्लगइन्स का उपयोग कर सकते हैं। हालाँकि, एक ऑनलाइन स्टोर के लिए, आप एक ऐसा विकल्प चाहते हैं जो WooCommerce के साथ संगत हो। इसे ध्यान में रखते हुए, आइए देखें कि दो सर्वश्रेष्ठ स्लाइडर प्लगइन विकल्पों का उपयोग कैसे करें।

1. WooCommerce प्लगइन के लिए उत्पाद स्लाइडर का उपयोग करें

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

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

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

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

आरंभ करने से पहले, आपको कम से कम कुछ उत्पादों के साथ WooCommerce स्टोर की आवश्यकता होगी। यहाँ हमारा है:

एक नया WooCommerce स्टोर।

अब हमारे तैयार स्लाइडर को देखें, और फिर हम आपको दिखाएंगे कि हम वहां कैसे पहुंचे:

उत्पाद स्लाइडर का एक उदाहरण।

WooCommerce के लिए उत्पाद स्लाइडर की स्थापना

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

यदि आप पर क्लिक करते हैं नया जोड़ोपहली चीज़ जो आप देखेंगे, वह उन तरीकों का एक सिंहावलोकन है, जिनसे आप अपनी वेबसाइट पर एक नया स्लाइडर जोड़ सकते हैं:

एक नया स्लाइडर जोड़ना।

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

अपने स्लाइडर के लिए एक थीम का चयन करना।

थीम वन एक स्वच्छ और न्यूनतर शैली प्रदान करता है, इसलिए हम उस विकल्प के साथ बने रहेंगे।

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

अपने स्लाइडर में प्रदर्शित करने के लिए उत्पादों का चयन करना।

हम आगे बढ़ेंगे और अपने स्लाइडर को डेस्कटॉप डिवाइस पर चार कॉलम और मोबाइल डिवाइस पर एक और कुल 12 उत्पाद दिखाने के लिए कॉन्फ़िगर करेंगे।

की ओर बढ़ रहा है स्लाइडर नियंत्रण टैब पर, हम ऑटोप्ले को अक्षम कर देंगे, और फिर नेविगेशन तीरों और पेजिनेशन को सक्षम करेंगे:

अपने पेजिनेशन और नेविगेशन सेटिंग्स को कॉन्फ़िगर करना।

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

स्वाइपिंग और माउस ड्रैगिंग को सक्षम करना।

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

अपने स्लाइडर के टेक्स्ट विकल्पों को कॉन्फ़िगर करना।

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

शोर्टकोड ब्लॉक का उपयोग करके अपने उत्पाद स्लाइडर को जोड़ना।

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

2. WooCommerce के लिए पिकप्लगिन्स उत्पाद स्लाइडर का उपयोग करके उत्पाद स्लाइडर बनाएं

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

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

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

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

उत्पाद स्लाइडर का एक उदाहरण।

प्लगइन की स्थापना

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

अपने नए स्लाइडर के लिए एक नाम सेट करना।

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

अपने स्लाइडर के लिए प्रदर्शित करने के लिए कितने कॉलम कॉन्फ़िगर करना।

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

अपने स्लाइडर के लिए लूपिंग सक्षम करना।

इसके अलावा, हमने माउस चालू किया और ड्रैग विकल्पों को स्पर्श किया। एक उपयोगी विशेषता यह प्लगइन भी प्रदान करता है ‘आलसी लोडिंग’, जो पृष्ठ गति को बढ़ाने के लिए आपके स्लाइडर के भीतर तत्वों को उत्तरोत्तर लोड करता है:

अपने उत्पाद स्लाइडर के लिए आलसी लोडिंग सक्षम करना।

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

यह कॉन्फ़िगर करना कि आपके स्लाइडर को कौन से उत्पाद प्रदर्शित करने चाहिए।

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

अपने उत्पाद स्लाइडर के लिए एक टेम्पलेट का चयन करना।

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

यह कॉन्फ़िगर करना कि आपके स्लाइडर में कौन से तत्व शामिल होने चाहिए।

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

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

निष्कर्ष

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

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

क्या आपके पास अपने ऑनलाइन स्टोर में उत्पाद स्लाइडर का उपयोग करने के बारे में कोई प्रश्न हैं? आइए नीचे टिप्पणी अनुभाग में उनके बारे में जानें!

मुफ्त गाइड

गति बढ़ाने के लिए 5 आवश्यक टिप्स
आपकी वर्डप्रेस साइट

अपने लोडिंग समय को 50-80% तक कम करें
केवल सरल युक्तियों का पालन करके।

WooCommerce उत्पाद स्लाइडर कैसे बनाएं (2 निःशुल्क प्लगइन्स) WooCommerce उत्पाद स्लाइडर कैसे बनाएं (2 निःशुल्क प्लगइन्स)

प्रातिक्रिया दे

आपका ईमेल पता प्रकाशित नहीं किया जाएगा. आवश्यक फ़ील्ड चिह्नित हैं *