آموزش سفارشی کردن سبد خرید ووکامرس

زهرا فنودی وردپرس, ووکامرس 2020/12/07 64 0

آموزش سفارشی کردن سبد خرید ووکامرس

Learn how to customize your WooCommerce shopping cart

یک سایت تجارت الکترونیکی استاندارد دارای چند صفحه مشترک است. صفحات محصولات ، صفحات فروشگاهی که محصولات را لیست می کند وجود دارد و صفحه های مربوط به حساب کاربری ، جریان پرداخت و سبد خرید.

WooCommerce تنظیم این موارد در یک سایت وردپرسی را بسیار آسان می کند زیرا قالب هایی را برای آنها فراهم می کند و خارج از جعبه صفحات را برای شما ایجاد می کند. این همان چیزی است که باعث می شود فروشگاه شما فقط با راه اندازی برخی از محصولات و جزئیات پردازش پرداخت در عرض چند دقیقه راه اندازی شود.

WooCommerce بسیار قابل توسعه است به این معنا که تعداد زیادی فیلتر و عملکرد، به علاوه راهی برای نادیده گرفتن الگوها در قالب وردپرس را در اختیار شما قرار می دهد.صفحه سبد خرید سخت ترین مورد برای تهیه و شخصی سازی است.

بیایید بررسی کنیم که چگونه صفحه سبد خرید WooCommerce را با اجرای یک طرح متفاوت تغییر دهیم. یک صفحه سبد خرید پیش فرض به این شکل است:

آموزش سفارشی کردن سبد خرید ووکامرس

در عوض ما به دنبال چیزی شبیه به این خواهیم بود:

آموزش سفارشی کردن سبد خرید ووکامرس

ما به جای طرح تمام عرض یک الگوی پیش فرض، از یک طرح دو ستونی استفاده می کنیم. این ویژگی به ما امکان می دهد تا عنصر “مجموع سبد خرید” را از بالا بیاوریم تا در صفحات بزرگتر بیشتر دیده شود.

ما با درج مزایایی در زیر لیست محصولات موجود در سبد خرید ، مواردی را برای اطمینان خاطر مشتریان اضافه می کنیم.  گزینه هایی مانند حمل و نقل رایگان ، مبادلات آسان ، پشتیبانی مشتری و امنیت. این اقدام باعث ارزش گذاری بیشتر محصولات سایت ما نیز می شود.

ما در زیر لیست محصولات و در قالب آکاردئون، لیستی از سوالات متداول را ارائه می دهیم. این امر به مشتری کمک می کند بدون این که مجبور به ترک صفحه شود، به سوالات مربوط به خرید خود پاسخ دهد و با پشتیبانی تماس بگیرد.

آموزش سفارشی کردن سبد خرید ووکامرس:

یکی از مزایای ووکامرس این است که به ما قالب های از قبل طراحی شده و کدگذاری شده را می دهد تا بتوانیم با آنها کار کنیم. مشکل این است که آن پرونده های الگو در پوشه پلاگین قرار دارند. و اگر افزونه در آینده به روز شود (که مطمئنا چنین خواهد شد) ، هر تغییری که در قالب ایجاد کنیم از بین می رود. از آنجا که ویرایش مستقیم پرونده های افزونه در وردپرس بسیار منفی است ، WooCommerce به ما اجازه می دهد تا فایل ها را با ایجاد نسخه هایی از آنها که در پوشه قالب قرار دارند ، اصلاح کنیم. تا زمانی که ما این کار را در فایل functions.php یا افزونه functionality خود انجام دهیم، کار خواهد کرد:

برای این کار ، ابتدا باید الگویی را که می خواهیم سفارشی کنیم ، پیدا کنیم. این بدان معنی است که به فهرست روت سایت برویدو wp-content/ را در جایی که WordPress نصب شده است باز کنید. چندین پوشه در آنجا وجود دارد که یکی از آنها پلاگین ها است. آن را باز کنید و سپس به پوشه woocommerce/ بروید. این دایرکتوری اصلی برای همه فایل های ووکامرس است.ما فایل cart.php را می خواهیم که در این آدرس قرار دارد:

/wp-content/plugins/woocommerce/templates/cart/cart.php

بیایید فایل cart.php را در یک ویرایشگر کد باز کنیم. یکی از اولین مواردی که متوجه خواهید شد، مجموعه ای از توضیحات در بالای پرونده است:

آموزش سفارشی کردن سبد خرید ووکامرس

در تصویر بالا خطی که با رنگ سبز برجسته شده است، دقیقا همان چیزی است که ما بدنبال آن هستیم.

بیایید یک نسخه از آن فایل تهیه کنیم و مسیری به شکل زیر را ایجاد کنیم:

/wp-content/themes/[your-theme]/woocommerce/cart/cart.php

نشانه گذاری ما به کجا می رود؟ خوب ، برای اینکه طرح در ابتدای این پست آن را نشان دهیم ، می توانیم از زیر جدول بسته </ table> سبد خرید شروع کنیم ، مانند این:

ما HTML خاصی را که این عناصر را ایجاد می کند پوشش نخواهیم داد. نکته مهم این است که بدانید این نشانه گذاری به کجا می رود.

هنگامی که این کار را انجام دادیم، باید به چیزی شبیه به این برسیم:

آموزش سفارشی کردن سبد خرید ووکامرس اکنون همه عناصر مورد نظر را در صفحه داریم. تنها چیزی که باقی مانده این است که عناصر را استایل دهی کنیم تا طرح دو ستونی داشته باشیم.

ما می توانیم نشانه های بیشتری را به الگو اضافه کنیم تا دو ستون جداگانه ایجاد کنیم. اما نشانه گذاری موجود به شکلی زیبا سازماندهی شده است که به لطف flexbox می توانیم آنچه را که می خواهیم با CSS انجام دهیم!

اولین قدم شامل ساختن عنصر woocommerce. به یک ظرف فلکس است. این عنصری است که همه عناصر دیگر ما را در بر دارد ، بنابراین باعث ایجاد یک والد خوب می شود. برای اطمینان از اینکه فقط آن را در سبد خرید اصلاح می کنیم و نه صفحات دیگر (زیرا سایر الگوها نیز از این کلاس استفاده می کنند) ، باید سبک ها را در کلاس صفحه سبد خرید قرار دهیم ، که WooCommerce نیز به راحتی آن را در دسترس قرار می دهد.

توجه: این استایل دهی ها می توانند مستقیما در پرونده style.css قالب شما قرار بگیرند. توصیه خود  ووکامرس نیز همین است. به یاد داشته باشید که روش های زیادی برای سفارشی سازی سبک ها در وردپرس وجود دارد و برخی از آنها ایمن تر و قابل نگهداری از دیگران هستند.

ما در عنصر woocommerce. دو عنصر فرزند داریم که برای طرح دو ستونی مناسب است: woocommerce-cart-form. و cart-collaterals.

قطعه کد CSS که ما برای تقسیم کارها در جستجوی آن هستیم به شکل زیر است:

قطعه کد بالا یک طرح کاملا تمیز به ما می دهد:

آموزش سفارشی کردن سبد خرید ووکامرس

فرم ایجاد شده در بالا، بیشتر به صفحه سبد خرید آمازون و سایر فروشگاه های تجارت الکترونیکی معروف شباهت دارد ، که اصلا چیز بدی نیست.

بهترین روش: مهمترین عناصر را برجسته کنید

یکی از مشکلاتی که در طراحی های پیش فرض ووکامرس وجود دارد،این است که تمام دکمه ها به یک شکل طراحی شده اند. همه آنها دارای یک اندازه و رنگ پس زمینه یکسان هستند.

آموزش سفارشی کردن سبد خرید ووکامرس

هیچ سلسله مراتبی بصری درباره اقداماتی که کاربران باید انجام دهند وجود ندارد و به همین ترتیب ، تشخیص مثلا نحوه به روزرسانی سبد خرید ازمرحله اقدام به خرید تا قرار گرفتن در صفحه پرداخت ، دشوار است. مورد بعدی که باید انجام دهیم این است که با تغییر رنگ پس زمینه دکمه ها ، این تمیز را واضح تر کنیم. برای این منظور ، CSS زیر را می نویسیم:مورد بعدی که باید انجام دهیم این است که با تغییر رنگ پس زمینه دکمه ها ، این فرم را واضح تر کنیم. برای این منظور ، CSS زیر را می نویسیم:

آموزش سفارشی کردن سبد خرید ووکامرس Proceed to checkout تقریبا به حالت قبلی باقی مانده است و رنگ زمینه آبی پیش فرض آن را برجسته می کند زیرا مهمترین اقدام در سبد خرید است.

دکمه Update cart پس زمینه خاکستری پیدا می کند که با پس زمینه سفید صفحه ترکیب می شود.

Apply coupon کمتر یک دکمه است و بیشتر یک پیوند متنی است ، و آن را به کمترین اقدام گروه تبدیل می کند.

قطعه کدی CSS کاملی که برای ساخت این طرح باید اضافه کنید اینجا است:

هم اکنون از  تجربه شخصی سازی در سایت وردپرسی خود لذت ببرید و احساس راحتی کنید. برای سفارشی کردن بهتر سایت ووکامرسی، بهتر است کمی وقت خود را در اسناد WooCommerce بگذرانید  اطلاعات خوبی در اینجا وجود دارد، از جمله قطعه های از قبل ساخته شده برای انواع مختلف.

آموزش سفارشی کردن سبد خرید ووکامرس

چنان چه نسبت به محتوای این پست آموزشی پرسشی دارید یا در مورد فروشگاه ووکامرس خود نیاز به دریافت راهنمایی و مشاوره دارید، می توانید هم اکنون در ناحیه کاربری ثبت نام کرده ، اطلاعات سایت را تیکت کنید و از دانش و تخصص کارشناسان ما در وب سایت ووکامرس ایرانی، بهره بگیرید.

برچسب ها

برچسبی برای نمایش وجود ندارد

توجه

کلیک

اگر با این مشکل آشنا هستید خودتان انجام دهید ولی اگر نمی دانید که این کار را چطور انجام دهید می توانید هم اکنون در ناحیه کاربری ثبت نام کرده و اطلاعات سایت را تیکت کنید تا با اندک هزینه ای کار شما را انجام دهیم . اگر خواستید می توانید برای مشاوره با شماره های ۰۹۱۷۹۰۵۹۳۵۰ و یا ۰۹۳۹۸۶۹۵۲۳۸ با ما در ارتباط باشید.



نظرات ( 0 )

برای ارسال نظر باید وارد حساب کاربری خود شوید

کلیه حقوق برای وب سایت پنگاش محفوظ می باشد و هر گونه کپی برداری پیگرد قانونی دارد.
تماس