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

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

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

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

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

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

حساب کاربری پیش‌فرض ووکامرس
حساب کاربری پیش‌فرض ووکامرس

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

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

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

سپس برای سفارشی‌سازی منوها در پنل کاربری ووکامرس، وارد منوی Custom My Account در منوی phoeniixx که در پیشخوان وردپرس مشاهده می‌کنید، شوید.

افزونه Custom My Account for Woocommerce
افزونه Custom My Account for Woocommerce

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

صفحه تنظیمات افزونه Custom My Account for Woocommerce
صفحه تنظیمات افزونه Custom My Account for Woocommerce

در آخر برای ذخیره تنظیمات بر روی “Save changes” کلیک کنید.

افزونه دوم و پرومیوم: افزونه YITH WOOCOMMERCE CUSTOMIZE MY ACCOUNT

افزونه YITH WOOCOMMERCE CUSTOMIZE MY ACCOUNT نسخه رایگان ندارد.(ولی شما میتوانید آنرا بصورت رایگان از آلتیمیت فروم دانلود کنید.) این افزونه برای کسانی که قصد دارند به راحتی شخصی‌سازی منوهای حساب کاربری در ووکامرس را انجام دهند، بسیار مناسب است.

برخی امکانات افزونه :

  • تغییر اولویت و جابجایی بخش‌ها با کشیدن و رها کردن
  • قرار دادن آیکون برای هر بخش
  • رنگ‌بندی بی‌نهایت برای تمام بخش‌ها
  • فعال/غیرفعال‌سازی بخش‌ها
  • و…

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

صفحه تنظیمات افزونه YITH WOOCOMMERCE CUSTOMIZE MY ACCOUNT

این صفحه دارای سه بخش برای تنظیم حساب کاربری می‌باشد که “تنظیمات“، “امنیت” و “بخش‌ها” نام دارند.

در قسمت “تنظیمات” شما می‎توانید امکان قرار دادن عکس برای پروفایل کاربر را فعال کنید و همچنین رنگ‌های مورد نظر را تغییر بدید. همچنین در قسمت “امنیت” می‌توانید برای فرم ورود کاربر reCaptcha قرار دهید و دیگر موارد امنیتی را فعال یا غیرفعال نمایید.

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

صفحه مدیریت بخش‌های پنل کاربری
صفحه مدیریت بخش‌های پنل کاربری

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

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

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

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

دکمه فعال یا غیرفعال کردن هر منو
دکمه فعال یا غیرفعال کردن هر منو

در آخر برای ذخیر تنظیمات بر روی دکمه “Save Changes” کلیک کنید.

سفارشی سازی منوها از طریق کدنویسی

ما این روش را توصیه نمیکنیم؛ چون زمانی که شما قالب را آپدیت کنید تمام تغییرات ازبین خواهد رفت. (البته میتوانید برای از دست ندادن تغییرات هنگام بروزرسانی قالب از ویژگی قالب فرزند استفاده کنید). همچنین به یاد داشته باشید قبل از انجام این کار از سایت خود بک آپ بگیرید.

برای این کار باید فایل functions.php قالب خود را باز کنید(اگر از قالب فرزند استفاده میکنید فایل functions.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” قرار دادیم.

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

در تصویر پایین اگر دقت کنید خواهید دید که گزینه دانلودها حذف شده است .

حذف منوی دانلود ها با کد
حذف منوی دانلود ها با کد

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

این کار را می توان با woocommerce_account_menu_items نیز انجام داد. تنها چیزی که باید بدانید شناسه آیتم ای است که می خواهید نام آن را تغییر دهید (در بالا به این موارد اشاره کردیم).

بنابراین اجازه دهید نام “Dashboard” را به “Portal” تغییر دهیم ، به عنوان مثال ، کد زیر را در فایل functions.php خود اضافه می کنیم:

add_filter ( 'woocommerce_account_menu_items', 'uw_rename_downloads' );
 
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 ){
 
	// 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 ){
 
	$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.';
 
}

توجه: پس از ایجاد این تغییر، باید به “تنظیمات>پیوندهای یکتا” بروید و فقط روی دکمه ذخیره تغییرات کلیک کنید.

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

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

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

منابع لاتین
_ HamyarWp _ Silva
تیم تولید محتوا _ آلتیمیت وردپرس
ما در تیم تولید محتوای آلتیمیت وردپرس، سخت در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را برای شما فراهم کنیم. محتوای این صفحه توسط یوسف حسینی کنترل و بررسی خواهد شد.

4 comments

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

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

    با تشکر از راهنمایی تون

    1. با سلام خدمت شما , غالبا با افزودن یا حذف منوهای کاربری ووکامرس با روش مذکور css های صفحه شما تغییری نخواهد کرد چون حذف منو از طریق php و قلاب های فیلتر ووکامرس اعمال میشه و ربطی به css نداره ( البته در 95 % شرایط که اون 5% باقیمانده کمی پیچیده هست)
      پاسخ 1 : خب همونطور که در مقاله بالا توضیح دادیم از طریق افزونه میتونید اینکار رو اعمال کنید.
      پاسخ 2 : مقاله بروزرسانی شد لطفا قسمت انتهای مقاله را بخوانید.

دیدگاهتان را بنویسید