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: آرکائیو ٹیمپلیٹ بنائیں
- پر جائیں Templates → Theme Builder → Product Archive
- ایک نیا ٹیمپلیٹ شامل کریں اور "Product Archive" کو قسم کے طور پر منتخب کریں
- ڈسپلے کی شرائط تفویض کریں (تمام آرکائیو، مخصوص زمرے، یا ٹیگ صفحات)
مرحلہ 2: پروڈکٹس کی گرڈ کو ترتیب دیں
آرکائیو پروڈکٹس ویجیٹ آپ کی پروڈکٹ کی فہرست کو ان اختیارات کے ساتھ ظاہر کرتا ہے:
- کالم: 2-6 کالم (3-4 زیادہ تر دکانوں کے لیے اچھا کام کرتا ہے)
- ہر صفحے پر پروڈکٹس: 12-24 صارف کے تجربے کے لیے معیاری ہے
- صفحہ بندی: نمبر والے صفحات، "مزید لوڈ کریں" بٹن، یا لامتناہی اسکرول
- ترتیب دینے والا ڈراپ ڈاؤن: صارفین کو قیمت، مقبولیت، یا درجہ بندی کے لحاظ سے ترتیب دینے کی اجازت دیں
- سیل بیج: سیل بیج کی پوزیشن، رنگ، اور متن کو اپنی مرضی کے مطابق بنائیں
بہت سے پروڈکٹس والی دکانوں کے لیے، گرڈ کے اوپر زمرے کی فلٹرنگ شامل کریں۔ آپ ایلیمنٹور کے مینو ویجیٹ یا پروڈکٹ فلٹر پلگ ان جیسے JetWooBuilder کا استعمال کر سکتے ہیں تاکہ جدید فلٹرنگ کے اختیارات حاصل کیے جا سکیں۔
کارٹ کے صفحے کا ڈیزائن
ایلیمنٹور پرو آپ کو کارٹ کے صفحے کے لے آؤٹ کو اپنی مرضی کے مطابق بنانے کی اجازت دیتا ہے۔ ایک اچھا کارٹ کا صفحہ ہونا چاہیے:
- پروڈکٹ کی تصاویر، نام، قیمتیں، اور مقداریں ایک صاف ٹیبل میں دکھائیں
- چلتی ہوئی کل رقم کو نمایاں طور پر دکھائیں
- ایک "خریداری جاری رکھیں" بٹن شامل کریں جو دکان کے صفحے پر واپس لے جائے
- ایک شپنگ کیلکولیٹر دکھائیں تاکہ صارفین ترسیل کے اخراجات کا اندازہ لگا سکیں
- کارٹ ٹیبل کے نیچے کراس سیل پروڈکٹس دکھائیں
ایلیمنٹور کارٹ ویجیٹ ڈیفالٹ WooCommerce کارٹ لے آؤٹ کو بصری ایڈیٹر کے ساتھ تبدیل کرتا ہے جہاں آپ ہر عنصر کو اسٹائل کر سکتے ہیں—ٹیبل کی سرحدیں، بٹن کے رنگ، نوع ٹائپ، اور اسپیسنگ۔
چیک آؤٹ کے صفحے کو اپنی مرضی کے مطابق بنانا
چیک آؤٹ کا صفحہ براہ راست آپ کی تبدیلی کی شرح پر اثر انداز ہوتا ہے۔ ایلیمنٹور پرو کا چیک آؤٹ ویجیٹ آپ کو کنٹرول فراہم کرتا ہے:
- فارم کا لے آؤٹ: ایک کالم یا دو کالم بلنگ/شپنگ فارم
- آرڈر کا خلاصہ کی پوزیشن: فارم کے ساتھ ساتھ یا اوپر/نیچے
- بٹن کی اسٹائلنگ: آرڈر دینے کے بٹن کا رنگ، سائز، اور متن
- ادائیگی کا سیکشن: ادائیگی کے طریقوں کے لیے ریڈیو بٹن یا ٹیب لے آؤٹ
- اعتماد کے بیجز: ادائیگی کے فارم کے قریب سیکیورٹی آئیکون اور ضمانت کا متن شامل کریں
چیک آؤٹ کی تبدیلی کی اصلاح کے نکات کے لیے، ہمارے WooCommerce چیک آؤٹ کی اصلاح کی رہنمائی کو دیکھیں۔
کارکردگی کے پہلو
ایلیمنٹور آپ کے صفحات پر CSS اور JavaScript شامل کرتا ہے۔ WooCommerce کی دکان کے لیے، کارکردگی براہ راست تبدیلیوں سے جڑی ہوتی ہے۔ ان نکات کو ذہن میں رکھیں:
- کم DOM عناصر کے لیے سیکشنز/کالمز کے بجائے Flexbox کنٹینرز کا استعمال کریں
- پروڈکٹ کی تصاویر کو بہتر بنائیں: 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 دیکھیں →
