Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

अलग सूचियों में वूकामर्स (WooCommerce) श्रेणियाँ, उपश्रेणियाँ, और उत्पाद (प्राडक्ट) को प्रदर्शित करें

by
Difficulty:IntermediateLength:LongLanguages:

Hindi (हिंदी) translation by Satyam Sh. (you can also view the original English article)

Final product image
What You'll Be Creating

वूकामर्स (WooCommerce) आपको कुछ विकल्प देता है की आप क्या  प्रदर्शित कर सकते हैं अपने संग्रह पृष्ठों (आर्काइव पेज) पर:

  • उत्पाद (products)
  • श्रेणियां (मुख्य दुकान/shop पृष्ठ पर) या उपश्रेणियाँ (श्रेणी पृष्ठों पर)
  • दोनों उत्पाद और श्रेणियां।

जब मैं एक स्टोर स्थापित कर रहा हूं, तो मैं आम तौर पर तीसरे विकल्प का चयन करता हूं: उत्पादों और श्रेणियाँ / उपश्रेणियाँ (products and categories/subcategories)। इसका मतलब यह है कि मेरी स्टोर में आने वाले आगंतुक (विज़िटर) या तो उत्पाद पृष्ठ का चयन कर सकते हैं या उत्पाद श्रेणी संग्रह के माध्यम से क्लिक करके अपनी खोज को परिष्कृत (रिफाइन) कर सकते हैं।

हालांकि, इस दृष्टिकोण के साथ एक चीज़ असफल रहा है: यह दोनों श्रेणियों/ उपश्रेणियों को एक साथ प्रदर्शित करता है, दोनों के बीच कोई अंतर नहीं है। इसका मतलब यह है कि यदि आपकी उत्पाद छवियों में आपके उत्पाद फोटो से अलग आयाम हैं, तो लेआउट थोड़ा गड़बड़ दिख सकता है। यहां तक कि अगर आपकी छवियों (images) का आकार समान है, तो अगर संग्रह (आर्काइव) पृष्ठ में किसी एक पंक्ति में श्रेणी और उत्पाद दोनों शामिल हैं, तो श्रेणियों के लिए एक 'कार्ट में जोड़ें' ('Add to Cart") बटन का अभाव  जो पंक्ति को अव्यवस्थित कर सकती है, क्योंकि इसके सभी एलमन्ट में एक ही आयाम नहीं है।

इस ट्यूटोरियल में मैं आपको दिखाता हूं कि उत्पादों को प्रदर्शित करने से पहले एक अलग सूची में श्रेणियां कैसे प्रदर्शित करें।

ऐसा करने के लिए, हम चार चरणों का पालन करेंगे:

  1. उस कोड को पहचानें जो वूकामर्स (WooCommerce) आर्काइव पृष्ठों पर श्रेणियों और उपश्रेणियों को आउटपुट करने में उपयोग करता है।
  2. हमारे कोड के लिए एक प्लगइन बनाएं।
  3. उत्पाद प्रविष्टियों (लिस्टिंगज़) से पहले श्रेणियों या उपश्रेणियों को रखने के लिए एक फ़ंक्शन लिखें।
  4. आउटपुट को स्टाइल करें। 

लेकिन इससे पहले कि आप शुरू हो, आपको कुछ उत्पादों के साथ एक वूकामर्स (WooCommerce) इन्स्टलेशन की आवश्यकता होगी, और उत्पाद श्रेणियों और उपश्रेणियाँ सेट अप।

आपको किस चीज़ की ज़रूरत पड़ेगी

पालन करने के लिए, आपको आवश्यकता होगी:

  • वर्डप्रेस की एक डिवेलप्मन्ट इन्स्टलेशन।
  • एक कोड संपादक (code editor)।
  • वूकामर्स (WooCommerce) स्थापित और सक्रिय। 
  • उत्पाद जोड़ा गया—मैंने डमी उत्पाद डेटा आयात (इम्पोर्ट) किया है जो वूकामर्स (WooCommerce) के साथ आता है; यह कैसे करें के विवरण के लिए, यह मार्गदर्शिका देखें।
  • एक वूकामर्स (WooCommerce)-संगत थीम सक्रिय—मैं स्टोरफ्रंट (Storefront) का उपयोग कर रहा हूँ।

शुरू करने से पहले: डिफ़ॉल्ट विकल्प

आइए देखें कि वूकामर्स (WooCommerce) डिफ़ॉल्ट रूप से हमें क्या प्रदान करता है।

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

Product categories screen in WordPress admin with category images added

अब आइए देखें कि कैसे वूकामर्स (WooCommerce) संग्रह पृष्ठों (archive pages) में उत्पाद श्रेणियों और उत्पादों को प्रदर्शित करता है।

यदि आपके पास पहले से नहीं है, तो WooCommerce > Settings पर जाएं, उत्पाद (Products) टैब चुनें, और फिर डिस्प्ले (Display) ऑप्शन चुनें। प्रत्येक Shop Page Display और Default Category Display विकल्पों के लिए, Show both को चुनें:

WooCommerce product display settings screen

अपनी सेटिंग्स सहेजने के लिए Save changes बटन पर क्लिक करें और अपनी साइट के शॉप पेज पर जाएं। मेरा ऐसा दिखता है:

The main shop page without any changes

ऐसा होता है, क्योंकि मेरे पास तीन उत्पाद श्रेणियां हैं और मेरी श्रेणी की छवियों मेरे उत्पाद छवियों के समान हैं, ये बहुत साफ दिखती हैं। लेकिन यहां उत्पाद श्रेणी आर्काइव (product category archives) में से एक है:

The Music category archive page without any changes

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

कोड की पहचान करना, जो कि वूकामर्स (WooCommerce), आर्काइव में श्रेणियों और उत्पादों का आउटपुट देने में उपयोग करता है

पहला कदम यह है कि कैसे वूकामर्स (WooCommerce) श्रेणियों और उपश्रेणियों को आउटपुट करता है। तो चलो प्रासंगिक फंगक्शन को खोजने के लिए वूकामर्स (WooCommerce) स्रोत कोड में तल्लीन करते है।

जो फ़ाइल वूकामर्स (WooCommerce) संग्रह पृष्ठों को प्रदर्शित करने के लिए उपयोग करता है वह archive-product.php है, जो templates फ़ोल्डर में है।

उस फाइल के अंदर, आप यह कोड को पा सकते हैं, जो श्रेणियों और उत्पादों को आउटपुट करता है:

तो वहाँ एक woocommerce_product_subcategories() फ़ंक्शन है जो श्रेणियों या उपश्रेणियों को लूप चलाने से पहले आउटपुट करता है जो उत्पादों को आउटपुट करता है।

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

इसलिए इसके बजाय, हम अपने आर्काइव पृष्ठों (archive pages) पर श्रेणियों और उपश्रेणियों का प्रदर्शन बंद कर देंगे, ताकि केवल उत्पाद प्रदर्शित हो सके। इसके बाद हम एक नया फ़ंक्शन बना सकते हैं जो उत्पाद श्रेणियों या उपश्रेणियों को आउटपुट करता है, और इसे woocommerce_before_shop_loop ऐक्शन के साथ हुक कर देता है, जिससे सुनिश्चित हो कि हम एक उच्च प्राथमिकता का उपयोग करते हैं ताकि यह उन फंगक्शन के बाद शुरू हो जो पहले से ही उस ऐक्शन के साथ हुक हो।

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

तो चलो एक प्लगइन बनाते हैं जो ऐसा करता है।

प्लगइन बनाना

अपने  wp-content/plugins  डिरेक्टरी में, एक नया फ़ोल्डर बनाकर उसे एक अद्वितीय (यूनीक) नाम दें। मैं अपनी को  tutsplus-separate-products-categories-in-archives  बुला रहा हूं। उस के अंदर, एक नई फ़ाइल बनाएं, फिर से एक अद्वितीय (यूनीक) नाम के साथ। मैं एक ही नाम का उपयोग कर रहा हूं: tutsplus-separate-products-categories-in-archives.php

अपनी फ़ाइल खोलें और इस कोड को इसमें जोड़ें:

आप लेखक विवरण (author details) को संपादित करना चाह सकते हैं क्योंकि यह आपका प्लगिन है जो आप लिख रहे हैं। अपनी फ़ाइल को सहेजें और प्लगइन को वर्डप्रेस ऐड्मिन द्वारा सक्रिय करें।

हमारे फंगक्शन को लिखना

अब फ़ंक्शन लिखिए। लेकिन शुरू करने से पहले, ऐड्मिन स्क्रीन पर श्रेणी प्रविष्टियां (category listings) बंद करें। WooCommerce > Settings पर जाएं, Products टैब चुनें, और फिर Display ऑप्शन चुनें। दुकान पृष्ठ डिस्प्ले (Shop Page Display) और डिफॉल्ट श्रेणी प्रदर्शन (Default Category Display) विकल्पों में से प्रत्येक के लिए, उत्पादों को दिखाएं (Show products) चुनें। अपने परिवर्तन को सहेजें।

आपकी दुकान पेज (shop page) अब इस तरह कुछ दिखाई देगा:

The main shop page with just products displayed

आपकी प्लगइन फ़ाइल में, इसे जोड़ें: 

अब फ़ंक्शन के अंदर इस कोड को जोड़ें: 

आइए देखें कि यह फ़ंक्शन क्या करता है:

  • यह मौजूदा क्वेरी ऑब्जेक्ट को पहचानता है और अपने आईडी को $parentid के रूप में परिभाषित करता है।
  • यह get_terms() का उपयोग वर्तमान में पूछे जाने वाले आइटम के साथ उनके पेरन्ट के रूप में शर्तों की पहचान करने के लिए करता है। यदि यह मुख्य शॉप पेज है, तो यह शीर्ष-स्तरीय श्रेणियों को वापस करेगा; अगर यह एक श्रेणी आर्काइव (category archive) है, तो यह उपश्रेणियां वापस (रीटर्न) करेगा।
  • फिर यह जांचता है कि क्या कोई भी टर्म है, एक  foreach  लूप और एक  ul  एलमन्ट खोलने से पहले।
  • प्रत्येक शब्द के लिए, यह एक li एलमन्ट बनाता है, और फिर woocommerce_subcatgeory_thumbnail() का उपयोग करते हुए श्रेणी की छवि को आउटपुट करता है, उसके संग्रह के लिंक में श्रेणी नाम (category name) के अनुसार।

अब अपनी फाइल सहेजें और मुख्य शॉप पेज को रीफ्रेश करें।  मेरा ऐसा दिखता है: 

Main shop page - categories are separate but too big and with list styling bullets etc

श्रेणियाँ प्रदर्शित होते हैं, लेकिन उन्हें कुछ स्टाइल की आवश्यकता होती है। आइए, यह अगला करें।

श्रेणी लिस्टिंगस (Category Listings) की स्टाइलिंग

ताकि हम स्टाइल जोड़ सकें, हमें हमारे प्लगइन के अंदर एक स्टाइलशीट की ज़रूरत है, जिससे हमें एनक्यू (enqueue) की आवश्यकता होगी।

अपने प्लगइन फ़ोल्डर में, css नामक एक फ़ोल्डर बनाएँ, और उसके अंदर, style.css नामक एक फ़ाइल बनाएँ।

अब, आपकी प्लगइन फ़ाइल में, इसे पहले से बनाए गए फ़ंक्शन के ऊपर जोड़ें:

यह सही तरीके से आपके द्वारा बनाए गए स्टाइलशीट को सही तरीके से जोड़ता है। 

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

मैंने वूकामर्स (WooCommerce) द्वारा उपयोग किए जाने वाले स्टाइल से सटीक चौड़ाई और मार्जिन (widths and margins) की कापी की है।

अब अपने मुख्य शॉप पेज की जांच करें।  ये मेरा: 

The main shop page Categories are above products and styled consistently in a grid

यहां संगीत (Music) श्रेणी आर्काइव है:

The Music archive Two subcategories are above the 3 wide grid of products

और यहां बताया गया है कि यह छोटी स्क्रीन पर कैसा दिखता है:

The categories on narrower screens full width not in a grid

सारांश

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

वूकामर्स (WooCommerce) टेम्पलेट फ़ाइल के भीतर फ़ंक्शन को अलग-अलग ऐक्शन हुक में हुक करके, आप इस कोड को पृष्ठ पर कहीं और श्रेणियों या उप-श्रेणियों की सूची के आउट्पुट के लिए उपयोग कर सकते हैं (उदाहरण के लिए उत्पादों के नीचे)।

यदि आप वर्तमान में एक स्टोर चलाते हैं जिसे आप विस्तारित करने के लिए देख रहे हैं, या आप कुछ अतिरिक्त प्लगइन्स को अध्ययन करने के लिए देख रहे हैं, क्योंकि यह वूकामर्स (WooCommerce) से संबंधित है, यह देखने के लिए संकोच न करें कि कौन सा प्लग-इन एनवाटो मार्किट (Envato Market) में उपलब्ध हैं।

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.