آموزش اضافه کردن دکمه افزودن به سبد خرید در ووکامرس
فهرست موضوعات در این آموزش
بنام و یاد خدا سلام خدمت تمام دوستان و همراهان همیشگی وبسایت پاسخ وردپرس در خدمت شما هستم یا یکی دیگه از جلسات آموزش توابع ووگامرس در این جلسه می خواهیم آموزش اضافه کردن دکمه افزودن به سبد خرید در ووکامرس
خدمت شما به صورت آموزش بدیم پس تا آخر این آموزش همراه من باشید .
یکی از مواردی که همیشه در موقع کار با وردپرس و فروشگاه ساز ووکامرس ذهن ما را درگیر می کرد این بود که چرا ووکامرس قابلیت ایجکس را به صفحات دسته بندی محصولات خودش داده است ولی این کار را برای صفحات داخلی خود محصول انجام نداده که همین موضوع شاید باعث کاهش نرخ رشد باشد .
اکثر مواقع دکمه ” اضافه به سبد خرید ” به صورت ایجکسی باشد به نظر ما اجرای بهتری دارد چرا که بدون نیاز به بارگزاری مجدد صفحه محصول شما به سبد خرید اضافه می شود .
دکمه افزودن به سبد خرید در ووکامرس
اگر شما صاحب یک سایت فروشگاهی هستید حتما برای شما این مشکل پیش آمده است که بخواهید در صفحه‌ی محصول خود دکمه افزودن به سبد خرید را اضافه کنید
ما در این آموزش قصد داریم تا کد دکمه افزودن به سبد خرید را آموزش دهیم .
قبل از شروع اگر قصد طراحی قالب وردپرس دارید میتوانید دوره طراحی قالب وردپرس را که به صورت حرفه ای آموزش داده شده است تهیه فرمایید.
ایجکس ( AJAX ) چیست ؟
Ajax ( ایجکس ) مخفف عبارت Asynchronous JavaScript and XML می باشد و فرایند ترکیب جاوا اسکریپت و xml به صورت غیرهمزمان و ناهمگام است .
اما ایجکس دقیقا به چه کاری می آید ؟ اگر به طرز کار صفحات وب توجه کرده باشید برای نمایش هر مطلب یا صفحه ای جدید وب سایت بارگزاری مجدد یا همان Refresh می شود .
تکنولوژی ایجکس به شما کمک می کند که کل صفحه یا بخشی از اطلاعات یک صفحه بدون نیاز به بارگزاری مجدد ، داده هایی را به سرور ارسال کند و آن را پردازش و در نهایت در خروجی به شما نمایش دهد .
نمونه هایی همچون ” پیشنهاد های گوگل در جستجو ” ، ” امتیاز ستاره ای ” ، ” اضافه به سبد خرید ” و خیلی از این موارد را می توان مثال زد .
کد افزودن به سبد خرید ایجکس برای محصولات ووکامرس
سپس قطعه کد زیر را در هر جای که میخواهید دگمه افزودن به سبد خرید نمایش داده بشه قرار بدید . مربوط به نمایش مطالب ووکامرس که به صورت اختصاصی در پوسته استفاده کرده اید، قرار دهید.
این قطعه کد در کوئری خود ووکامرس در فایل content-product.php قرار دارد.
اگر از فایلهای استاندارد خود ووکامرس استفاده میکنید نیازی به قرار دادن کد زیر در کوئری ووکامرس نمیباشد.
|
1 |
<?php do_action('woocommerce_after_shop_loop_item');?> |
دقت داشته باشید در صورت که استایلی مناسب نداشته باشه حتما داخل body قالب خود (woocommerce) کلاس woocommerce را اضافه نمایید .
پس از قرار دادن کد در کوئری محصولات ووکامرس، دگمه افزودن به سبد خرید در محصولات نمایش داده خواهد شد که با کلیک بر روی آن فرآیند افزودن محصول به سبد خرید به شکل کاملا ajax ایجکس انجام و بعد از افزودن محصول به سبد خرید، لینک نمایش سبد خرید نمایش داده می شود.
نمایش جزئیات سبد خرید ووکامرس
یکی از ابزارهای لازم و ضروری در هر فروشگاه نمایش سبد خرید و تعداد اقلام موجود در سبد خرید هستش. اینکه من وقتی روی “افزودن به سبد خرید” کلیک می کنم همون لحضه سبد خریدم آپدیت بشه و تعداد نهایی رو نشون بده. در حالت پیش فرض بعد اضافه کردن محصول این اتفاق می افته چون صفحه رفرش میشه و سبد خرید مقدار جدید رو می گیره. اما مسئله زمانی هستش که “افزودن به سبد خرید” به صورت ajax اتفاق می افته و عملا لود دوباره صفحه نداریم و یا زمانی که توی صفحه سبد خرید به محصول حذف می کنیم و ولی عدد تغیری نمیکنه اینم باز به دلیل ای جکسی بودن هستش. حل این مسئاله بسیار راحته دو تا کد براتون آماده کردم که می تونید ازش استفاده کنید.کد اول:
|
1 2 3 4 5 6 7 8 |
<div class="widget"> <h5 class="widget-title">تعداد محصولات </h5> <div class="text-widget"> <p> <a href="<?php echo wc_get_cart_url()?>"><span class="replyWp_count"></span></a> </p> </div> </div> |
این کد رو می تونید توی هدر یا هر جایی که برای نمایش سبد خرید در نظر گرفتید قرار بدید. خوب ما لینکش رو هم براش قرار دادیم تا وقتی کاربر کلیک کرد لیست کامل رو بهش نشون بده و یا حتی براش یه آیکن هم در نظر بگیرید.
کد نمایش جزئیات سبد خرید ووکامرس
برای این منظور ابتدا باید کدهای زیر را در انتهای فایل فانکشن functions.php قالب وردپرس کپی کنید.
قبل از هر اقدامی از Functions.php یک کپی تهیه کنید تا در صورت بروز هر مشکل بتوانید آن را بازیابی کنید.
|
1 2 3 4 5 6 7 8 9 |
add_filter('woocommerce_add_to_cart_fragments','wc_count_add_to_cart_fragment'); function wc_count_add_to_cart_fragment($fragment){ ob_start(); ?> <span class="replyWp_count"><?php echo sprintf(_n('%d','%d',WC()->cart->get_cart_contents_count()),WC()->cart->get_cart_contents_count());?></span> <?php $fragment['.replyWp_count'] = ob_get_clean(); return $fragment; } |
ولی یادتون باشه که “class=”replyWp_count بسیار بسیار ضروریه اگر این کلاس رو تغییر بدید دیگه کار نمیکنه. اگر هم می خواین تغییر بدین باید توی هر دوتا کد تغییر بدین.
اگر سوالی داشتین کامنت بگذارید اولین زمان ممکن پاسخ خواهم داد.
امیدوارم که این آموزش هم مورد توجه و پسند شما قرار گرفته باشه و با استفاده از اون تونسته باشید تا نسبت اضافه کردن دکمه افزودن به سبد خرید در ووکامرس اقدام کرده و با استفاده از این روش فروش خوبی را برای خودتون فراهم کرده و مشتریان زیادی را به خودتون جذب کنید.
در صورتی که در رابطه با این آموزش اضافه کردن دکمه افزودن به سبد خرید در ووکامرس سوال یا مشکلی داشتید در بخش دیدگاه‌ها اعلام کنید تا در کوتاه‌ترین زمان ممکن پاسخگوی شما باشم.
سلام وقتتون بخیر خیلی عالی بود اگه بخوام یه پیام بعد از اضافه شدن موفق به سبد خرید ایجکسی به کاربر برای ۵ ثانیه نمایش داده بشه چه دستوری باید اضافه کنم؟
سلام خدمت شما دوست گرامی شما لطف دارید برای این کار باید از کد جاوااسکریپت استفاده فرمایید موفق باشید
سلام خسته نباشید استاد من وقتی رو مشاهده سبد خرید کلیک میکنم صفحه ۴۰۴ برام بالا میاد ممنون میشم کمکم کنید
سلام خدمت شما دوست گرامی دقت داشته باشید حتما صفحه سبد خرید را باید ساخته باشید به احتما خیلی زیاد صفحه سبد خرید شما ساخت نشده است لطفا از قسمت برگه های یک برگه جدید بنام سبد خرید پیوند یکتا را هم روی cart قرار دهید
مرحله بعدی از قسمت ووکامرس پیکربندی روی تسویه حساب کلیک فرمایید از قسمت پاین صفحه روی سلکت باکس کلیک فرمایید سبد خرید خود که ساختید انتخاب فرمایید روی ذخیره تغییرات کلیک فرمایید بعد از این مرحله وارد تنظیمات خود وردپرس
روی پیوندهای یکتا کلیک فرمایید روی نام نوشته کلیک فرمایید در صورت که اگه روی نام نوشته هست یک بار روی دگمه ذخیره تغییرات کلیک فرمایید مشکل شما برطرف خواهد شد
موفق و سر بلند باشید
سلام ، امیدوارم همیشه سلامت و پیروز باشید و سپاس بابت آموزش های بسیار مفید، بخصوص برای ووکامرس.
بنده یک سوالی در مورد دکمه افزودن به سبد خرید در فروشگاه و آرشیو دسته بندی های محصولات دارم ( برای کل یک وبسایت ) و بسیار متشکر میشم راهنمایی کنید.
برای اینکه هم متن روی دکمه ” افزودن به سبد خرید ” تغییر کند و هم بجای افزودن محصول به سبد خرید، به صفحه محصول هدایت بشه، از چه قطعه کدی در functions.php قالب میشه استفاده کرد.
لازم هست توضیح بدم که همه محصولات این فروشگاه، محصول ساده هستند ولی باید از فرم های محاسبه گر در صفحه محصول استفاده کرد و سپس به سبد خرید اضافه بشوند.
پیشاپیش سپاسگزارم
سلام خدمت شما دوست گرامی خواهش میکنم خیلی خوشحالم که برای شما مفید بوده
برای تغییر دادن متن افزودن به صتغییر متن افزودن به سبد خرید ووکامرس
اما اگه بخواهید روی دگمه افزودن به سبد خرید کلیک بشه بره داخل صفحه محصول برای این کار باید وارد پوسته یا همان قالب سایت بشید از قسمت فایل woocommerce وارد فایل archive-product.php دگمه مورد نظر را جسجو فرمایید و تغییر بدید اگه داخل فایل archive-product.php یافت نشد وارد فایل content-product.php جسجو فرمایید نگاه به ساختار قالب شما داره که به چه صورت پیاده سازی شده است .
امید وارم که تونسته باشم راهنمایی کنم موفق و سر بلند باشید در تمام جنبه های زندگی
سلام استاد با افزونه lifterlms چگونه باید دکمه افزودن به سبد خرید رو برای آموزش ها اضافه بکنیم
سلام خدمت شما دوست گرامی بنده با این افزونه کار نکردم لطفا داخل گوگل سرچ فرمایید به عنوان آموزش کار با افزونه lifterlms
موفق باشید
سلام استاد
امیدوارم که سلامت باشید
ببخشید استاد برای ساخت یک دکمه چسبان برای هر صفحه یعنی هر پستی که ایجاد میکنم می‌خوام مثل ووکامرس هس که یه دکمه داره وقتی می‌ریم به سمت پایین و دکمه خرید ووکامرس چسبیده به پایین صفحه منظورم یه همچین دکمه‌ای برای ایجاد در هر صفحه چه افزونه‌ای رو باید استفاده کرد؟
من توی یک صفحه چند محصول رو معرفی میکنم مثلاً ۵ تا کرم پودر رو معرفی میکنم و می‌خوام یک دکمه داشته باشم که چسبید به صفحه باشه و توی اون دکمه لینک صفحه مثلاً پرفروشترین محصولات کرم پودر رو قرار بدم که بعدش کاربر بر که اون محصولات رو ببینه چه افزونه‌ای برای ساخت یه همچین دکمه‌ای وجود داره الان من تو اینترنت گشتم و یک دکمه پیدا کردم که کارش کلیه و نمی‌شه واسه هر صفحه جدا دکمه شناور قرار داد.
این هم اسم افزونه floatton
اگه راهنمایی بکنید ممنون میشم با تشکر
سلام خدمت شما دوست گرامی برای این کار بنده افزونه ای نمیشناسم اما میتوانید توسط متاباکس ها به راحتی پیاده سازی کنید طبق گفته شما داخل هر محصول میخواهید متفاوت باشه درسته
برای همین به تعداد نیاز میتوانید فیلد متاباکس پیاده سازی کنید و هر محصول را به صورت جدا شخصی سازی فرمایید امید وارم که تونسته باشم راهنمایی کنم
آروز دارم در زندگی موفق و سر بلند باشید در تمام جنبه های زندگی