طراحی حساب کاربری ووکامرس با قالب Single المنتور پرو

نویسنده : امیرمحمد معلمی
دسته :
21 دیدگاه
آخرین بروزرسانی : 29 دی, 1399
طراحی حساب کاربری ووکامرس با افزونه المنتور

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

آنچه در این مطلب می خوانید

قالب Single چیست؟

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

ایجاد قالب Single

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

ابزارک لیست آیکون و Post Content

برای ساخت منو حساب کاربری می توانیم از ابزارک لیست آیکون استفاده کنیم. ویژگی خوب این ابزارک انتخاب آیکون برای هر عنوان می باشد که می تواند ظاهر خوبی به منو کاربری ما بدهد. این ابزارک را یه یکی از ستون های خود اضافه می کنیم. نمایش محتوای هر نوشته و یا برگه را باید با ابزارک Post Content به نمایش گذاشت. این ابزارک ضروری ترین ابزارک قالب Single می باشد.

سفارشی کردن ظاهر حساب کاربری

برای اینکه بتوانیم ظاهر حساب کاربری را تغییر دهیم. باید با استفاده از چند خط کد CSS بخش های مختلف حساب کاربری خود را توسعه دهیم. می توانید کد زیر را کپی کرده و از منو پیشخوان وردپرس > نمایش > سفارشی سازی بخش CSS اضافی کد های زیرا قرار دهید.

/*حذف منو ناوبری*/
.woocommerce-account .woocommerce-MyAccount-navigation {
    display: none;
}
/*تمام عرض کردن صفحه */
.woocommerce-account .woocommerce-MyAccount-content {
    float: right;
    width: 100%;
}
/*جدول سفارشات */
.woocommerce table.my_account_orders td, .woocommerce table.my_account_orders th {
    padding: 10px;
    text-align: center;
    background-color: #fff;
    border-color: #d0d0d0;
}
/*عناوین جدول سفارشات */
.woocommerce table.shop_table th {
    font-weight: 400;
}
/* دکمه جدول سفارشات */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
    font-weight: 300;
    color: #ffffff;
    background-color: #ff6700;
}
/*حذف حاشیه جدول سفارشات*/
table td, table th {
    border: 0px solid #bbb;
}
/*هدر آدرس حمل و نقل */
.woocommerce-account .addresses .title h3 {
    font-size: 18px;
}
/* بوردر فیلد مشخصات */
input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
    border: 1px solid #b7b7b7;
}
/* عنوان فیلد ها */
label {

    font-size: 14px;
    margin-bottom: 5px;
}
/* دکمه مشخصات کاربری */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
    margin-top: 20px;
}

نتیجه گیری

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

مطالعه بیشتر: طراحی حساب کاربری ووکامرس با با افزونه Woocommerce page builder