Floating Checkout: WooCommerce-এ ভাসমান কার্ট আর পপআপ চেকআউট

ফেসবুকের বিজ্ঞাপন থেকে আসা কাস্টমার ফোনে কার্টে যোগ করেন, তারপর কার্ট পেজ, তারপর লম্বা চেকআউট পেজ। ধীর নেটে প্রতিটা নতুন পেজ একেকটা সুযোগ, অর্ডার না করে চলে যাওয়ার। Floating Checkout কাস্টমারকে যে পেজে আছেন সেখানেই রাখে। তবু অর্ডারটা যায় আপনার আসল WooCommerce চেকআউট দিয়েই, তাই ডেলিভারি চার্জ, পেমেন্ট মেথড আর নিশ্চিতের সব চেক আগের মতোই চলে।

যা লাগবে: WooCommerce → Settings → Payments-এ অন্তত একটা পেমেন্ট মেথড চালু (সাধারণত ক্যাশ অন ডেলিভারি), আর ডেলিভারি চার্জ WooCommerce-এর শিপিং জোন বা রেটে বসানো। ফর্ম চার্জ নিজে বানায় না, ওখান থেকেই পড়ে।

ভাসমান কার্ট বাটন: প্রতিটা পেজের নিচে ডানে (বা বামে) একটা গোল কার্ট বাটন, উপরে কার্টে কয়টা পণ্য আছে তার সংখ্যা। কাস্টমার কার্টে কিছু যোগ করলে পাশের কার্ট নিজে থেকেই খুলে যায়। WhatsApp Order-এর নিচের বার বা গোল WhatsApp বাটন থাকলে কার্ট বাটন নিজে থেকে তার উপরে সরে বসে।

পাশের কার্ট: বাটনে চাপলে ডান পাশ থেকে কার্ট খোলে। প্রতিটা পণ্যের ছবি, নাম, সাইজ-রং আর দাম, পাশে পরিমাণ কমানো-বাড়ানোর বাটন আর “মুছুন”। ভুল করে মুছলে “ফিরিয়ে আনুন” চেপে ফেরানো যায়। স্টকের চেয়ে বেশি বা একটাই বিক্রি হয় এমন পণ্যে বেশি নেওয়া যায় না। নিচে পণ্যের দাম, তারপর দুটো বাটন: অর্ডার করুন আর কার্ট পেজ দেখুন।

পপআপ চেকআউট: “অর্ডার করুন” চাপলে পেজের উপরেই নিচ থেকে ফর্ম ওঠে। উপরে কী কী অর্ডার হচ্ছে, তারপর চারটা ঘর: আপনার নাম, মোবাইল নম্বর, সম্পূর্ণ ঠিকানা আর ডেলিভারি এলাকা (ঢাকার ভিতরে বা বাইরে)। ইমেইল কখনো চাওয়া হয় না, অ্যাকাউন্টও খুলতে হয় না, চেকআউট পেজে যা-ই লাগুক।

এলাকা বাছার সাথে সাথে ডেলিভারি চার্জ আর মোট বসে যায়, আর মোট লেখা থাকে বাটনেই: “অর্ডার কনফার্ম করুন · ৳৭৬০”। ক্যাশ অন ডেলিভারিতে বাটনের নিচে লেখা “কোনো অগ্রিম লাগবে না”।

কোনো এলাকা আগে থেকে বাছা থাকে না। যতক্ষণ কাস্টমার বাছেন না, ডেলিভারির জায়গায় লেখা “এলাকা বেছে নিন”, তাই ঢাকার বাইরের কাউকে ভিতরের চার্জ দেখানো হয় না। মোবাইল নম্বর ঠিক না হলে ঘরটা লাল হয় আর লেখা আসে “সঠিক মোবাইল নম্বর দিন (০১ দিয়ে শুরু, ১১ সংখ্যা)”।

অর্ডারের পর: ক্যাশ অন ডেলিভারির অর্ডারে ধন্যবাদ দেখায় ফর্মের ভিতরেই: “ধন্যবাদ! আপনার অর্ডারটি হয়েছে”, অর্ডার নম্বর, পণ্য আর ডেলিভারি চার্জ, পণ্য হাতে পেয়ে কত দেবেন, আর আপনার প্রতিনিধি কোন নম্বরে কল করবেন। নিচে “কেনাকাটা চালিয়ে যান”, আর আপনার দোকানে অর্ডার ট্র্যাকিং পেজ থাকলে “অর্ডার ট্র্যাক করুন”।

একই কাস্টমার একই ব্রাউজার থেকে একই অর্ডার আবার চাপলে দ্বিতীয় অর্ডার হয় না; ডুপ্লিকেট গার্ডের সময়ের ভিতরে আগের অর্ডারের ধন্যবাদটাই আবার দেখায়। শুধু নম্বর মিললে এটা হয় না, ব্রাউজারও মিলতে হয়।

থিমের Buy Now: প্রোডাক্ট পাতায় আপনার থিমের Buy Now বাটন চাপলে একই পপআপ খোলে, শুধু ওই পণ্যের জন্য। কার্টে আগে যা ছিল, তা অর্ডারের পর আবার কার্টে ফিরে আসে, আর ধন্যবাদের নিচে লেখা থাকে “আপনার কার্টে আগের ২টি পণ্য রাখা আছে”। সাইজ বা রং না বাছা থাকলে পপআপ খোলে না, থিম নিজের মেসেজ দেখায়।

• অনলাইন পেমেন্ট: বিকাশ, নগদ বা কার্ডের মতো যে মেথড নিজের পেমেন্ট পেজে নেয়, সেটা বাছলে অর্ডারের পর সেই পেজ খোলে। যে মেথডে নিজের ঘর পূরণ করতে হয় (যেমন TrxID লেখার ঘর), সেটা কাস্টমারকে চেকআউট পেজে নেয়।
• অগ্রিম: নিশ্চিতের অর্ডার প্রোটেকশন বা প্রি-অর্ডার কোনো অর্ডারে অগ্রিম চাইলে ফর্মেই লেখা আসে কত অগ্রিম দিতে হবে, মোট, এখন কত আর পণ্য হাতে পেয়ে কত। বাটনে লেখা হয় “৳১০০ অগ্রিম দিয়ে অর্ডার করুন”, আর পেমেন্ট পেজ খোলে।
• অসম্পূর্ণ অর্ডার: কেউ সঠিক নম্বর লিখে ফর্ম বন্ধ করে দিলে সেটা ডেস্কের Incomplete orders-এ আসে, উৎস লেখা “Popup checkout”, যাতে কল করে অর্ডারটা নেওয়া যায়।
• ফর্ম ছাড়াও: কার্ট পেজ আর চেকআউট পেজ আগের মতোই থাকে। কেউ চাইলে সেখান দিয়েও অর্ডার করতে পারেন।

কাস্টমারের দেখা সব লেখা শুরুতে বাংলায়, ছবিগুলোর মতো। ফর্মের শিরোনাম, বাটন আর ধন্যবাদের লেখা সেটিংস থেকে বদলানো যায় (নিচে ধাপ ৬)।

1. ১

   অ্যাড-অন চালু করুন

   Nishchit → Add-ons পাতায় Floating Checkout কার্ডের সুইচ চালু করে সংরক্ষণ করুন, তারপর Open settings (বাংলায় «সেটিংস খুলুন»)। অ্যাড-অনের নিজের পাতার উপরেও একটা সুইচ আছে, সেখান থেকেও চালু-বন্ধ করা যায়। বন্ধ করলে দোকানে এর কিছুই থাকে না: না বাটন, না ফর্ম।

   শুরুর সেটিং দিয়েই কাজ করে। কিছু বদলে সংরক্ষণ করার পর সাইটের পেজ ক্যাশ (WP Rocket, LiteSpeed ইত্যাদি) পরিষ্কার করুন, যাতে ক্যাশ করা পেজেও নতুন সেটিং যায়।

2. ২

   কার্ট: আমাদেরটা, নাকি থিমের

   পেজে কার্ট: শুরুতে «আমাদের ফ্লোটিং কার্ট»। আপনার থিমের নিজের সাইড কার্ট থাকলে দুটো কার্ট যেন না দেখায়, তাই বেছে নিন «থিমের কার্ট থাকবে, তাতে অর্ডার বাটন যোগ হবে»। তখন ভাসমান বাটন থাকে না; থিমের মিনি কার্টে একটা “অর্ডার করুন” বাটন যোগ হয়, যেটা একই ফর্ম খোলে।

   WoodMart, Flatsome বা Elementor Pro-এর মেনু কার্ট থাকলে পাতার উপরে একটা নোট আসে, কী করতে হবে তা লেখা। যেমন WoodMart-এ আমাদের কার্ট নিলে WoodMart → Theme Settings → Shop → “Action after add to cart”-এ “No action” দিতে হয়।

   বাটনের জায়গা: নিচে ডানে (শুরুতে) বা নিচে বামে। আর দুটো টিক, দুটোই শুরুতে চালু: কার্টে যোগ করলে কার্ট খুলবে, আর ফ্রি ডেলিভারির লাইন দেখাবে (Offers)।

   স্ক্রিনশট শিগগিরই আসছে

3. ৩

   ফর্ম কোথা থেকে খুলবে

   কোথা থেকে খুলবে: কার্টের অর্ডার বাটন শুরুতে টিক দেওয়া; পাশের কার্টের (বা থিমের মিনি কার্টের) “অর্ডার করুন” ফর্ম খোলে। টিক তুলে দিলে পাশের কার্টে “অর্ডার করুন” থাকে না, শুধু “কার্ট পেজ দেখুন”; থিমের মিনি কার্টেও বাটন যোগ হয় না।

   দ্বিতীয় টিক Buy Now বাটন, শুরুতে চালু। আপনার থিমের নিজের Buy Now বাটন থাকলে (যেমন WoodMart-এর), সেটা চাপলে চেকআউট পেজে না গিয়ে ওই পণ্যের জন্য পপআপ খোলে। কাস্টমারের কার্টে আগে যা ছিল, তা সরিয়ে রাখা হয় আর অর্ডারের পর ফেরত আসে। টিক তুলে দিলে থিমের Buy Now আগের মতোই চলে।

   নিশ্চিতের নিজের ফ্রি Buy Now অ্যাড-অন চালু থাকলে তার “অর্ডার করুন” বাটনও এই টিকেই পপআপ খোলে, কার্ডে আর প্রোডাক্ট পেজে।

   “চেকআউট পেজের সব লিংক” এর পাশে লেখা P2 তে আসছে: সেটা এখনো কাজ করে না।

   যে বাটন চেনা যায়: WoodMart-এর Buy Now, আর প্রোডাক্ট ফর্মের ভিতরে থাকা অন্য থিম বা প্লাগিনের পরিচিত কয়েকটা Buy Now বাটন। আপনার থিমের বাটন না খুললে আমাদের জানান; ডেভেলপার nishchit_floating_theme_buy_now ফিল্টারে নিজের বাটন যোগ করতে পারেন।

   নিজের বাটন বা মেনু থেকে পাশের কার্ট খোলাতে চাইলে লিংক দিন #nishchit-cart-এ, যেমন Elementor-এর একটা বাটনে বা মেনুর একটা আইটেমে। চাপলে পেজ না বদলে কার্ট খোলে।

4. ৪

   ফর্মে কী জানতে চাইবে

   ডেলিভারি এলাকার প্রশ্ন: তিনভাবে। শুরুতে «ঢাকার ভিতরে / বাইরে», দুটো বাটন। অথবা «জেলার তালিকা», অথবা «জিজ্ঞেস করবে না»। চার্জ আসে WooCommerce থেকে, তাই সেখানে চার্জ এই দুইয়ের একভাবে বসানো থাকলে ভালো:

   জোন দিয়ে

   Dhaka জেলার জন্য একটা শিপিং জোন, বাকি দেশের জন্য আরেকটা। কাস্টমার “ঢাকার ভিতরে” বাছলে Dhaka জোনের চার্জ, “বাইরে” বাছলে অন্যটা।

   রেটের নাম দিয়ে

   একটা জোনে দুটো রেট, নামে “ঢাকার ভিতরে” আর “ঢাকার বাইরে” (বা inside, outside)। কাস্টমারের উত্তর নাম মিলিয়ে রেট বাছে।

   কোনোটাই না মিললে কাস্টমার ফর্মে রেটগুলো দেখে নিজে বাছেন।

   অর্ডার নোট চাইবে: শুরুতে বন্ধ। চারটা ঘরেই অর্ডার সবচেয়ে বেশি হয়; দরকার হলেই চালু করুন।

5. ৫

   পেমেন্ট আর অর্ডারের পর

   ফর্মে পেমেন্ট মেথড: WooCommerce-এ চালু থাকা প্রতিটা মেথডের পাশে একটা টিক, শুরুতে সবগুলো। প্রতিটার নিচে লেখা অর্ডারের পর কী হয়: হাতে টাকা দেওয়ার মেথডে ফর্মের ভিতরেই ধন্যবাদ, পেমেন্ট পেজের মেথডে সেই পেজ, আর নিজের ঘর লাগে এমন মেথডে চেকআউট পেজ। যেটা ফর্মে চান না, তার টিক তুলে দিন। অর্ডার প্রোটেকশন কোনো কাস্টমারের জন্য কোনো মেথড সরালে, সেটা ফর্মেও থাকে না।

   অর্ডারের পর: শুরুতে «ফর্মের ভিতরেই ধন্যবাদ দেখাবে»। অন্য কোনো প্লাগিন (যেমন PixelYourSite বা Google Tag Manager) থ্যাংক-ইউ পেজে বিক্রি গোনে, তাহলে «থ্যাংক-ইউ পেজে যাবে» বেছে নিন। নিশ্চিতের নিজের Meta Purchase দুই ক্ষেত্রেই সার্ভার থেকে যায়।

6. ৬

   কাস্টমারের লেখা আর রং

   কাস্টমার যা পড়বেন: পাঁচটা লেখা, প্রতিটা ঘরে শুরুর লেখা হালকা করে দেখানো। ঘর খালি রাখলে শুরুর লেখাটাই থাকে।

   ফর্মের শিরোনাম

   “অর্ডার করুন”

   অর্ডার বাটন

   “অর্ডার কনফার্ম করুন”, পরে মোট টাকা নিজে বসে।

   বাটনের নিচে

   “কোনো অগ্রিম লাগবে না”, শুধু ক্যাশ অন ডেলিভারি বাছা থাকলে আর অগ্রিম না লাগলে।

   ধন্যবাদের শিরোনাম আর লাইন

   “ধন্যবাদ! আপনার অর্ডারটি হয়েছে”, আর “আমাদের প্রতিনিধি শীঘ্রই {phone} নম্বরে কল করে অর্ডারটি কনফার্ম করবেন।”

   বন্ধনীর শব্দগুলো নিজে থেকে বসে যায়: {order_number}, {total}, {cod}, {phone}, {name}।

   টাকা আর ফোন নম্বরের অংক: শুরুতে ইংরেজি অংক (1,059), কুরিয়ার স্লিপ আর SMS-এর সাথে মেলে; চাইলে বাংলা (১,০৫৯)। এই সেটিং WhatsApp Order-এর ফর্মেও একই। রং: শুরুতে থিমের সাথে মিলিয়ে, আপনার থিমের Add to cart বাটনের রং দেখে; চাইলে নিজের রং। হালকা রং দিলে সাদা লেখা পড়া যায় এমন গাঢ় করে নেয়।

   স্ক্রিনশট শিগগিরই আসছে

সেটিংস পাতার নিচে অন্য অ্যাড-অনের সাথে অংশে দেখায় আপনার দোকানে কোনটা চালু আর ফর্মের সাথে কী করে। কিছু সেট করতে হয় না।

স্ক্রিনশট শিগগিরই আসছে

খোলা থেকে নম্বর, নম্বর থেকে অর্ডার: কোথায় কাস্টমার থামছেন, তিনটা সংখ্যা পাশাপাশি দেখলেই বোঝা যায়। ফর্মের অর্ডার সাধারণ ওয়েবসাইট অর্ডার হিসেবেই আসে, তাই নিশ্চিতের বাকি রিপোর্ট আর ডেস্কে আলাদা কিছু করতে হয় না।

• স্পিড প্লাগিনে দুটো ফাইল বাদ দিন। “Delay JavaScript” থেকে floating.js আর order-sheet.js বাদ দিন, আর “Remove unused CSS”-এর safelist-এ .nfc- আর .nsh- রাখুন। না হলে কাস্টমার প্রথম চাপে কার্ট খুলতে না পেরে কার্ট পেজে চলে যান।
• পেজ ক্যাশ নিয়ে ভাবতে হয় না। পেজে সবার জন্য একই জিনিস থাকে; কার্টের সংখ্যা পেজ খোলার পরে WooCommerce-এর কুকি থেকে পড়ে। কার্ট খালি এমন ভিজিটরের জন্য কোনো বাড়তি রিকোয়েস্টও যায় না।
• দুটো কার্ট দেখালে ধাপ ২ দেখুন। থিমের নিজের সাইড কার্ট রাখলে «থিমের কার্ট থাকবে» বাছুন।
• ঘর কম রাখুন। অর্ডার নোট দরকার না হলে বন্ধই রাখুন; চারটা ঘরেই অর্ডার সবচেয়ে বেশি হয়।

দাম: এই অ্যাড-অন মাসে ৳৭৫। তিনটা বা বেশি অ্যাড-অন নিলে সব মিলিয়ে ৳১৯৯। প্রথমবার শুধু লাইসেন্স নবায়ন পর্যন্ত বাকি দিনের টাকা, তারপর নবায়নের বিলের সাথে। বিল কীভাবে হয় →

অ্যাড-অন চলে নিশ্চিত WooCommerce প্লাগিনের লাইসেন্সের সাথে। প্লাগিন এখনো নেই? লাইসেন্সের দাম দেখুন, অথবা ৭ দিনের ট্রায়াল দিয়ে শুরু করুন।

• Smart Upsellএকসাথে যা কেনে, তা-ই সাজেস্ট
• WhatsApp OrderWhatsApp-এ অর্ডার, হিসাব সহ
• Offersপরিমাণে দাম, কম্বো, ফ্রি ডেলিভারি
• Restock Alertsস্টকে এলে কাস্টমারকে SMS
• Pre-Ordersমাল আসার আগেই বিক্রি
• Buy Nowকার্ডে আর পেজে “অর্ডার করুন”

← সব অ্যাড-অন, দাম আর বিল