نحوه سفارشی کردن سبد خرید ووکامرس

نحوه سفارشی کردن سبد خرید ووکامرس

نحوه سفارشی کردن سبد خرید ووکامرس

How to customize a WooCommerce shopping cart?

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

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

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

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

 

 

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

 

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

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

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

نحوه سفارشی کردن سبد خرید ووکامرس:

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

add_theme_support('woocommerce');

برای این کار ، ابتدا باید الگویی را که می خواهیم سفارشی کنیم ، پیدا کنیم. این بدان معنی است که به فهرست روت سایت برویدو 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> سبد خرید شروع کنیم ، مانند این:

 	
</table>
 
<!-- Custom code here -->
 
<?php do_action( 'woocommerce_after_cart_table' ); ?>

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

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

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

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

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

.woocommerce-cart .woocommerce {
  display: flex;
}

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

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

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

.woocommerce-cart .woocommerce-cart-form {
  flex: 1 0 70%; /* 100% at small screens; 70% on larger screens */
  margin-right: 30px;
}
 
/* The element that contains the cart totals */
.woocommerce-cart .cart-collaterals {
  flex: 1 0 30%; /* 100% at small screens; 30% on larger screens */
  margin-left: 30px;
}
 
/* Some minor tweak to make sure the cart totals fill the space */
.woocommerce-cart .cart-collaterals .cart_totals {
  width: 100%;
  padding: 0 20px 70px;
}

خروجی قطعه کد بالا تصویری به شکل زیر است:

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

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

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

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

.button[name="apply_coupon"] {
  background-color: transparent;
  color: #13aff0;
}
/* Fill the "Apply Coupon" button background color and underline it on hover */
.button[name="apply_coupon"]:hover {
  background-color: transparent;
  text-decoration: underline;
}


/* The "Update Cart" button */
.button[name="update_cart"] {
  background-color: #e2e2e2;
  color: #13aff0;
}
/* Brighten up the button on hover */
.button[name="update_cart"]:hover {
  filter: brightness(115%);
}

 

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

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

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

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

@media(min-width: 1100px) {
  .woocommerce-cart .woocommerce {
    display: flex;
  }
  .woocommerce-cart .woocommerce-cart-form {
    flex: 1 0 70%;
    margin-right: 30px;
  }    
  .woocommerce-cart .cart-collaterals {
    flex: 1 0 30%;
    margin-left: 30px;
  }
}


.button[name="apply_coupon"] {
  background-color: transparent;
  color: #13aff0;
}


.button[name="apply_coupon"]:hover {
  text-decoration: underline;
  background-color: transparent;
  color: #13aff0;
}


.button[name="update_cart"] {
  background-color: #e2e2e2;
  color: #13aff0;
}


.button[name="update_cart"]:hover {
  background-color: #e2e2e2;
  color: #13aff0;
  filter: brightness(115%);
}

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

نحوه سفارشی کردن سبد خرید ووکامرس