Elementor کے ساتھ ایک حیرت انگیز WooCommerce پروڈکٹ پیج بنائیں اور ڈیزائن کریں۔

اپنے ای کامرس اسٹور کو مقابلے سے ممتاز کرنے اور اپنے کلائنٹس کو ایک منفرد تجربہ فراہم کرنے کے لیے آپ کو اپنے پروڈکٹ کے صفحے میں ترمیم کرنا ہوگی۔ مزید برآں، آپ کے پروڈکٹ کے صفحہ کو جمالیاتی طور پر ذاتی بنانے کا آپشن آپ کے آن لائن اسٹور میں ایک مستقل بصری ڈیزائن کو برقرار رکھنے کے لیے اہم ہے۔

Elementor مارکیٹ میں ورڈپریس ویب سائٹ بنانے والوں میں سے ایک ہے، لیکن کیا آپ یہ بھی جانتے ہیں کہ آپ اسے استعمال کرتے ہوئے WooCommerce اسٹورز بنا سکتے ہیں؟

بہت سے بلٹ ان Elementor WooCommerce ماڈیولز آپ کو Elementor بلڈر کا استعمال کرتے ہوئے WooCommerce مواد یا فنکشنلٹی بلاکس داخل کرنے یا انہیں اسٹائل کرنے کی اجازت دیتے ہیں۔ بہت اچھا، ٹھیک ہے؟

WooCommerce کو اسٹائل کرنے اور حسب ضرورت بنانے کے لیے ہر چھوٹی تبدیلی کے لیے PHP اور CSS کی ضرورت پڑتی تھی، لیکن جیسے جیسے Elementor جیسے ٹولز بہتر ہوتے ہیں اور پیچیدہ ہوتے جاتے ہیں، آپ کے اسٹور کی شکل اور کام کرنے کے طریقے کو کنٹرول کرنے کے لیے زیادہ سے زیادہ اختیارات دستیاب ہوتے ہیں۔

آئیے شروع کرتے ہیں۔

• ایک عنصر ٹیمپلیٹ بنانا
• ایلیمینٹر پروڈکٹ کی تصویر یا گیلری بنانا
• WooCommerce پروڈکٹ کا عنوان، قیمت اور کارٹ میں شامل کریں۔
• ایلیمینٹر پروڈکٹ ٹیبز کو ترتیب دینا
• عنصر مصنوعات کی مختصر تفصیل
• Elementor اور WooCommerce پروڈکٹ اپ سیل
• نتیجہ - عنصر پروڈکٹ پیج بلڈر

ایک عنصر ٹیمپلیٹ بنانا

طریقہ کار کا پہلا مرحلہ ورڈپریس ڈیش بورڈ میں ٹیمپلیٹس پر تشریف لے کر ایک نیا عنصر ٹیمپلیٹ بنانا ہے۔ 'Build New' پر کلک کریں پھر سنگل پروڈکٹ کو بطور ٹیمپلیٹ منتخب کریں جسے آپ بنانا چاہتے ہیں۔

جیسا کہ ہم اس ٹیمپلیٹ کو شروع سے تیار کرتے ہیں، کوئی بلاک لگانے کی ضرورت نہیں ہے۔ اگلے باکس سے باہر نکلیں جب تک کہ آپ ایک نئے صفحہ کے لیے عام ایلیمینٹر بلڈر اسکرین پر نہ پہنچ جائیں۔

ایلیمینٹر پروڈکٹ کی تصویر یا گیلری بنانا

ہر WooCommerce پروڈکٹ کے پاس پروڈکٹ کی تصویر یا تصویری گیلری ہوتی ہے جو صارفین کو پروڈکٹ کی تصاویر دکھاتی ہے۔ Elementor ایک بلٹ ان پروڈکٹ امیجز ماڈیول فراہم کرتا ہے جو ہمیں اسے اپنے ٹیمپلیٹ میں داخل کرنے کی اجازت دیتا ہے۔

ایک سادہ 2 کالم قطار بنائیں اور بائیں کالم میں پروڈکٹ امیجز ماڈیول درج کریں۔ یہ عملی نظر آتا ہے اور کام کو انجام دیتا ہے، لیکن آئیے اس مضمون کے لیے استعمال کیے جانے والے Elementor Hello تھیم سے ملنے کے لیے سیلز بیج کو حسب ضرورت بنائیں۔ ایسا کرنے کے لیے، ہمیں کسٹم سی ایس ایس کی ایک چھوٹی لائن کو لاگو کرنے کی ضرورت ہے، جسے ایڈوانسڈ> کسٹم سی ایس ایس پر جا کر متعارف کرایا جا سکتا ہے اور نیچے کا کوڈ پیسٹ کیا جا سکتا ہے۔

سلیکٹر .onsale { \sbackground-color: #cc3366 ; \s}

WooCommerce p roduct کا عنوان، قیمت اور کارٹ میں شامل کریں۔

دائیں ہاتھ کے کالم میں پروڈکٹ کے عنوان، پروڈکٹ کی قیمت، اور ٹوکری میں کے لیے ایلیمینٹر ماڈیولز شامل کریں گے

ایلیمینٹر کنسٹرکٹر میں ان تینوں ماڈیولز کو تلاش کریں، پھر انہیں اوپر بیان کردہ ترتیب میں ترتیب دینے کے لیے گھسیٹیں اور چھوڑیں۔ یہ مکمل طور پر فعال ہے، لیکن ہم اسے اوپر والے سیکشن ہیلو ایلیمینٹر تھیم کی طرح اسٹائل سے مماثل بنانا چاہتے ہیں۔ Elementor کے ساتھ ماڈیولز کو اسٹائل کرنا آسان ہے، آپ کو صرف ماڈیول پر کلک کرنے کی ضرورت ہے، اور ایڈیٹر کو اسٹائلنگ کے اختیارات کو بائیں طرف کھولنا چاہیے۔

ان ماڈیولز کا مواد بہترین ہے۔ اس طرح ہم اسٹائل ٹیب کے تحت کام کرنے جا رہے ہیں۔ سب سے پہلے، آئیے ہیلو ایلیمینٹر تھیم میں استعمال ہونے والے فونٹ اور پروڈکٹ ٹائٹل کے رنگ کو اپ ڈیٹ کریں۔

پھر ہمیں پروڈکٹ کی قیمت کے لیے بھی ایسا ہی کرنا ہوگا اور ہر ماڈیول پر کلک کرکے اور متن کے رنگ میں ترمیم کرکے باسکٹ ماڈیولز میں اضافہ کرنا ہوگا۔ پروڈکٹ کی قیمت کے لیے، میں سرخی کے مقابلے میں گہرے سرمئی رنگ کا استعمال کرنے جا رہا ہوں، لہذا اگر آپ اس کے ساتھ پیروی کر رہے ہیں تو یہ ہیکس کوڈ ٹائپ کریں - #54595f

اس کے بعد، Add to Cart ماڈیول پر، ہم کچھ چیزوں کو اپ ڈیٹ کریں گے۔ بٹن کا پس منظر کا رنگ اور بٹن کا بارڈر رداس درج ذیل سیٹنگز کا استعمال کرتے ہوئے:

• مواد کو 'کارٹ میں شامل کریں' پر سیٹ کریں۔
• پس منظر کا رنگ '#cc3366' پر سیٹ کریں
• سرحدی رداس کو 0 پر سیٹ کریں۔

میں نے رقم سلیکٹر کے بارڈر رداس کو 0 میں تبدیل کیا ہے، جو آپ مقدار کے لیے اسٹائل ٹیب میں کر سکتے ہیں۔

ایلیمینٹر پروڈکٹ ٹیبز کو ترتیب دینا

ہر پروڈکٹ کو کچھ بنیادی معلومات دکھانی ہوتی ہیں جیسے پروڈکٹ کی تفصیل اور اگر دستیاب ہو تو جائزے؛ یہ عام طور پر پروڈکٹ ٹیبز کے ذریعے سنبھالا جاتا ہے۔

براہ کرم اوپر والے حصے کے نیچے ایک نئی قطار بنائیں اور اسے داخل کرنے کے لیے Elementor بلڈر سے پروڈکٹ ڈیٹا ٹیبز کے ماڈیول کو قطار میں گھسیٹیں۔ یہاں زیادہ اسٹائلنگ کی ضرورت نہیں ہے کیونکہ اسے ہیلو ایلیمینٹر تھیم سے کچھ اسٹائل ورثے میں ملے ہیں۔ تاہم، آئیے جائزہ جمع کرانے کے بٹن کے انداز میں ترمیم کریں۔

ایسا کرنے کے لیے، ہمیں دوبارہ تھوڑا سا حسب ضرورت CSS کی ضرورت ہوگی۔ پروڈکٹ ڈیٹا ٹیبز میں ترمیم کرنا شروع کریں پھر ایڈوانسڈ ٹیب پر کلک کریں اور حسب ضرورت CSS تک نیچے سکرول کریں۔ ذیل میں سی ایس ایس درج کریں، اور آپ اپنے ڈیزائن کے مطابق رنگوں کو ایڈجسٹ کر سکتے ہیں۔

.woocommerce #review form #reply .form-submit input { background-color: #cc3366; رنگ: #fff؛ سرحدی رداس: 0px؛ }

عنصر پی مصنوعات کی مختصر تفصیل

ٹھیک ہے، تو ہمارے پاس اب تک ایک مہذب، سادہ نظر آنے والا ڈیزائن ہے، لیکن یہ تھوڑا سا کم نظر آتا ہے۔ اوپر والے حصے میں پروڈکٹ شارٹ ڈسکریپشن ماڈیول شامل کرنے سے اس کو ختم کرنے اور مزید سیاق و سباق شامل کرنے میں مدد مل سکتی ہے۔

براہ کرم WooCommerce مختصر تفصیل کا ماڈیول تلاش کریں، پھر اسے پروڈکٹ کی قیمت کے نیچے اور Add to Cart Module کے اوپر گھسیٹیں۔

یہاں ابھی تک کسی اسٹائلنگ کی ضرورت نہیں ہے کیونکہ اسے ہیلو ایلیمینٹر سے وراثت میں سٹائل ملا ہے۔

Elementor اور WooCommerce p roduct اپ سیلز

آپ کی اوسط باسکٹ ویلیو میں اضافہ ہر WooCommerce سائٹ کے لیے بہت ضروری ہے، یہی وجہ ہے کہ Elementor میں ایک پروڈکٹ اپ سیلز ماڈیول شامل ہے تاکہ آپ آسانی سے اپنے اسٹور پر حسب ضرورت مربوط کر سکیں۔

براہ کرم Elementor بلڈر میں پروڈکٹ Upsells ماڈیول تلاش کریں اور اسے پروڈکٹ ڈیٹا ٹیبز کے پیچھے ایک نئی قطار میں داخل کریں۔

جیسا کہ آپ دیکھ سکتے ہیں، اس کے لیے ہمارے باقی انداز کو پورا کرنے کے لیے تھوڑا سا ایڈجسٹمنٹ درکار ہے۔ ماڈیول میں ترمیم کرنا شروع کریں اور درج ذیل تبدیلیاں کریں:

• عنوان کا رنگ - #cc3366 پر سیٹ کریں۔
• سرخی کا رنگ - #cc3366 پر سیٹ کریں۔
• قیمت کا رنگ - #54595f پر سیٹ کریں۔
• بٹن کے پس منظر کا رنگ - #cc3366 پر سیٹ کریں۔
• بٹن کا رنگ - #fff پر سیٹ کریں۔
• بٹن بارڈر کا رداس t0 - 0 سیٹ کریں۔

تیار شدہ مصنوعات اوپر کی طرح نظر آئے گی۔ اگر آپ اس گائیڈ کو اپنے ٹیمپلیٹ کے لیے جمپنگ آف پوائنٹ کے طور پر استعمال کرتے ہیں تو آپ رنگ ہیکس کوڈ کو ایڈجسٹ کر سکتے ہیں جیسا کہ آپ مناسب سمجھتے ہیں۔

ایک بار جب آپ کام کر لیتے ہیں، آپ اپنی ٹیمپلیٹ شائع کرتے ہیں۔ اگلی ونڈو میں، آپ کو سوال نظر آئے گا "آپ اپنی ٹیمپلیٹ کہاں ڈسپلے کرنا چاہتے ہیں؟"۔ اس ٹیمپلیٹ کو کب استعمال کیا جانا چاہیے اس کا تعین کرنے کے لیے "Add Condition" پر کلک کریں۔ آپ اپنے تمام پروڈکٹ کے صفحات پر ٹیمپلیٹ استعمال کرنے کے لیے "تمام مصنوعات" کو منتخب کر سکتے ہیں۔ آپ اس ٹیمپلیٹ کو صرف ان مصنوعات کے لیے استعمال کرنے کا انتخاب بھی کر سکتے ہیں جو کسی مخصوص زمرے میں آتے ہیں یا ان کے ساتھ کوئی خاص ٹیگ وابستہ ہے۔

نتیجہ - عنصر p roduct صفحہ بلڈر

ایلیمینٹر استعمال کرتے وقت کچھ صارفین کو اپنی مرضی کے مطابق ڈیزائن کی ترتیبات حاصل کرنے میں دشواری ہو سکتی ہے، جیسے فونٹ کا رنگ اور نوع ٹائپ۔ آپ کے WooCommerce اسٹور کی ظاہری شکل متاثر ہوسکتی ہے اگر آپ ورڈپریس تھیم استعمال کررہے ہیں جو آپ کے اسٹور کی ظاہری شکل کو کنٹرول کرسکتا ہے۔ اگر آپ کو یہ مسئلہ درپیش ہے، تو ذہن میں رکھیں کہ آپ کا مضمون بعض صورتوں میں آپ کے حسب ضرورت صفحہ کی ترتیبات کو اوور رائیڈ کر سکتا ہے۔

آپ ایک خالی صفحہ بھی منتخب کر سکتے ہیں اور مکمل طور پر حسب ضرورت ظاہری شکل کے لیے پروڈکٹ ویجیٹس کا استعمال کرتے ہوئے زمین سے ایک تخلیق کر سکتے ہیں۔ ایک خالی صفحہ استعمال کریں، ٹیمپلیٹ لائبریری پاپ اپ ونڈو کے ظاہر ہونے پر اسے بند کر دیں اور نئے بنائے گئے صفحہ پر تعمیر شروع کریں۔ حسب ضرورت "کارٹ میں شامل کریں" بٹن، "مصنوعات کی قیمت،" "مصنوعات کی تصویر،" اور "مصنوعات کا عنوان اور تفصیل" صرف چند WooCommerce ویجیٹس ہیں جنہیں آپ اپنے پروڈکٹ کے صفحہ کو حسب ضرورت بنانے کے لیے استعمال کر سکتے ہیں۔ آپ اس صفحہ پر جا کر اس وقت دستیاب تمام مختلف وجیٹس کو دیکھ سکتے ہیں۔ اگر آپ چاہیں تو، آپ صفحہ کے لے آؤٹ پر جہاں چاہیں ویجیٹس کو ترتیب دے سکتے ہیں اور اپنی مطلوبہ شکل سے ملنے کے لیے ان کے انداز کو اپنی مرضی کے مطابق بنا سکتے ہیں۔

اپنے ای کامرس اسٹور کو مقابلے سے ممتاز کرنے اور اپنے کلائنٹس کو ایک منفرد تجربہ فراہم کرنے کے لیے آپ کو اپنے پروڈکٹ کے صفحے میں ترمیم کرنا ہوگی۔ مزید برآں، آپ کے پروڈکٹ کے صفحہ کو جمالیاتی طور پر ذاتی بنانے کا آپشن آپ کے آن لائن اسٹور میں ایک مستقل بصری ڈیزائن کو برقرار رکھنے کے لیے اہم ہے۔ Elementor آپ کے WooCommerce اسٹور کے صفحات کو حسب ضرورت بنانے کے لیے ایک لاجواب ٹول ہے، اور یہ انتہائی تجویز کردہ ہے۔ استعمال میں آسان ہونے کے علاوہ، صفحہ بنانے والے میں حسب ضرورت پروڈکٹ پیجز بنانے میں آپ کی مدد کرنے کے لیے تمام ضروری ویجیٹس اور اسٹائلنگ کے اختیارات شامل ہیں۔ ہم امید کرتے ہیں کہ آپ کو یہ ٹیوٹوریل معلوماتی لگا اور آپ کو وہ معلومات فراہم کیں جو آپ کو Elementor کا استعمال کرتے ہوئے اپنے WooCommerce پروڈکٹ اور پروڈکٹ آرکائیو کے صفحات کو حسب ضرورت بنانے کے لیے درکار ہیں۔ کیا آپ نے ماضی میں WooCommerce صفحات بنانے کے لیے Elementor کا استعمال کیا ہے؟ تبصرے کے سیکشن میں اپنے خیالات کا اشتراک کرنے کے لیے آپ کا استقبال ہے۔ ہمیں ایک نظر ڈال کر خوشی ہوگی۔