ساخت صفحه محصولات در وردپرس

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

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

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

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

آموزش ساخت صفحه محصولات

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

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

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

شما باید با توجه به محصولی که می فروشید، صفحه مورد نظر را طوری طراحی کنید که هم جذابیت بصری داشته باشد و هم اطلاعات لازم را به مشتری ارائه دهد.

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

برای طراحی صفحه محصول وردپرس به چه افزونه هایی نیاز دارم؟

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

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

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

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

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

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

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

قدم اول – از صفحه محصول ووکامرس خود یک قالب را انتخاب کنید

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

• وارد پنل داشبورد سایت وردپرس خود شوید
• از منوی سمت چپ، به بخش تنظیمات پلاگین المنتور (Elementor) بروید
• در بین گزینه های المنتور روی گزینه Template کلیک کنید
• مانند تصویر زیر، روی Add New در قسمت بالایی کلیک کنید تا قالب صفحه محصول ووکامرس خود را انتخاب کنید

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

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

روی دکمه insert کلیک کنید تا وارد فرایند طراحی و ویرایش صفحه محصولات خود شوید.

قدم دوم – قالب از پیش ساخته را ویرایش کنید

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

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

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

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

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

فیلم آموزش طراحی قالب وردپرس از پایه

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

قدم سوم – رنگ پس زمینه را عوض کنید

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

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

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

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

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

قدم چهارم – توضیح محصولات را ویرایش کنید

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

• توضیحات کوتاه
• تب های اطلاعات محصول

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

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

قدم پنجم – دکمه افزودن به سبد خرید را اضافه کنید

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

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

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

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

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

قدم ششم – ابزارهای کاربردی به صفحه محصولات اضافه کنید

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

در ادامه ما مهم ترین ویجت ها یا همان ابزارک های کاربردی در صفحه یک محصول تجاری را معرفی می کنیم:

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

در تصویر زیر نمونه ای از هر کدام از این ویجت ها را برای یک محصول می بینیم:

قدم هفتم – امکان نمره دهی به محصولات را اضافه کنید

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

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

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

شما می توانید بخش نمره دهی را نیز با استفاده از امکانات ادیتور افزونه Elementor ویرایش کنید و رنگ، قالب، فونت، اندازه و محل قرارگیری آن را تنظیم کنید.

قدم هشتم – تغییرات را در دستگاه های مختلف امتحان کنید

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

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

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

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

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

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

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

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

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

دوره آموزش وردپرس WordPress