طراحی و تغییر صفحه فروشگاه ووکامرس با المنتور | افزونه | ویرایشگر گوتنبرگ

طراحی صفحه فروشگاه ووکامرس

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

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

صفحه فروشگاه ووکامرس چیست و چرا باید آن را سفارشی کنید؟

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

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

صفحه فروشگاه در درجه اول باید آنقدر جذاب باشد تا مشتریان را تشویق کند که آنچه ارائه می دهید را بررسی کنند؛ مشتریان به راحتی بتوانند آنچه به دنبال آن هستند، چه یک محصول مشخص که از قبل در ذهن آنها وجود دارد یا یک ایده مبهم را پیدا کنند. مشتریان در یافتن دکمه “افزودن به سبد خرید” و ورود به “صفحه پرداخت” هیچ مشکلی نداشته باشند. در نهایت، طراحی فروشگاه آنلاین باید به گونه ای باشد که برند شما را به اندازه محصولات واقعی که به نمایش گذاشته اید، منعکس کند. با استفاده از پلاگین پایه WooCommerce به تنهایی دستیابی به همه این اهداف تقریباً غیرممکن است.

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

صفحه پیش فرض فروشگاه ووکامرس به صورت زیر است:

طراحی صفحه فروشگاه ووکامرس

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

طراحی صفحه فروشگاه ووکامرس

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

به طور کلی سفارشی سازی و طراحی صفحه فروشگاه ووکامرس شما دو مزیت اصلی دارد:

  1. فروش بیشتر: طراحی سفارشی در ایجاد یک برند عالی و متقاعد کردن مشتریان بالقوه برای خرید از شما فوق العاده مهم است. با ایجاد یک طراحی بهتر برای صفحه فروشگاه WooCommerce ، شما یک مزیت بزرگ نسبت به رقبای خود (که احتمالاً محدود به طرح معمول صفحه فروشگاه هستند) خواهید یافت. شما تجربه کاربر را بهبود می بخشید، نام تجاری خود را بهتر بیان می کنید و محیطی را ایجاد می کنید که مشتریان ترغیب می شوند بارها و بارها به آن برگردند.
  1. سئو بسیار بهتر (بهینه سازی موتور جستجو): با ویرایش صفحه فروشگاه WooCommerce می توانید محتوایی غنی از کلمات کلیدی که مشتریان شما در گوگل جستجو می کنند را استفاده کنید.

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

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

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

راهنمای گام به گام ویرایش و طراحی صفحه فروشگاه ووکامرس

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

  • با ویرایشگر گوتنبرگ وردپرس
  • به صورت دستی
  • با استفاده از صفحه ساز (المنتور)
  • با استفاده از افزونه

در ادامه آموزش به بررسی هر سه روش می پردازیم.

سفارشی سازی و طراحی صفحه فروشگاه ووکامرس با ویرایشگر گوتنبرگ وردپرس

گام 1- یک برگه جدید ایجاد کنید

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

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

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

طراحی صفحه فروشگاه ووکامرس

گام 3- صفحه جدید فروشگاه ووکامرس خود را به عنوان صفحه پیش فرض تنظیم کنید.

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

طراحی صفحه فروشگاه ووکامرس

گام 4- صفحه قبلی فروشگاه را به صفحه جدید ریدایرکت کنید.

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

افزونه Redirection یکی از محبوب ترین افزونه های تغییر مسیر است که به این منظور می توانید از آن استفاده کنید.

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

اگر نمی خواهید از ریدایرکت 301 برای تغییر مسیر استفاده کنید، می توانید از افزونه پرمیوم Storefront Blocks استفاده کنید. پس از نصب و فعال سازی این افزونه، گزینه جدیدی تحت عنوان Custom Shop page redirect در صفحه فوق مشاهده خواهید کرد. کافی است صفحه جدید فروشگاه خود را در پنجره کشویی این قسمت انتخاب کنید.

گام 5- صفحه جدید فروشگاه را به فهرست اضافه کنید.

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

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

شخصی سازی صفحه فروشگاه ووکامرس به صورت دستی

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

گام 1: یک قالب فرزند ایجاد کنید

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

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

گام 2: ساختار فولدر را در چایلد تم خود ایجاد کنید

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

پس از ایجاد قالب فرزند و دسترسی به فایل های وردپرس، این مسیر را دنبال کنید: /wp-content/themes/your-theme.

فرض کنید شما یک قالب کودک برای قالب بیست بیست و یک ایجاد کرده اید. نام فولدر باید چیزی مانند twentytwentyone-child-theme باشد. روی آن کلیک کنید و فولدری به نام WooCommerce ایجاد کنید. پس از آن، فایلی به نام archive-product.php ایجاد کنید که فایل تمپلیت صفحه فروشگاه است. تا اینجا، یک صفحه فروشگاه ووکامرس در فروشگاه خود ایجاد کرده اید که خالی است. اکنون باید برای صفحه فروشگاه خود محتوا ایجاد کنید.

گام 3: پس از طراحی صفحه فروشگاه ووکامرس خود برای آن محتوا ایجاد کنید

بخاطر داشته باشید که هرچه در ویرایشگر متن archive-product.php می نویسید در صفحه فروشگاه ظاهر شده و مشتریان شما آن را مشاهده می کنند. در اینجا می توانید از کدگذاری استفاده کرده و صفحه فروشگاه خود را دیزاین کنید. اما اگر مطمئن نیستید که چگونه این کار را انجام دهید، به مرحله بعدی بروید.

گام 4: تمپلیت یک صفحه فروشگاه ایجاد کنید

شما می توانید به جای اینکه یک صفحه فروشگاه کامل را از ابتدا بسازید، از یک تمپلیت موجود استفاده کرده و آن را مطابق نیازهای فروشگاه خود سفارشی سازی کنید. برای این کار، به قالب اصلی برگشته و به دنبال فایل single.php یا index.php بگردید. اگر هر یک از این دو مورد را مشاهده کردید، آن را کپی کرده و در پوشه WooCommerce که در مرحله 2 ایجاد کرده بودید، پیست کنید. اگر هر دو فایل را مشاهده کردید، single.php را کپی کنید. سپس فایل archive-product.php را حذف کرده و نام فایلی که اکنون جای گذاری کرده اید را به archive-product.php تغییر دهید.

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

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

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

با استفاده از کد کوتا زیر می توانید محصولات را به ستون یا ردیف تقسیم کنید. به عنوان مثال اگر می خواهید محصولات خود را در 2 ستون با حداکثر 6 محصول نمایش دهید، باید کد زیر را در فایل archive-product.php یا هر فایلی که قالب شما برای وارد کردن محتوا از آن استفاده می کند، وارد کنید.

[products limit="6" columns="2"]

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

<?php echo do_shortcode (‘[products limit="6" columns="2"]’) ?>

تغییرات را ذخیره کنید.

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

سفارشی سازی و ویرایش صفحه فروشگاه ووکامرس با صفحه ساز (المنتور)

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

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

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

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

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

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

گام 1: یک صفحه لیست با صفحه ساز ایجاد کرده و آن را با محتوا پر کنید.

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

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

طراحی صفحه فروشگاه ووکامرس

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

طراحی صفحه فروشگاه ووکامرس

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

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

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

[featured_products]

[best_selling_products]

[top_rated_products]

[sale_products]

[product_table]

[recent_products]

[products]

برای اضافه کردن محصولات ویژه با استفاده از شورت کد به ترتیب زیر عمل کنید:

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

طراحی صفحه فروشگاه ووکامرس

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

[featured_products]

و آن را در بلوک کد کوتاه پیست کنید.

طراحی صفحه فروشگاه ووکامرس

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

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

[products limit="6" columns="2"]

کد کوتاه برای محصولی که اخیراً منتشر کرده اید به صورت زیر است:

[recent_products]

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

  • تنظیم تعداد ستون ها
  • محدود کردن تعداد محصولات نمایش داده شده

به عنوان مثال، اگر می خواهید 2 ستون با حداکثر 6 محصول نمایش دهید، از شورت کدی مانند زیر استفاده کنید:

[products limit="6" columns="2"]

کد کوتاه بسیار قدرتمند و استفاده از آن بسیار آسان است.

گام 2: پس از طراحی صفحه فروشگاه ووکامرس آن را صفحه پیش فرض خود قرار دهید.

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

  • URL صفحه تازه ایجاد شده خود را دریافت کنید. برای این کار کافی است به پیشخوان وردپرس بازگشته و URL برگه را از ویرایشگر وردپرس کپی کنید.
  • به مسیر نمایش » ویرایشگر پوسته بروید.
  • پس از آن، به صفحه ای منتقل خواهید شد که در آن قادر خواهید بود به فایل های توابع پوسته دسترسی پیدا کنید.
  • روی فایل functions.php کلیک کنید و کد زیر را در انتهای آن جای گذاری کنید:
add_action('template_redirect', 'quadlayers_redirect_woo_pages');function quadlayers_redirect_woo_pages()
{
    if (function_exists('is_shop') && is_shop()) {
        wp_redirect('https://www.yourdomain.com/shop/');
        exit;
    }
}
طراحی صفحه فروشگاه ووکامرس

توجه داشته باشید که کد را همانطور که هست، بدون اینکه چیزی حذف شود، کپی و پیست کنید و به یاد داشته باشید که URL خود را در (’wp_redirect(‘[yourURL]] جایگزین کنید. سپس فایل را به روز کنید. کار شما در این مرحله به پایان رسیده است.

سفارشی سازی و طراحی صفحه فروشگاه ووکامرس با افزونه

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

  • WooCustomizer (رایگان)
  • WooCommerce Product Table by WC Product Table  (رایگان و پرمیوم)
  • WooCommerce Product Table by Barn2  (پرمیوم)

افزونه StoreCustomizer

طراحی صفحه فروشگاه ووکامرس

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

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

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

افزونه جدول محصولات ووکامرس WooCommerce Product Table Lite by WC Table Product

طراحی صفحه فروشگاه ووکامرس

WooCommerce Product Table Lite یک افزونه عالی است که به شما امکان می دهد به راحتی چیدمان جدول محصولات را ایجاد کنید. این افزونه یکی از برترین ابزارها برای ویرایش و طراحی صفحه فروشگاه ووکامرس است.

WooCommerce Product Table یک ابزار فریمیوم است؛ به این معنی که یک نسخه رایگان با ویژگی های اساسی و یک برنامه حرفه ای دارد که شامل ویژگی های قدرتمندتری است. در ادامه آموزش نحوه استفاده از نسخه رایگان را به شما نشان داده سپس نکاتی در مورد برنامه حرفه ای ارائه خواهیم کرد.

گام 1: در هر صفحه یک WCPT ایجاد کنید.

ابتدا باید افزونه را نصب و فعال سازی کنید. پس از نصب و فعال سازی افزونه منوی جدیدی به نام Product Tablels به پیشخوان وردپرس اضافه خواهد شد. روی زیرمنوی Add New Table کلیک کنید. با کلیک روی این زیرمنو به صفحه ای وارد می شوید که در آن می توانید جدول ایجاد کنید.

طراحی صفحه فروشگاه ووکامرس

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

  • Table name: در این قسمت یک نام برای جدول خود وارد کنید.
  • Select products by category: در تب Query می توانید دسته بندی های خود را مشاهده کنید. کافی است یکی از آنها را برای جدول خود انتخاب کنید.
  • اطلاعات ستون: بعد به تب Columns بروید. در این تب باید جدول مورد نظر خود را بکشید. شما باید تصمیم بگیرید که چند ستون می خواهید و سپس هر کدام را طراحی کنید. WC Product Table نه تنها برای لپ تاپ بلکه برای ستون های تلفن و تبلت گزینه هایی را در اختیار شما قرار می دهد. بنابراین می توانید تمام گزینه هایی که می خواهید مانند هدینگ، تمپلیت سلول و طراحی (فونت، ترازبندی، رنگ فونت، رنگ پس زمینه و موارد دیگر) را برای هر نوع دستگاه تعیین کنید.

پس از ایجاد ستون های مورد نظر خود، روی ذخیره تنظیمات کلیک کنید. حال همه چیز آماده است.

گام 2: جدول را در صفحه جدید پیست کنید.

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

توجه داشته باشید که در ویرایشگر گوتنبرگ وردپرس باید این کار را از طریق بلوک کد کوتاه انجام دهید.

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

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

گام 3: مشتریان را به صفحه جدید فروشگاه خود هدایت کنید

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

افزونه Redirection یکی از محبوب ترین افزونه های تغییر مسیر است که به این منظور می توانید از آن استفاده کنید.

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

اگر نمی خواهید از ریدایرکت 301 برای تغییر مسیر استفاده کنید، می توانید از نسخه Pro افزونه WooCommerce Product Table استفاده کنید. با استفاده از نسخه Pro علاوه بر دسترسی به ویژگی های پیشرفته می توانید  ویژگی Archive Override را هم داشته باشید. با استفاده از این قابلیت می توانید شبکه های پیش فرض ووکامرس را با جداول محصول خود جایگزین کنید و این کار را نه تنها در صفحه فروشگاه بلکه در هر صفحه بایگانی مانند دسته ها، برچسب ها، جستجو و غیره جایگزین کنید.

افزونه WooCommerce Product Table by Barn2

طراحی صفحه فروشگاه ووکامرس

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

جمع بندی

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

امیدواریم این آموزش مورد توجه و استفاده شما قرار گرفته باشد.

درباره ی مینا قدسی

مطلب پیشنهادی

افزودنی های فرم تماس 7

افزودنی های جانبی فرم تماس 7 | افزونه های Contact Form 7

افزونه فرم تماس 7 یکی از بهترین افزونه های فرم ساز وردپرس است که با …

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *