ویرایش پنل کاربری ووکامرس با افزونه و کدونویسی

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

ویرایش پنل کاربری ووکامرس

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

افزونه های سفارشی سازی پنل کاربری ووکامرس

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

افزونه رایگان Custom My Account for Woocommerce

این افزونه به راحتی از طریق مخزن وردپرس قابل دانلود و نصب است. بعد از اتمام نصب این افزونه را فعال کنید. در ادامه از پیشخوان وردپرس خود در بخش phoeniixx وارد منوی Custom My Account شوید. در اینجا می‌توانید پنل کاربری ووکامرس خود را ویرایش کنید.

این افزونه تب های مختلفی را در اختیار شما قرار داده است و اگر وارد هرکدام از این تب ها شوید می‌توانید بسته به نیاز خود بخش های مختلف پنل کاربری را ویرایش کنید. هر کدام از منو ها را که انتخاب کنید به شکل کشویی آن منو باز خواهد شد. به عنوان مثال در بخش label می‌توانید نامی را وارد کنید که می‌خواهید به مخاطب نمایش داده شود.

این امکان را دارید که این بخش ها را ادیت کنید یا با برداشتن تیک آن بخش، به طور کامل آن را از از پنل کاربری خود حذف کنید.

در آخر با زدن ذخیره تنظیمات می‌توانید تغییرات ایجاد شده را اعمال کنید.

افزونه پولی YITH WOOCOMMERCE CUSTOMIZE MY ACCOUNT

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

افزونه YITH WOOCOMMERCE CUSTOMIZE MY ACCOUNT امکانات بسیاری را ارائه کرده است و در شخصی سازی پنل کاربری دست شما را باز گذاشته است. برخی از ویژگی های این افزونه به شرح زیر است:

• جابه جایی و اولویت دهی به منوها با درگ اند دراپ
• ایجاد تصویر و آیکون برای قسمت ها
• آزادی در انتخاب رنگ هر بخش
• حذف یا اضافه کردن بخش ها
• و…

پس از اینکه افزونه را خریداری کردید یا به هر صورت آن را نصب کردید، باید وارد پیشخوان خود شوید در بخش YITH گزینه “ویرایشگر حساب کاربری” را انتخاب کنید. در صفحه ای که باز شده است امکان سفارشی سازی منوها برای شما فراهم شده است و پنل کاربری ووکامرس خود را می‌توانید ویرایش کنید.

برای اینکه حساب کاربری خود را تنظیم کنید باید تب های موجود در صفحه را بررسی و ویرایش کنید. تب های که در صفحه قرار گرفته است به شرح زیر است:

• تنظیمات
• امنیت
• بخش ها

اگر وارد قسمت “تنظیمات” شوید، می‌توانید این امکان را فعال کنید که کاربران برای پروفایل خود تصویر قرار دهند. در این بخش امکان مشخص کردن رنگ ها نیز وجود دارد و مطابق با فروشگاه خود، آن را انتخاب کنید.

اگر وارد قسمت “امنیت” شوید، می‌توانید reCaptcha را برای فرم لاگین قرار دهید یا اینکه سایر گزینه هایی که مربوط به امنیت فروشگاه شما هستند را فعال کنید یا بر اساس نیاز فروشگاه خود اقدام به غیر فعال سازی آنها کنید.

اگر وارد قسمت “بخش ها” شوید، می‌توانید پنل کاربری ووکامرس را شخصی سازی کنید. در واقع تنظیمات مورد نظر ما در این بخش صورت می‌گیرد. پس از وارد شدن به این بخش با گزینه های زیر مواجه می‌شوید:

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

با کلیک کردن بر روی “بخش” می‌توانید از منوی کشویی باز شده آن منو را سفارشی سازی کنید.

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

ویرایش پنل کاربری ووکامرس با موفقیت انجام شده است و در اینجا کار ما با این افزونه به پایان رسید. در آخر لازم است تغییرات ایجاد شده خود را سیو کنید. برای این کار “save changes” را بزنید.

ویرایش پنل کاربری ووکامرس از طریق کدنویسی

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

ابتدا باید فایل function.php قالب اصلی یا قالب فرزند را باز کنید. بسته به این که از کدام قالب در سایت خود استفاده می‌کنید فایل آن را باز کنید. این کدها را در بخش انتهایی فایل قرار دهید.

function uw_woo_my_account_order() {
$myorder = array(
'dashboard' => __( 'پیشخوان', 'woocommerce' ),
'orders' => __( 'سفارش ها', 'woocommerce' ),
'downloads' => __( 'دانلود ها', 'woocommerce' ),
'edit-address' => __( 'آدرس ها', 'woocommerce' ),
'edit-account' => __( 'جزئیات حساب', 'woocommerce' ),
'logout' => __( 'خروج از سیستم', 'woocommerce' ),
);
return $myorder;
}
add_filter ( 'woocommerce_account_menu_items', 'uw_woo_my_account_order'
);

در کدهای نوشته شده می‌توانید منوها را مشاهده کنید. منوهای پیشخوان، سفارش ها، دانلود ها، آدرس ها، جزئیات حساب، خروج از سیستم در کدهای نوشته شده قرار گرفته است. برای غیر فعال کردن هر کدام از منو ها کافی است کاراکتر “//” را در ابتدای آن قرار دهید. مثلا اگر می‌خواهید منوی دانلود ها را حذف کنید باید به صورت زیر عمل کنید:

//'downloads' => __( 'دانلود ها', 'woocommerce' ),

این کار در میان همان کد های بالا انجام می‌شود و بعد از قرار دادن عبارت “//” در تصویر زیر می‌توانید نتیجه را مشاهده کنید. منوی دانلود ها در میان سایر گزینه ها قرار ندارد.

آموزش تغییر نام گزینه های منوی حساب کاربری

روش دیگری که برای تغییر نام منوها می‌توان آن را به کار برد، استفاده از woocommerce_account_menu_items است. در این صورت باید شناسه آیتم های مورد نظر خود را بدانید. دقیقا همان چیزی که در بالا گفته شد.

مثلا اگر قصد نام داشبورد/ dashboard را تغییر دهید باید از کد زیر در فایل function.php خود استفاده کنید.

add_filter ( 'woocommerce_account_menu_items', 'uw_rename_downloads' );</p>
function uw_rename_downloads( $menu_links ){

// $menu_links['TAB ID HERE'] = 'NEW TAB NAME HERE';
$menu_links['dashboard'] = 'Portal';

return $menu_links;
}

نحوه اضافه کردن آیتم ها و شخصی سازی پنل کاربری ووکامرس

شخصی سازی پنل کاربری ووکامرس را می‌خواهیم به کمک افزودن آیتم جدید تکمیل کنیم. کدهایی که در ادامه آورده شده است در دو بخش است و در بخش ابتدایی یک فیلتر تعریف کرده ایم و می‌خواهیم آیتم مورد نظرمان را به این صورت اضافه کنیم. و در ادامه آن لینک مربوط به آن را متصل خواهیم کرد.

add_filter ( 'woocommerce_account_menu_items', 'uw_one_more_link' );
function uw_one_more_link( $menu_links ){</p>
// We will hook "sometext" later
$new = array( 'sometext' => 'My New Item' );

// Or in case you need 2 links
// $new = array( 'link1' => 'Link 1', 'link2' => 'Link 2' );

// array_slice() is good when you want to add an element between the other ones
$menu_links = array_slice( $menu_links, 0, 1, true )
+ $new
+ array_slice( $menu_links, 1, NULL, true );

return $menu_links;
}

add_filter( 'woocommerce_get_endpoint_url', 'uw_hook_endpoint', 10, 4 );
function uw_hook_endpoint( $url, $endpoint, $value, $permalink ){
if( $endpoint === 'sometext' ) {
// Here is the place for your custom URL, it could be external
$url = site_url();
}
return $url;
}

نحوه اضافه کردن آیتم ها با صفحه اختصاصی

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

/*
* Part 1. Add Link (Tab) to My Account menu
*/
add_filter ( 'woocommerce_account_menu_items', 'uw_log_history_link', 40 );
function uw_log_history_link( $menu_links ){</p>
$menu_links = array_slice( $menu_links, 0, 5, true )
+ array( 'log-history' => 'Log history' )
+ array_slice( $menu_links, 5, NULL, true );

return $menu_links;

}
/*
* Part 2. Register Permalink Endpoint
*/
add_action( 'init', 'silva_add_endpoint' );
function silva_add_endpoint() {

// WP_Rewrite is my Achilles' heel, so please do not ask me for detailed explanation
add_rewrite_endpoint( 'log-history', EP_PAGES );

}
/*
* Part 3. Content for the new page in My Account, woocommerce_account_{ENDPOINT NAME}_endpoint
*/
add_action( 'woocommerce_account_log-history_endpoint', 'uw_my_account_endpoint_content' );
function uw_my_account_endpoint_content() {

// Of course, you can print dynamic content here, one of the most useful functions here is get_current_user_id()
echo 'Last time you logged in: yesterday from Safari.';

}

پس از وارد کردن کدها در فایل function.php لازم است تغییرات را ذخیره کنید. برای این کار وارد تنظیمات شوید و از بخش پیوندهای یکتا گزینه ذخیره تغییرات را بزنید. با این کار تغییرات شما اعمال خواهد شد.

نتیجه گیری 

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

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