एलिमेंट में वूकॉमर्स उत्पाद हिंडोला: तीन तरीके जो काम करते हैं

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

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

नीचे: कैसे प्रत्येक एक बनाया जाता है, तो भाग सबसे ट्यूटोरियल छोड़, जो है जहां एक उत्पाद हिंडोला सक्रिय रूप से आप बिक्री लागत।

कौन सा तरीका चुनना है

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

विधि १: एलिमेंटर प्रो का लूप हिंडोला

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

1. लूप आइटम टेम्पलेट बनाएं। टेम्पलेट्स → थीम बिल्डर → लूप आइटम, स्रोत उत्पाद पर सेट करें गतिशील टैग का उपयोग करके छवि, शीर्षक, मूल्य, रेटिंग और बटन बिछाएं।
2. पृष्ठ पर लूप कैरोसेल विजेट छोड़ें और उस टेम्पलेट का चयन करें।
3. क्वेरी सेट करें। स्रोत वह जगह है जहां वास्तविक काम होता है: सभी उत्पादों, एक श्रेणी, एक टैग, बिक्री पर, चित्रित, या मैन्युअल चयन फिर तिथि, मूल्य, लोकप्रियता या मेनू आदेश द्वारा आदेश।
4. सेट करें कि कितने लोड करने हैं। यह कुल हिंडोला रखता है, न कि कितने दिखाई देते हैं आठ से बारह एक संबंधित-उत्पाद पट्टी सूट करते हैं चार दृश्यमान के साथ चार लोड करें और स्क्रॉल करने के लिए कुछ भी नहीं है।
5. जो नहीं होना चाहिए उसे बाहर करें। आउट-ऑफ-स्टॉक आइटम, और एक एकल उत्पाद पृष्ठ पर, वर्तमान उत्पाद एक संबंधित-उत्पाद पट्टी जिसमें वह उत्पाद शामिल है जिसे आप पहले से ही देख रहे हैं, टूटा हुआ पढ़ता है।
6. स्लाइड-प्रति-दृश्य प्रति ब्रेकप्वाइंट सेट करें। डेस्कटॉप पर चार, टैबलेट पर तीन, मोबाइल पर डेढ़।

मोबाइलंबाल पर वह “एक और आधा टाइपो नहीं है एक पूर्ण कार्ड प्लस अगले एक का आधा सबसे मजबूत संकेत एक पट्टी स्क्रॉल है चौड़ाई भरने वाला एक कार्ड एक स्थिर ब्लॉक की तरह दिखता है और ज्यादातर लोग इसे कभी स्वाइप नहीं करते हैं।

पकड़ लाइसेंस है। लूप कैरोसेल केवल प्रो है, एलिमेंटर कोर में कोई निःशुल्क समकक्ष नहीं है। हिंडोला प्लगइन राउंडअप क्वेरी नियंत्रणों और निःशुल्क समाधान के बारे में विस्तार से बताता है।

विधि 2: क्वाड्रेंट पेजेड कैटलॉग के साथ हाथ से क्यूरेट किया गया (निःशुल्क)

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

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

लाइव डेमो विजेट JSON डाउनलोड करें

यह मास्टर एडॉन्स → विजेट बिल्डर → आयात विजेट के माध्यम से मुफ्त प्लगइन पर आयात करता है, फिर पसंदीदा के तहत एलिमेंटर में दिखाई देता है बाकी सेट, बीस डिजाइन जिनमें से आठ मुफ्त हैं, में है नि: शुल्क एलिमेंट स्लाइडर टेम्पलेट्स राउंडअप।

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

विधि ३: फीचर्ड उत्पाद, और फोटो के लिए छवि हिंडोला

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

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

ट्रैक पर उत्पाद फोटोग्राफी के लिए (एक ही जैकेट के छह कोण, एक लुकबुक, एक सामग्री पट्टी) निःशुल्क छवि हिंडोला इसे संभालता है लाइटबॉक्स, कैप्शन, प्रति-डिवाइस स्लाइड-प्रति-दृश्य यदि उनमें से कुछ कोण स्टिल के बजाय क्लिप हैं, तो वीडियो हिंडोला और गैलरी स्लाइडर गाइड प्लेबैक को संभालने वाले विजेट को कवर करता है।

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

जहां एक उत्पाद हिंडोला संबंधित है

आप जिस भी विधि का उपयोग करते हैं, चार पद विश्वसनीय रूप से काम करते हैंः

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

वे क्या साझा करते हैं: उत्पाद हैं वैकल्पिक। यदि कोई पट्टी को नहीं छूता तो पृष्ठ अभी भी काम करता है।

जहां यह आपको बिक्री की लागत देता है

कभी भी किसी दुकान या श्रेणी पृष्ठ पर हिंडोला न रखें।

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

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

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

कार्ट में जोड़ें: हिंडोला में या नहीं?

सरल उत्पादों के लिए बटन दिखाएं इसे परिवर्तनीय लोगों के लिए छिपाएं।

पट्टी में एजेएक्स ऐड-टू-कार्ट के साथ एक साधारण उत्पाद एक वास्तविक शॉर्टकट है: एक टैप, कोई पृष्ठ लोड नहीं, कार्ट अपडेट होने के लायक।

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

यदि आपका कैटलॉग दोनों को मिलाता है, तो एक समझौता लेआउट के बजाय अलग-अलग प्रश्नों के साथ दो हिंडोले चलाएं।

बिक्री बैज और मूल्य प्रदर्शन

बिक्री बैज दिखाएं यह उत्पाद कार्ड में उच्चतम-विपरीत चीज है और यही कारण है कि लोग स्क्रॉल करना बंद कर देते हैं।

बिक्री पर उपलब्ध मूल वस्तुओं सहित कीमत दिखाएं, क्योंकि तुलना अनुनय है।

परिवर्तनीय उत्पाद एक सीमा प्रदर्शित करते हैं (“£२० से £४५”) लंबी दूरी की लपेटें और कार्ड संरेखण को तोड़ें, और एक क्षैतिज पट्टी में गलत संरेखित कार्ड ग्रिड की तुलना में कहीं अधिक दिखाई देते हैं या तो मूल्य पंक्ति पर एक निश्चित ऊंचाई निर्धारित करें या £२०.” से “ दिखाएं

कार्ड डिजाइन जो शौकिया नहीं दिखता है

बाकी से तीन बातें ज्यादा मायने रखती हैं।

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

एक छवि पहलू अनुपात। एक ही पट्टी में पोर्ट्रेट और स्क्वायर उत्पाद तस्वीरें एक ही सबसे आम कारण है कि एक उत्पाद हिंडोला सस्ता दिखता है एक अनुपात सेट करें और इसे फसल दें।

कार्डों के बीच अंतर। 16 से 24px। शून्य अंतर उत्पादों को एक साथ ब्लीड कर देता है; बहुत अधिक और चार कार्ड एक सेट के रूप में पढ़ना बंद कर देते हैं।

उत्पादों के लिए ऑटोप्ले?

नहीं, और यह कोई प्राथमिकता नहीं है। द ऑटोप्ले नियम हीरो स्लाइडर के लिए अलग है, जहां कुछ भी क्लिक करने योग्य नहीं है और रोटेशन की लागत कुछ भी नहीं है।

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

इसे बंद कर दें।

प्रदर्शन: एक उत्पाद हिंडोला वास्तव में क्या खर्च करता है

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

• क्वेरी को बारह पर कैप करें। इसके अलावा आप ऐसे कार्ड प्रस्तुत कर रहे हैं जिन तक कोई नहीं पहुंचता।
• दृश्यमान छवियों की पहली पंक्ति को छोड़कर सब कुछ आलसी-लोड करें। ऑफ-स्क्रीन स्लाइड्स को उत्सुकता से लोड करना धीमे उत्पाद पृष्ठ का सामान्य कारण है।
• कार्ड छवि को कार्ड के आकार पर परोसें। 300px कार्ड में स्केल की गई 2000px उत्पाद की तस्वीर WooCommerce साइट पर सबसे आम बर्बाद डाउनलोड है।

प्रति पृष्ठ अनुभाग एक हिंडोला एक उचित छत है एक मुखपृष्ठ पर तीन स्टैक्ड हिंडोला एक फोन पर मुख्य धागे के लिए प्रतिस्पर्धा करने वाले तीन स्लाइडर हैं।

स्कीमा: इसे हाथ से रोल न करें

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

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

अक्सर पूछे जाने वाले प्रश्न

अगला

छह उत्पादों को सूचीबद्ध करने के बजाय छह कोणों से एक उत्पाद की शूटिंग? वह है छवि हिंडोला ट्यूटोरियल, जो लाइटबॉक्स और कैप्शन पक्ष को कवर करता है।

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

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