শুধু Gutenberg এডিটর দিয়ে WooCommerce সাইট সত্যিকারের 의미ে কাস্টমাইজ করা কঠিন। ফন্ট কম, উইজেট সীমিত এবং এক্সপেরিমেন্ট করার সুযোগ কম। এখানেই Elementor কাজে লাগে। আপনার WooCommerce সাইটের প্রতিটি অংশ কাস্টমাইজ করে কাস্টমারদের সেরা শপিং অভিজ্ঞতা দেওয়া যায়। আপনি জানেন, যত ভালো শপিং অভিজ্ঞতা, তত ভালো কনভার্শন। এই আর্টিকেল WooCommerce-এ Elementor কীভাবে ব্যবহার করবেন সে সম্পর্কে।
WooCommerce স্টোর প্রথমবারের মতো সেটআপ করা ভয়ঙ্কর লাগতে পারে, কিন্তু আসলে খুব সহজ। ওয়ার্ডপ্রেস এবং WooCommerce উভয়ই কন্টেন্ট ক্রিয়েটরদের জন্য ডিজাইন করা, শুধু ডেভেলপারদের জন্য নয়।
Elementorও শুরুতে জটিল লাগতে পারে, কিন্তু এটি আপনার স্টোরে সেই বিশেষ স্পর্শ যোগ করার সম্ভাবনা রাখে।
এই আর্টিকেলে আমরা WooCommerce সাইট সেটআপ, Elementor ইনস্টলেশন এবং একটি চমৎকার WooCommerce সাইট ম্যানেজ করার জন্য অন্যান্য প্লাগইনগুলো নিয়ে আলোচনা করব। এই অতিরিক্ত প্লাগইনগুলোও নেওয়া উচিত, কারণ আপনার স্টোর হিট করলে একটি মেইনটেন্যান্স ক্রু আপনার সাইট রান করাতে সাহায্য করবে।
বেসিক্স দিয়ে শুরু করি। ওয়ার্ডপ্রেস সাইট কীভাবে তৈরি করবেন? আপনার WooCommerce সাইট ইতিমধ্যে সেটআপ থাকলে Elementor বুঝার সেকশনে যান।
ওয়ার্ডপ্রেস সাইট তৈরি করা
সাইট কাস্টমাইজ করার আগে কয়েকটি কোর স্টেপ: হোস্ট বেছে নিন, ডোমেইন তৈরি করুন, ওয়ার্ডপ্রেস ইনস্টল করুন এবং SSL যোগ করুন (Security Socket Layer)। সার দিয়ে ওয়ার্ডপ্রেস সাইট সেটআপের আর্টিকেল আছে। সংক্ষিপ্ত ধাপগুলো:
- হোস্ট বেছে নিন: হোস্ট বেছে নেওয়ার সময় বিবেচনা করুন: আপনার রিকোয়ারমেন্ট কী, হোস্ট থেকে পর্যাপ্ত সাপোর্ট আছে কি, এবং বাজেটে ফিট হচ্ছে কি। অনেক হোস্ট রয়েছে, তাই সময় দিয়ে শপ أرাউন্ড করুন যেটা আপনার প্রয়োজন এবং বাজেটে ফিট হয়। সতর্কতা: সবচেয়ে কম দামের অপশনবে অন্তত ভালো নয়। আপনি যদি দ্রুত শুরু করতে চান, আমরা Cloudways-এ টেস্ট সাইট হোস্ট করি। Cloudways-এ WooCommerce সাইট বানানো অত্যন্ত সহজ এবং WooCommerce প্রি-ইনস্টলড থাকে। হোস্টিং ড্যাশবোর্ডে সাইটের ভালো ইনফো থাকে।
- ডোমেইন রেজিস্টার করুন: ডোমেইন হলো আপনার সাইটের নাম। ডোমেইন বেছে নেওয়ার আগে চিন্তা করুন: আপনার সাইটের লক্ষ্য কী? কী বেচবেন? কারা আপনার বায়ার? এটা মনে রেখে একটি চেনাযোগ্য এবং মনে রাখা সহজ ডোমেইন নাম বেছে নিন।
- ওয়ার্ডপ্রেস ইনস্টল করুন: হোস্ট অনুযায়ী প্রক্রিয়া কিছুটা ভিন্ন হয়। হোস্টের ডকুমেন্টেশন চেক করুন বা সাপোর্টে কনট্যাক্ট করুন। Cloudways-এ নয়া অ্যাপ্লিকেশন তৈরি করার সময় WooCommerce বেছে নিতে হয়। Hostinger-এ ওয়ার্ডপ্রেস বেছে নিলে অটোমেটিক্যালি ইনস্টল হয়।
- SSL যোগ করুন: এটাও হোস্ট অনুযায়ী ভিন্ন। কিছু হোস্ট ফ্রি SSL সার্টিফিকেট দেয় হোস্টিংসহ, অন্যদের জন্য সার্টিফিকেট অথোরিটি ব্যবহার করতে হয়। Cloudways-এ সিকিউরিটি সার্টিফিকেট অটোমেটিক্যালি যোগ হয়। সার্টিফিকেট পাওয়ার পর Really Simple SSL প্লাগইন দিয়ে সহজে সেটআপ করুন।
WooCommerce সাইট সেটআপ
বেসিক ওয়ার্ডপ্রেস সাইট রেডি হলে WooCommerce ইনস্টল এবং সেটআপ করুন। WooCommerce আপনার স্টোর চালায়, প্রোডাক্ট লিস্টিং থেকে কাস্টমার ম্যানেজমেন্ট এবং পেমেন্ট সুবিধা পর্যন্ত।
এই সেকশনে WooCommerce সেটআপের বেসিক্স এবং Elementor দিয়ে পেজ টুইক করার আগে কী কী করা উচিত সেটা বলা হলো। আপনার কৃত্য:
- WooCommerce ইনস্টল করুন: Cloudways ব্যবহার করলে এই স্টেপ স্কিপ করুন। না হলে Plugins → Add New → WooCommerce সার্চ → Install এবং Activate।
- Setup Wizard দিয়ে WooCommerce সেটআপ: Setup Wizard-এ আপনার শপের বেসিক ডিটেইলস, পছন্দের পেমেন্ট অপশন, শিপিং ডিটেইলস এবং অতিরিক্ত অ্যাড-অন যোগ করুন। বিস্তারিতের জন্য আর্টিকেল আছে। সাইডবারের WooCommerce-এ ক্লিক করলেই শুরু হয়।
- Hello Theme ইনস্টল করুন: Hello Theme হলো Elementor-এর একটি ন্যূনতম থিম যা পেজ বিল্ডারের সাথে খুব ভালো কাজ করে। এটা বাধ্যতামূলক নয়, কিন্তু Pro লাইসেন্সের মান পাওয়ার জন্য এটি হেল্প করে। Elementor ইনস্টল না করেও এটি ইনস্টল করা যায়। Appearance → Themes → Add New → Hello সার্চ → Install এবং Activate।
- স্টোর সেটআপ করুন: প্রোডাক্ট, ফটো, ডেসক্রিপশন, প্রাইস, ক্যাটাগরি, প্রাইভেসি পলিসি, রিফান্ড পলিসি ইত্যাদি যোগ করুন। Elementor দিয়ে এডিটিং শুরু করার আগে এটা আপনার ক্যানভাস তৈরি করবে।
এখন পেমেন্ট মেথড যোগ করার পালা।
পেমেন্ট মেথড যোগ করা
পূর্ণ কার্যকর স্টোরের জন্য পরবর্তী চেকলিস্ট আইটেম: পেমেন্ট মেথড যোগ করা। কাস্টমার প্রোডাক্ট পছন্দ করলে আপনি পেমেন্ট পেতে চাইবেন না? পেমেন্ট প্লাগইন এবং গেটওয়ের প্রচুর অপশন রয়েছে। প্রতিটি একে অপরের থেকে ভিন্ন, তাই রিসার্চ করে আপনার স্টোরের জন্য সেরা কী সেটা বের করুন। পেমেন্ট মেথড যোগ করলে কার্ট এবং চেকআউট পেজও সাইটে খুলবে। ধাপগুলো:
- পেমেন্ট মেথড বেছে নিন: ক্যাশ-অন-ডেলিভারি বা পেমেন্ট গেটওয়ে ব্যবহার করুন। কাস্টমার কীভাবে পেমেন্ট করতে পছন্দ করে, ট্রানজ্যাকশন ফি এবং আপনার শপের লোকেশন বিবেচনা করে গেটওয়ে বেছে নিন।
- পেমেন্ট গেটওয়ে ইনস্টল করুন: পছন্দের অপশন বেছে নিয়ে প্লাগইন ইনস্টল করুন এবং একাউন্ট WooCommerce-এ ইন্টিগ্রেট করুন। Stripe এবং PayPal-এ ইন্টিগ্রেশনের আর্টিকেল আছে, যেগুলো বিস্তৃত পেমেন্ট অপশন এবং জিওগ্রাফি কভার করে।
- পেমেন্ট মেথড টেস্ট করুন: পারচেস প্রক্রিয়া পূরণ করুন কাস্টমার অভিজ্ঞতা বুঝতে। ডিফল্ট প্রোডাক্ট, কার্ট এবং চেকআউট পেজ কেমন দেখে সেটাও জানবেন। অনেক পেমেন্ট প্লাগইন টেস্ট বা স্যান্ডবক্স ফিচার দেয় প্রক্রিয়া রিপ্লিকেট করার জন্য।
WooCommerce সাইটে Elementor ইনস্টল করা
আমরা Pro ভার্সন-এ ইনভেস্ট করার পরামর্শ দিচ্ছি কারণ WooCommerce-স্পেসিফিক চমৎকার উইজেটগুলো তখনই আনলক হয়। ধাপগুলো:
- Elementor ইনস্টল এবং এক্টিভেট করুন: ওয়ার্ডপ্রেস ড্যাশবোর্ডে Plugins → Add New → Elementor সার্চ → Install → Activate।
- একাউন্ট তৈরি করুন: একাউন্ট তৈরি এবং প্ল্যান বেছে নেওয়ার পেজে রিডাইরেক্ট হবেন। ৩টি লাইসেন্স এবং একটি ফ্রি ভার্সন রয়েছে। পার্থক্য később বলা হয়েছে। হয়ে গেলে WP ড্যাশবোর্ডে ফিরে যান।
Elementor Page Editor বোঝা
Elementor একটি ডিজাইন পাওয়ারহাউজ, সহজ ড্র্যাগ-এন্ড-ড্রপ ইন্টারফেস দিয়ে কাস্টম পেজ তৈরি করতে দেয়। অপশনগুলো শুরুতে বিভ্রান্তিকর লাগতে পারে, কিন্তু চিন্তা নয়েন, একটু টুইক করলেই অভ্যাস হয়ে যাবে। ব্যাকআপ থাকলে সরাসরি ঘুরে বেড়ানো Elementor শিখার সেরা উপায়।
এই সেকশন পেজ এডিটরের লেআউট জানতে হেল্প করবে।
- এডিট করার জন্য পেজ খুলুন: সাইড মেনুর Pages → All Pages → যেকোনো পেজে হোভার করে Edit → Edit with Elementor ক্লিক করুন। Elementor পেজ এডিটর খুলবে।
একটা স্ক্রিনশট:
আপনার স্টোরে কিছু ক্রিটিক্যাল পেজ রয়েছে যা সরাসরি কাস্টমারের শপিং অভিজ্ঞতায় অবদান রাখে। কিছু পেজে শর্টকোড থাকে:
woocommerce_checkout
এটি গুরুত্বপূর্ণ। এটি মুছবেন না যতক্ষণ না Elementor Pro-এর WooCommerce উইজেট ব্যবহার করেন। কিন্তু এই শর্টকোডের আগে বা পরে ইমেজ বা টেক্সট যোগ করতে পারেন।
এখন পেজ এডিট করা যাক।
- সেকশন যোগ করুন: পেজের বিভিন্ন অংশে হোভার করলে নীল বক্স আসবে, সেটি একটি সেকশন। সেকশনের মাঝপথে ৬-ডট সিম্বল ক্লিক করলে এডিট হবে। ডটেড লাইন বক্সে + ক্লিক করলে নতুন সেকশন তৈরি হবে।
- কলাম সিলেক্ট করুন: প্রতিটি সেকশন কলামে ভাগ থাকে। সেকশনের ওপর হোভার করলে কন্টেন্ট ব্লকগুলো নীল বক্সে হাইলাইট হবে। কলামে আসল এলিমেন্টগুলো থাকে যেগুলো আলাদাভাবে কাস্টমাইজযোগ্য। কলামের লেআউট বেছে নিন। এখন ড্র্যাগ-এন্ড-ড্রপ করুন।
- এলিমেন্ট যোগ করুন: বামে এলিমেন্ট লাইব্রেরি রয়েছে, ক্যাটাগরিতে ভাগ (Site, WooCommerce)। কলামে ড্র্যাগ-ড্রপ করুন। সাইডবারে ক্লিক করলে সেই এলিমেন্টের কাস্টমাইজেশন অপশন আসবে। টেক্সট এডিট করলে লेफটে টেক্সট এডিটর দেখাবে।
- পরিবর্তন প্রিভিউ করুন: সাইডবারের নিচে আই বাটনে ক্লিক করলে পরিবর্তন প্রিভিউ হবে।
- রেসপন্সিভ মোড চেক করুন: নিচে রেসপন্সিভ মোড লোগোতে ক্লিক করলে মোবাইল, ডেস্কটপ এবং অন্যান্য স্ক্রিন সাইজে প্রিভিউ দেখতে পারবেন।
- পাবলিশ/আপডেট করুন: শেষে বাম নিচের বাটনে ক্লিক করে ড্রাফ্ট সেভ, আপডেট বা পাবলিশ করুন।
পেজ এডিটরের লেআউট বুঝলে কিছু বেসিক উইজেটের ব্যাখ্যা:
টেক্সট এডিট করা
- Headline বা Text Editor এলিমেন্ট ড্র্যাগ-ড্রপ করুন: সেকশন যোগ করে কলাম সংখ্যা বেছে নিন। সাইডবার থেকে Headline বা Text Editor ড্র্যাগ-ড্রপ করুন। পেজে "Add Text Here" আসবে।
- সঠিক টেক্সট লিখুন: সকল টেক্সট সিলেক্ট করে আপনার কপি দিয়ে রিপ্লেস করুন।
- টেক্সট কাস্টমাইজ করুন: টেক্সট সিলেক্ট করে সাইডবারের Style ক্লিক করুন। কালার বারের থেকে রঙ বদলান। Typography-এর পেনসিল আইকনে ক্লিক করে ফন্ট বদলান। স্ট্রোক টাইপ, শ্যাডো বা অ্যালাইনমেন্টও পরিবর্তন করা যায়।
ইমেজ যোগ করা
- Image এলিমেন্ট ড্র্যাগ-ড্রপ করুন: প্রয়োজনে সেকশন যোগ করুন, কলাম সিলেক্ট করুন, Image এলিমেন্ট ড্র্যাগ-ড্রপ করুন।
- ইমেজ যোগ করুন: ইমেজের টপ-রাইট কোণে পেনসিল লোগোতে ক্লিক করুন। সাইডবারে ইমেজের ওপর হোভার করে Choose Image ক্লিক করুন। ডিফল্ট ইমেজ রিপ্লেস করুন।
- ইমেজ এডিট করুন: সাইজ বা অ্যালাইনমেন্ট বদলান, ক্যাপশন যোগ করুন, বা মিডিয়া ফাইল/URL-এ লিংক করুন।
বাটন যোগ করা
- Button এলিমেন্ট ড্র্যাগ-ড্রপ করুন: কলাম থাকলে বাটন এলিমেন্ট ড্র্যাগ-ড্রপ করুন।
- বাটন কাস্টমাইজ করুন: বাটন টাইপ, টেক্সট, অ্যালাইনমেন্ট, রঙ, সাইজ পরিবর্তন করুন। লিংক বা অ্যাকশন যোগ করুন।
বেসিক্স শিখলে একটা টিপ्स যেটা অনেক কাজ কমিয়ে দেবে:
Site Settings তৈরি করুন
পেজ এডিটরের টপ-লেফটের হ্যামবার্গার আইকনে ক্লিক করে Site Settings-এ যান। কালার থিম, গ্লোবাল ফন্ট, হেডার, ফুটার, বাটনের টেমপ্লেট সেট করুন। একবার সাইটের ডিজাইন ফাইনাল হলে নতুন পেজ তৈরি করার সময় এটি অনেক সময় বাঁচাবে।
এই বেসিক্স জানলে Elementor-এর কন্ট্রোল বুঝতে পারবেন। এখন এই নতুন ক্ষমতাকে সঠিক কাজে লাগান।
Elementor Pro দিয়ে WooCommerce ব্যবহার
Elementor Pro লাইসেন্স लेकर WooCommerce সাইট পেজ তৈরি করতে চাইলে এই সেকশন আপনাকে বলবে কোন উইজেট কোন পেজে ব্যবহার করবেন।
Elementor দিয়ে WooCommerce প্রোডাক্ট পেজ এডিট করা
এটি वो পেজ যেখানে কাস্টমার প্রোডাক্ট সম্পর্কে জানেন। সিঙ্গেল প্রোডাক্ট পেজ এডিট করার ধাপ:
- Product Page এডিট করুন: Elementor-এর এক্সিস্টিং টেমপ্লেট এডিট করুন বা স্ক্র্যাচ থেকে তৈরি করুন। টেমপ্লেট এডিট করা সহজ যদি না জানেন কোন উইজেট কোথায় যাবে। এক্সিস্টিং উইজেটগুলো এডিট করুন।
- উইজেট দিয়ে কাস্টমাইজ করুন: স্ক্র্যাচ থেকে শুরু করতে চাইলে নিচের উইজেটগুলো যোগ করুন:
- Product Title: প্রোডাক্টের টাইটেল ধারণ করে। সাইডবারে এডিটযোগ্য।
- Product Image: সাইডবারে ইমেজ সাইজ এডিট করুন। ইমেজ সিলেক্ট করুন এবং ডানপাশের সেটিংস এক্সপ্লোর করুন।
- Product Rating: কাস্টমারদের জন্য খুব হেল্পফুল। অন্যদের ইমপ্রেশন দেখতে পান।
- Short Description: প্রোডাক্ট যোগ করার সময় দেওয়া ডেসক্রিপশনটি যোগ করে।
- Product Price: প্রাইস যোগ করে। প্রাইস প্রোডাক্ট যোগ করার সময় সেট হয়, তাই এখানে অটোমেটিক্যালি পপুলেট হয়।
- Add to Cart: প্রোডাক্ট কার্টে যোগ করার বাটন। সাইডবারে রঙ, টেক্সট, সাইজ বদলান।
- Woo Breadcrumbs: প্রোডাক্ট ক্যাটাগরি দেখায়। উদাহরণ: Home/Men's Fashion/Shoes/Black Leather Shoes।
- Product Related: ই-কমার্স সাইটে দেখা "Related Products" সেকশন। Products Related Widget ড্র্যাগ-ড্রপ করুন।
- Upsells Widget: "You may also like" সেকশন চালায়।
প্রতিটি উইজেট ফন্ট, রঙ, অ্যালাইনমেন্ট, পজিশন ইত্যাদি কাস্টমাইজযোগ্য।
- পরিবর্তন রিভিউ করুন: রেসপন্সিভ মোডে ক্লিক করে বিভিন্ন ডিভাইসে পেজ কেমন দেখে চেক করুন।
- পাবলিশ বা আপডেট: সব ঠিক থাকলে পাবলিশ বা আপডেট করুন।
প্রোডাক্ট পেজ এডিট করার সময় সুপারিশ:
- প্রোডাক্টের জন্য হাই-কোয়ালিটি ইমেজ ব্যবহার করুন
- চমৎকার প্রোডাক্ট ডেসক্রিপশন লিখুন
- প্রোডাক্টের জন্য বর্ণনামূলক এবং অর্থপূর্ণ নাম বেছে নিন
Elementor দিয়ে WooCommerce শপ পেজ এডিট করা
একেক আর্কাইভ পেজ নামেও ডাকা হয়, যেখানে কাস্টমার সব প্রোডাক্ট দেখেন। লক্ষ্য: কাস্টমার সহজে কাঙ্ক্ষিত প্রোডাক্ট খুঁজে পান।
- টেমপ্লেট এডিট বা নতুন পেজ তৈরি: পরবর্তী সেকশনে নতুন টেমপ্লেট তৈরি আলোচনা করা হলো। এক্সিস্টিং টেমপ্লেট ব্যবহার করুন বা স্ক্র্যাচ থেকে শুরু করুন। স্ক্র্যাচ থেকে চাইলে Pages → Add New → নিচের উইজেটগুলো যোগ করুন:
- উইজেট যোগ করে কাস্টমাইজ করুন: চমৎকার শপিং অভিজ্ঞতার জন্য রিকমেন্ডেড উইজেটগুলো:
- Product Categories: ক্যাটাগরির মাধ্যমে প্রোডাক্ট ফিল্টার করতে হেল্প করে।
- Menu Cart: মেনুতে কার্ট লোগো যোগ করে, কাস্টমার কী কী কার্টে যোগ করেছে সেটা দেখতে দেয়।
- Products: স্টোরে যোগ করা সব প্রোডাক্ট ডিসপ্লে করে।
- Archive Product: ডিফল্ট, জনপ্রিয়তা, লেটেস্ট বা প্রাইস দিয়ে সর্ট করার সুযোগ দেয়।
- Custom Add to Cart: Add to Cart বাটন কাস্টমাইজ করুন। টেক্সট, রঙ বা সাইজ বদলান।
- WooCommerce Breadcrumbs: সকল ক্যাটাগরি এবং আর্কাইভে একটি প্রোডাক্ট কোথায় ফিট হয় সেটা দেখায়। হোমপেজ থেকে করেন্ট পেজ পর্যন্ত পথ।
- Archive Title and Description: টাইটেল এবং ডেসক্রিপশন যোগ করুন, সাইডবারের সেটিংস থেকে এডিট করুন।
- পেজ রিভিউ করুন: এডিটিং শেষে বিভিন্ন ডিভাইসে লুক চেক করুন। খুশি হলে Publish ক্লিক করুন।
Elementor দিয়ে WooCommerce কার্ট পেজ এডিট করা
চেকআউট পেজের পর সера গুরুত্বপূর্ণ, একটি ভালো ডিজাইন করা কার্ট পেজ সেল ব্রেক বা মেক করতে পারে। এই পেজ ডিজাইন করার সময় রিসার্চ করুন কাস্টমার পেমেন্টের আগে সিলেকশন রিভিউ করার সময় কী কী দেখতে চায়। জনপ্রিয় ই-কমার্স সাইট চেক করে ডিজাইন টুইক করুন।
Elementor Cart Widget দিয়ে কার্ট পেজ ফুলি কাস্টমাইজ করা যায়। ধাপগুলো:
- এক্সিস্টিং কার্ট পেজ এডিট করুন: Pages → All Pages → Cart page-এ হোভার করে Edit → Edit with Elementor।
- শর্টকোডকে উইজেট দিয়ে রিপ্লেস করুন: শর্টকোড হলো পেজে ফিচার যোগ করার কোড। Cart Widget ব্যবহার করলে শর্টকোড লাগে না, তাই মুছে সাইডবারের উইজেট যোগ করুন।
- পেজ কাস্টমাইজ করুন: সাইডবার চেক করে সেটিংস এক্সপ্লোর করুন। নিচের জিনিসগুলো ট্রাই করুন:
- General: প্রতিটি সেকশনে কলামের সংখ্যা বেছে নিন, নির্দিষ্ট কলাম স্টিকি করুন।
- Order Summary: Update Cart বাটন চাইলে বদলান।
- Totals: কার্ট টোটাল সেকশনের লেবেল, অ্যালাইনমেন্ট ইত্যাদি কাস্টমাইজ করুন, Proceed to Checkout বাটন সহ।
- Additional Options: কার্ট অটোমেটিক্যালি আপডেট হবে কিনা টগল করুন।
Style ট্যাবে ক্লিক করলে আরও কাস্টমাইজেশন:
- Sections: বিভিন্ন সেকশনের স্টাইল কন্ট্রোল করুন—ড্রপ শ্যাডো বা ব্যাকগ্রাউন্ড কালার।
- Typography: সকল টেক্সট আপনার সাইটের এস্থেটিক্স অনুযায়ী বদলান।
- Buttons: রঙ, টেক্সট, সাইজ ইত্যাদি পরিবর্তন করুন।
- Order Summary: অর্ডার সামারি কেমন দেখবে কাস্টমাইজ করুন।
- Totals: Cart Total সেকশন এডিট করুন।
- Checkout Button: চেকআউট বাটনের রঙ, সাইজ, টেক্সট এবং অ্যালাইনমেন্ট কাস্টমাইজ করুন।
- মোবাইল ভিউতে রিভিউ করুন: শেষে মোবাইল ভিউতে পেজ চেক করুন। ভালো লাগলে Publish ক্লিক করুন।
Elementor দিয়ে WooCommerce চেকআউট পেজ এডিট করা
এটি আপনার ই-কমার্স সাইটের সবচেয়ে গুরুত্বপূর্ণ পেজ। কাস্টমার যা শেষে দেখে, এবং কেনার সিদ্ধান্ত নেয়। চেকআউট পেজে সবচেয়ে বেশি ড্রপ-অফ রেট, তাই এটি যত সম্ভব ঘর্ষণহীন রাখা জরুরি।
Elementor Pro-র Checkout Widget চেকআউট পেজ এডিট করা খুব সহজ করে দেয়। এটি Cart এবং My Account Widget-এর সাথে কাজ করে এক্সিস্টিং চেকআউট পেজ এডিট করতে। উইজেট দিয়ে আপনি চেকআউট পেজের ডিজাইন চেঞ্জ করতে পারবেন: টেক্সট কালার, অ্যালাইনমেন্ট, সেকশন এবং আরও অনেক কিছু।
- Elementor এডিটরে চেকআউট পেজ খুলুন: Pages → All Pages → Checkout Page হোভার করে Edit → টপে Edit with Elementor ক্লিক করুন। এক সেকেন্ডে Elementor এডিটরে খুলবে।
- Checkout শর্টকোডকে Checkout Widget দিয়ে রিপ্লেস করুন: শর্টকোডটি WooCommerce-এর চেকআউট ফিল্ড পেজে যোগ করার পদ্ধতি। আকারে:
woocommerce_checkout
বদলে বামের লাইব্রেরি থেকে checkout widget যোগ করুন। চেকআউট পেজ কেমন দেখে সেটা প্রিভিউ দেখাবে।নোট: চেকআউট পেজ এডিট করছেন, তাই কার্টে কয়েকটা প্রোডাক্ট যোগ করে চেকআউট বাটনে ক্লিক করুন। প্রোডাক্ট থাকা অবস্থায় পেজ কেমন দেখে সেটা দেখতে পাবেন। - পেজ কাস্টমাইজ করুন: সাইডবারের Elementor Checkout Widget-এর অনেক সেটিংস এক্সপ্লোর করুন। পরিবর্তনযোগ্য সেটিংস:
- General: এক বা দুটি কলাম লেআউট, একটি কলাম স্টিকি, হেডার কলামকে ডিসরাপ্ট না করে অফসেট যোগ করুন।
- বিলিং বা শিপিং ফর্ম পরিবর্তন: প্রতিটি ফর্মের হেডার, প্লেসহোল্ডার এবং ফিল্ড এডিট করুন।
- অতিরিক্ত তথ্য: কাস্টমার অর্ডার সম্পর্কে নির্দেশ বা তথ্য যোগ করতে পারেন এমন সেকশন।
- কুপন সেটিংস: কুপনগুলোর অ্যালাইনমেন্ট এবং টাইপোগ্রাফি কাস্টমাইজ করুন।
- Payment: পেমেন্ট বাটনের সব দিক কাস্টমাইজ করুন; অ্যালাইনমেন্ট এবং রঙ উদাহরণ।
Style ক্লিক করে আরও কাস্টমাইজেশন:
- Purchase Button: কাস্টমার যা ক্লিক করবে পেমেন্টের জন্য, সেটার রঙ, টেক্সট, স্পেসিং ইত্যাদি বদলান।
- Order Summary: অর্ডার করা প্রোডাক্ট লিস্টের টাইপোগ্রাফি এবং স্পেসিং বেছে নিন।
- Typography: ফর্ম ছাড়া সব টেক্সট কাস্টমাইজ করুন।
- Forms: ফর্মের টাইপোগ্রাফি এবং রঙ কাস্টমাইজ করুন। Rows Gap সেটিংস দিয়ে স্পেসিং বাড়ান।
- মোবাইল ভিউতে রিভিউ করুন: মোবাইল ভিউটেও সাইট ভালো দেখে তা নিশ্চিত করুন।
চেকআউট পেজ এডিট করার সময় সুপারিশ:
- পর্যাপ্ত পেমেন্ট অপশন রাখুন
- অপ্রয়োজনীয় ফিল্ড সরান
- সব চেকআউট ইনফো একই পেজে রাখুন
Elementor দিয়ে টেমপ্লেট বিল্ড করা
Elementor-এ কাস্টম টেমপ্লেট বানানো যায় যা আপনার ব্র্যান্ডের সাথে মিলে। হেডার এবং ফুটার কাস্টমাইজ করে সাইটের প্রতিটি পেজে ব্র্যান্ডিং দেখাতে পারেন। এই সেকশনে হেডারের জন্য কাস্টম টেমপ্লেট বানাবো। ধাপগুলো:
- নতুন টেমপ্লেট তৈরি করুন: Global Header элемен্টটি সাইটের প্রতিটি পেজে দেখা যায়। টেমপ্লেট बनाने Elementor → Theme Builder → Add New Template ক্লিক করুন।
- সঠিক টেমপ্লেট টাইপ বেছে নিন: হেডার বানাতে চাইলে টেমপ্লেট টাইপ ড্রপডাউনে Header বেছে নিন। সহজে চেনার জন্য অর্থবহ নাম দিন। Create Template ক্লিক করুন।
- টেমপ্লেট লাইব্রেরি ব্রাউজ করুন: প্রি-ডিফাইনড টেমপ্লেটগুলো থেকে পছন্দেরটি বেছে নিন এবং Insert ক্লিক করুন। প্রতিটি টেমপ্লেট ফুলি কাস্টমাইজেবল, তাই আপনার চাইতে সবচেয়ে কাছেরটি বেছে নিন।
- টেমপ্লেট এডিট এবং কাস্টমাইজ করুন: এডিটর দিয়ে আপনার স্বপ্নের টেমপ্লেট বানান। রঙ, ইমেজ, ফন্ট দিয়ে এক্সপেরিমেন্ট করুন।
- টেমপ্লেট পাবলিশ করুন: টুইকিং শেষে সাইডবারের নিচে Publish ক্লিক করুন। টেমপ্লেট কোথায় দেখাবে সেটা ড্রপডাউন থেকে বেছে নিন। Save and Close ক্লিক করুন। এডিটরে ফিরে যাবেন কিন্তু নতুন টেমপ্লেট লাইভ হবে।
- রিভিউ করুন: পপ-আপের Have a Look ক্লিক করলে প্রিভিউ পেজে যাবে। ইচ্ছামতো পরিবর্তন করুন।
Elementor দিয়ে ই-কমার্স পপ-আপ বানানো
পপ-আপ যোগ করতে চাইলে ধাপগুলো:
- পপ-আপ টেমপ্লেট তৈরি করুন: সাইডবারে Template → Popups → Add New। নাম দিয়ে Create Template ক্লিক করুন।
- পপ-আপ তৈরি করুন: স্ক্র্যাচ থেকে বা Elementor টেমপ্লেট এডিট করে। রঙ, টেক্সট ইত্যাদি সেট করুন।
- পপ-আপ পাবলিশ করুন: এটা মূলত পপ-আপকে টেমপ্লেট হিসেবে সেভ করে যা পরে লিংক করা যাবে। Publish → Save and Close।
- পেজ এডিট করুন: Pages → All Pages → পছন্দের পেজ সিলেক্ট করে Edit with Elementor।
- বাটন যোগ করুন: পেজ এডিটর খুললে সাইডবার থেকে Button Widget ড্র্যাগ-ড্রপ করুন। পছন্দের টেক্সট এবং রঙ দিন।
- পপ-আপে লিংক করুন: সাইডবারের Layout-এ Link, Dynamic, Actions এবং Popup বেছে নিন। Open Popup ক্লিক করে তৈরি করা পপ-আপ সিলেক্ট করুন।
- রিভিউ করুন: বাটনের ফাংশনিং চেক করুন। রেডি হলে Update ক্লিক করুন।
Elementor বনাম Elementor Pro: কখন সওইচ করবেন?
Elementor-এর ফ্রি ভার্সনে বেসিক পেজ ডিজাইন করার টুলস রয়েছে, ব্লগের জন্য ভালো। কিন্তু WooCommerce সাইট ডিজাইন করতে Elementor Pro লাইসেন্স কেনা ভালো। WooCommerce-র জন্য স্পেশালি ডিজাইন করা অনেক উইজেট এবং এলিমেন্ট রয়েছে Pro-তে।
কিছু চমৎকার উইজেট যেন আপনাকে অবশ্যই ট্রাই করা উচিত:
- Product Category: কাস্টমার প্রোডাক্ট ক্যাটাগরির মাধ্যমে সর্ট করতে পারে। খুঁজে পাওয়া এবং কেনা অনেক সহজ হয়।
- Add to Cart: বাটন আপনার ব্র্যান্ড অনুযায়ী কাস্টমাইজ করা সুপার ইজি। রঙ, বর্ডার, ফন্ট ইত্যাদি বদলান।
- Product Upsell Widget: Amazon-এ Related Products সেকশন দেখেছেন? একই জিনিস। বর্তমান প্রোডাক্টের ভিত্তিতে কাস্টমার যেসব প্রোডাক্টে আগ্রহী হতে পারে সেগুলো দেখান।
- Empty Cart Message: কার্ট খালি থাকলে চেকআউট করলে আকর্ষণীয় মেসেজ দেখান। এটা কাস্টমারকে আবার প্রোডাক্ট লিস্টিং-এ ফিরে যেতে উৎসাহিত করে।
- Product Rating: সোশ্যাল প্রুফ শক্তিশালী মোটিভেটর, প্রোডাক্ট এবং সাইটে ট্রাস্ট বিল্ড করে। প্রয়োজনে আগের কাস্টমারদের রিভিউ রিকোয়েস্ট করুন।
- Product Review: নতুন কাস্টমারদের জন্য প্রোডাক্টের বিশ্বাসযোগ্যতা বাড়ায়।
Elementor-এর সুবিধা এবং অসুবিধা
Elementor একমাত্র পেজ বিল্ডার নয়, অনেক ডেভেলপার বা ডিজাইনারের নিজস্ব পছন্দ রয়েছে। আমরা Elementor পছন্দ করি কারণ এটি সব জায়গায় পাওয়া যায় এবং সহজে ব্যবহারযোগ্য, কিন্তু আপনার প্রয়োজন ভিন্ন হয়তে পারে। পেজ বিল্ডার বেছে নেওয়ার মূল বিবেচনাগুলো প্রস-কন্সে ভাগ করে দেওয়া হলো। যদি কোনো জরুরি ফিচার কন্স লিস্টে থাকে, তবে অ্যাল্টারনেটিভ পেজ বিল্ডার খুঁজুন।
সুবিধা (Pros)
- ব্যবহার সহজ: ড্র্যাগ-এন্ড-ড্রপ ফাংশনালিটি সুপার ইজি। কোনো কোডিং বা অন্য প্লাগইন ছাড়া আপনি সত্যিকারের 의미ে পেজ কাস্টমাইজ করতে পারেন।
- মানের মূল্য: Pro ভার্সনে ২৪টি WooCommerce-স্পেসিফিক এলিমেন্ট রয়েছে। সেগুলো শপিং প্রক্রিয়ার মূল অংশ এবং কাস্টমার অভিজ্ঞতা উন্নত করার জন্য ডিজাইন করা।
- বিল্ট-ইন রেসপন্সিভ ডিজাইন: Gutenberg-এ প্রিভিউ দেখতে নতুন ট্যাব খুলতে হয়, কিন্তু Elementor-এ What you see is what you get। ভিউ চেঞ্জ করলেও এডিট করতে পারবেন।
অসুবিধা (Cons)
- খরচ: ফ্রি ভার্সন বেসিক সাইট কাস্টমাইজ করতে হেল্প করে, কিন্তু আসল ম্যাজিক Pro-তে। ৩টি প্ল্যান রয়েছে যা سالানা $49 থেকে $999 পর্যন্ত।
- গ্লিচি আপডেট এবং পর্যাপ্ত সাপোর্ট নয়: গত সালে গ্লিচি আপডেট এবং সাইট মালিকদের সাহায্য করার জন্য পর্যাপ্ত সাপোর্ট নেই এমন অভিযোগ রয়েছে।
- WooCommerce-এ সমস্যা: কখনো কখনো Elementor WooCommerce সাইটে কাজ বন্ধ করে দেয়। পরে সেটা ফিক্স করার সেকশন আছে।
Elementor WooCommerce-এ কাজ না করলে কী করবেন? ফিক্স করা
এটি খাস করে হয় যদি Elementor ইনস্টল করার পর WooCommerce ইনস্টল করেন। ফিক্স করার কিছু উপায়:
- Elementor, WordPress এবং WooCommerce ভার্সন আপডেট করুন: সকল প্লাগইন এবং PHP আপ টু ডেট আছে কিনা চেক করুন। প্লাগইন সফলি আপডেট করার আর্টিকেল আছে।
- Switch Editor Loader Method অন করুন: Elementor → Settings → Advanced ট্যাব → Switch Editor Loader Method চেকবক্স অন করুন।
- ক্যাশ ক্লিয়ার করুন: ক্যাশ প্লাগইন থাকলে ক্লিয়ার করুন। অথবা ক্যাশিং প্লাগইন অস্থায়ীভাবে ডিজেবল করুন, ক্যাশিং ইস্যু বাইপাস হবে।
- অন্য প্লাগইন Elementor-এ বাধা দিচ্ছে কিনা চেক করুন: সব প্লাগইন ডিজেবল করে দেখুন Elementor লোড হচ্ছে কিনা। হলে সব প্লাগইন রি-এক্টিভেট করে একটা একটা ডিজেবল করুন যতক্ষণ না Elementor আবার কাজ করতে শুরু করে। তখন বুঝতে পারবেন কোন প্লাগইন সমস্যা তৈরি করছে। সেটা ডিজেবল রাখুন বা পুরনো ভার্সনে রোল ব্যাক করুন।
WooCommerce সাইটের জন্য রিকমেন্ডেড প্লাগইন
- BlogVault: আপনার WooCommerce স্টোরের প্রতিটি অর্ডার, পারচেজ, কাস্টমার এবং ট্রানজ্যাকশন BlogVault-এর রিয়েল-টাইম ব্যাকআপ দিয়ে সুরক্ষিত করুন। ফুলি অটোমেটেড, প্রতি ৫ মিনিটে সিঙ্ক হয় এবং অফসাইটে স্টোর হয় আরও সুরক্ষার জন্য।
- MalCare: এই বেস্ট-ইন-ক্লাস ওয়ার্ডপ্রেস সিকিউরিটি প্লাগইন হ্যাকার এবং তাদের ম্যালওয়্যার থেকে সাইট রক্ষা করতে কাফি। ম্যালওয়্যার স্ক্যান এবং ক্লিন করুন মাত্র কিছু ক্লিকে, এবং অ্যাডভান্সড ফায়ারওয়াল দিয়ে ম্যালওয়্যার এন্ট্রি ব্লক করুন। MalCare দিয়ে কাস্টমার ডিটেইলস হ্যাকারদের হাতে পড়া থেকে বাঁচান।
- Google Analytics: ট্রাফিক বিশ্লেষণ এবং কাস্টমার বুঝার জি-ও-জি টুল। WooCommerce-এ Google Analytics ইন্টিগ্রেশনের আর্টিকেল আছে।
- YITH WooCommerce Order Tracking: শিপিং ইনফো সহজে ম্যানেজ করতে হেল্প করে, কাস্টমাররা পারচেজ ট্র্যাক করতে পারে।
- YITH Advanced Refund System for WooCommerce: রিফান্ড সিস্টেম সেটআপ করতে হেল্প করে।
শেষ কথা
পেজ বিল্ডারে ইনভেস্ট করার জন্য রেডি থাকলে Elementor চমৎকার অপশন। কিন্তু পরিবর্তন করার আগে BlogVault দিয়ে সাইট ব্যাকআপ নিন। এটি মিশ্যাপ থেকে সাইট রক্ষা করার এবং কিছু ভয়াবহ হলে ইনসুরেন্স হিসেবে কাজ করে।
FAQ
WooCommerce সাইটের জন্য Elementor কতটা ভালো?
Elementor WooCommerce সাইটের জন্য চমৎকার কারণ এতে অনেক এলিমেন্ট রয়েছে যা কাস্টমাইজ করা যায়, বিশেষ করে কাস্টমার যাত্রা উন্নত করার জন্য। Elementor Pro-র সাথে আপনার হাই-ফাংশনিং WooCommerce সাইট বানাতে অন্য প্লাগইন লাগবে না।
Elementor কি সেরা পেজ বিল্ডার?
Elementor অন্যদের seperti SeedProd এবং WPBakery-এর মধ্যে সেরা পেজ বিল্ডার প্লাগইনগুলোর একটি। সহজ, অত্যন্ত কাস্টমাইজেবল এবং খরচের মূল্য পূর্ণ।
WooCommerce-এর জন্য সেরা অ্যাড-অনগুলো কী?
WooCommerce সাইটের জন্য কিছু এসেনশিয়াল অ্যাড-অন: BlogVault ব্যাকআপের জন্য, MalCare সিকিউরিটির জন্য, YITH WooCommerce Order Tracking, এবং YITH Advanced Refund System for WooCommerce।
WooCommerce-এ Elementor কীভাবে যোগ করবেন?
আপনার ওয়ার্ডপ্রেস অ্যাডমিনের প্লাগইন ডিরেক্টরি থেকে Elementor ইনস্টল করুন। এক্টিভেট করুন এবং Pro ভার্সন ব্যবহার করলে লাইসেন্স কী যোগ করুন। আপনি আপনার পছন্দের সাইট বানাতে প্রস্তুত।
Elementor-এ WooCommerce ফ্রি?
WooCommerce ফ্রি। Elementor-এ ফ্রি এবং পেইড ভার্সন দুটোই আছে। কিন্তু WooCommerce-এর জন্য Elementor-এর পেইড ভার্সন কেনা ভালো।
Elementor দিয়ে WooCommerce এডিট করা যায়?
হ্যাঁ, Elementor দিয়ে WooCommerce সাইট সহজে এডিট করা যায়। আপনার WooCommerce সাইটের প্রতিটি ইঞ্চি Elementor দিয়ে এডিট করা যায়। শুধু ইনস্টল, এক্টিভেট এবং কাস্টমাইজেশন শুরু করুন।
WooCommerce-এ Elementor কী?
Elementor ওয়ার্ডপ্রেস এবং WooCommerce সাইটের জন্য একটি পেজ বিল্ডার প্লাগইন। ফ্রি এবং পেইড ভার্সন অফার করে। ইনস্টল করলে ড্র্যাগ, ড্রপ এবং কাস্টমাইজ করার জন্য রেইঞ্জে এলিমেন্ট পাওয়া যায়।
