طراحی سایت

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

صفحه فروشگاه ووکامرس را سفارشی کنید:

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

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

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

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

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

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

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

جدول محتوا

  • ایجاد صفحه فروشگاه ووکامرس
  • طراحی صفحه فروشگاه ووکامرس با بلوک های گوتنبرگ
  • طراحی صفحه فروشگاه ووکامرس با استفاده از کد کوتاه
  • تغییر صفحه “خرید” به صفحه اصلی خود
  • سفارشی کردن صفحه فروشگاه با فروشگاه
  • سفارشی کردن صفحه فروشگاه فروشگاه ووکامرس شما
  • پاورپک ویترین فروشگاه
  • تم های کودک ویترین فروشگاه
  • راه اندازی صفحه اصلی وب سایت با محصولات ویژه با استفاده از الگوی فروشگاه
  • سفارشی کردن صفحه فروشگاه WooCommerce با استفاده از Elementor

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

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

به عنوان مثال، صفحه تسویه حساب، گزینه های پرداخت را ارائه می دهد، صفحه سبد خرید موارد اضافه شده به سبد را نشان می دهد، و صفحه فروشگاه همه محصولات شما را نمایش می دهد. در نتیجه، وقتی محصولاتی را به وب‌سایت خود اضافه می‌کنید، فوراً به صفحه «خرید» منتقل می‌شوند.

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

  1. ماوس را روی WooCommerce در داشبورد خود نگه دارید و “تنظیمات” را انتخاب کنید.
  2. پس از جابجایی به برگه «محصولات» در زیر برگه «عمومی» بمانید.
  3. گزینه اول به شما این امکان را می دهد که صفحه فروشگاه خود را مشخص کنید.
  4. منوی کشویی به شما امکان می دهد یک صفحه را انتخاب کنید.
تنظیمات WooCommerce برای صفحه فروشگاه.

همچنین می‌توانید عملکرد سبد خرید خود را تغییر دهید و یک عکس نگهدارنده اضافه کنید. منطقه “افزودن به سبد خرید” شامل دو گزینه درست در زیر تنظیمات صفحه “خرید” است. اگر می‌خواهید مشتریان شما وقتی کالایی را به سبد خرید اضافه می‌کنند، به صفحه سبد خرید هدایت شوند، گزینه «پس از افزودن موفقیت‌آمیز به صفحه سبد خرید تغییر مسیر دهید» را فعال کنید. اگر می خواهید گزینه “افزودن به سبد خرید” را برای خرید صفحات آرشیو ارائه دهید، گزینه “فعال کردن دکمه های افزودن به سبد خرید AJAX در بایگانی ها” را فعال نگه دارید.

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

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

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

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

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

ویرایش صفحه فروشگاه

مرحله 2: با Block Editor یک Layout ایجاد کنید

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

هنگامی که به دنبال بلوک در ویرایشگر بلاک می‌گردید، به خاطر داشته باشید که بلوک‌های WooCommerce منطقه خاص خود را دارند! این ها می توانند برای نمایش دسته بندی های مختلف محتوای مرتبط با فروشگاه استفاده شوند. به سادگی یکی را انتخاب کنید و روی طرح خود قرار دهید. این بلوک ها برای ایجاد یک صفحه فروشگاه حرفه ای با استفاده از WooCommerce و Gutenberg ضروری هستند. بسته به میزان محتوایی که می‌خواهید به صفحه فروشگاه خود اضافه کنید، می‌توانید بلوک‌های آرام‌بخش را زیر یکدیگر اضافه کنید. برای مثال، می‌توانید بلوک «محصولات ویژه» را بردارید و آن را به بالای صفحه بکشید، همانطور که در زیر مشاهده می‌کنید. 

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

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

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

پس از افزودن بلوک “تصویر ویژه”، صفحه فروشگاه چگونه به نظر می رسد.

نمای جلوی بلوک ویژه

مرحله 3: طراحی خود را شخصی کنید

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

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

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

در اینجا پیش نمایشی از صفحه آزمایشی “فروشگاه” من است

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

مرحله 4: کار خود را بررسی کنید و کلیدهای پایانی را اضافه کنید

اکنون زمان ذخیره و آزمایش فروشگاه برای اطمینان از راه‌اندازی و راه‌اندازی آن فرا رسیده است. برای ذخیره کار خود، دکمه «انتشار» را در گوشه سمت راست بالای صفحه انتخاب کنید. نگران نباشید، بازدیدکنندگان سایت شما تا بعداً نمی توانند صفحه را ببینند. “/shop” را بعد از URL در قسمت جلویی وب سایت خود اضافه کنید. اکنون فروشگاه شما باید در مرورگر شما قابل مشاهده باشد.

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

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

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

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

کد کوتاه برای افزودن محصولات به صفحه فروشگاه شما یکی از مهمترین آنهاست. کد کوتاه در قالب کلمه ای است که در داخل پرانتز قرار گرفته است، برای مثال [ products]. می‌توانید در نسخه‌های وردپرس بالاتر از 3.2 تغییراتی مانند [ featured_products]، [ recent_products] به کد کوتاه اضافه کنید.

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

بلوک کد کوتاه در ویرایشگر بلوک گوتنبرگ.
کد کوتاه "پرفروش ترین محصول" در صفحه فروشگاه.

در زیر، می توانید ببینید که چگونه best_selling_productsکد کوتاه [ ] در قسمت جلوی وب سایت ظاهر می شود.

نمونه ای از کد کوتاه "پرفروش ترین محصول" در صفحه فروشگاه.

تغییر صفحه “خرید” به صفحه اصلی خود

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

یک ویژگی روانشناختی به نام «اجتناب از تصمیم گیری»، که تمایل افراد به اجتناب از تصمیم گیری طولانی مدت است، بر فشار می افزاید.

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

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

  1. ماوس را روی «تنظیمات» در داشبورد وردپرس خود نگه دارید و «خواندن» را انتخاب کنید.
  2. در تنظیمات نمایش صفحه اصلی به جای «جدیدترین پست‌های شما» به «یک صفحه ثابت» بروید.
  3. صفحه “خرید” خود را که می خواهید به عنوان صفحه اصلی شما نشان داده شود، از منوی کشویی کنار “صفحه اصلی” انتخاب کنید.
خواندن تنظیمات  این به شما امکان می دهد آنچه را که در صفحه اصلی نمایش داده می شود به نمایش بگذارید.

URL اسلاگ (به عنوان مثال www.wooshop.com/ shop ) برای صفحه فروشگاه شما پس از این مرحله ناپدید می شود و باعث می شود که نسخه ‘.com’ یا’.in’ پیوند وب سایت شما مستقیماً به صفحه فروشگاه شما هدایت شود. 

همچنین می توانید با رفتن به Appearance > Customize > Homepage Settings به همین هدف دست یابید. در زیر می توانید یک نمونه تصویری از آن را مشاهده کنید.

سفارشی ساز WooCommerce 'تنظیمات صفحه اصلی'
گزینه های «تنظیمات صفحه اصلی» سفارشی ساز WooCommerce.

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

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

داشبورد وردپرس سریعترین راه برای نصب Storefront است.

  • برای افزودن یک طرح زمینه جدید، به Appearance > Themes > Add New بروید .
  • در کادر جستجو عبارت “storefront” را تایپ کرده و enter را فشار دهید.
  • ماوس خود را روی اسکرین شات ویترین فروشگاه نگه دارید.
  • گزینه “نصب” را انتخاب کنید.
  • تم را به همان روشی که هر تم وردپرس دیگر را فعال می کنید، فعال کنید.
فروشگاه قالب وردپرس.

می توانید با رفتن به داشبورد وردپرس > ظاهر > فروشگاه ، راه اندازی فروشگاه خود را با Storefront شروع کنید . هنگامی که روی «بیایید برویم» کلیک کردید، یک تور راهنما در مورد نحوه استفاده از فروشگاه با جزئیات شروع می‌شود. اگر می‌خواهید از این تور صرفنظر کنید، ما می‌توانیم با ارائه خلاصه‌ای از نحوه انجام آن به شما کمک کنیم.

نصب تم فروشگاه

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

آموزش ویترین فروشگاه.

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

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

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

مراحل زیر را انجام دهید:

  • در داشبورد خود، نشانگر را روی «ظاهر» نگه دارید و «سفارشی کردن» را انتخاب کنید.
سفارشی کردن تم فروشگاه
  • از لیست عناصر وب سایت قابل تنظیم، “WooCommerce” را انتخاب کنید. سپس «کاتالوگ محصولات» را از منوی کشویی انتخاب کنید.
تنظیمات کاتالوگ محصولات WooCommerce Customizer.
  • انتخاب کنید که آیا می‌خواهید صفحه فروشگاه شما موارد، دسته‌ها یا هر دو را از اولین منوی کشویی نمایش دهد.
گزینه های تنظیمات «کاتالوگ محصولات» سفارشی ساز WooCommerce
  • با استفاده از سومین منوی کشویی می‌خواهید کالاهای شما در صفحه فروشگاه چگونه مرتب شوند: بر اساس نام، محبوبیت، رتبه‌بندی یا قیمت، انتخاب کنید.
  • گزینه‌های «محصولات در هر ردیف» و «ردیف در هر صفحه» به شما امکان می‌دهند تعداد کالاها در هر ردیف و ردیف‌های هر صفحه را برای صفحه فروشگاه خود مشخص کنید. این دو انتخاب با هم ترکیب می شوند تا به شما امکان می دهند مقدار کالاهای نشان داده شده در کاتالوگ خود را افزایش یا کاهش دهید.
  • به صفحه قبل بازگردید و “تصاویر محصول” را انتخاب کنید.
تنظیمات «تصاویر محصول» سفارشی ساز WooCommerce.
  • شما می توانید اندازه و نسبت ابعاد تصاویر کوچک محصول خود را در این بخش تغییر دهید.

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

پاورپک ویترین فروشگاه

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

  1. از حساب WooCommerce خود، فایل Powerpack.zip Storefront را دانلود کنید.
  2. به Admin WordPress > Plugins > Add New بروید و فایل افزونه ای را که دانلود کرده اید با استفاده از Choose File آپلود کنید.
  3. افزونه را نصب و فعال کنید.

Powerpack Storefront با Customizer WordPress ترکیب می شود. این یک منوی جدید به نام Powerpack درست بالای منوهای پیش فرض ایجاد می کند.

  • از منوی کشویی Appearance > Customize را انتخاب کنید .
تب پاورپک ویترین فروشگاه.
  • هنگامی که Powerpack را انتخاب می کنید، یک منوی جدید ظاهر می شود.
گزینه های تنظیمات «پاورپک ویترین فروشگاه».

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

  • Designer – به شما امکان می دهد روی هر بخش در صفحه کلیک کنید و طراحی عنصر را از جمله نوع فونت، رنگ، اندازه، سبک و غیره سفارشی کنید.
  • طرح بندی – می توانید عرض صفحه را تنظیم کنید و از یک قاب محتوا در تنظیمات طرح بندی استفاده کنید.
  • پرداخت – به شما امکان می دهد موقعیت و طرح بندی منوی پرداخت را سفارشی کنید.
  • سربرگ – می‌توانید از سفارشی‌ساز سرصفحه برای جابجایی و تنظیم مجدد اجزای منوی سرصفحه استفاده کنید.
  • پاورقی – در دستگاه هایی با نمایشگرهای کوچکتر، می توانید نوار پاورقی را فعال یا پنهان کنید.
  • صفحه اصلی – این گزینه ها فقط برای صفحاتی اعمال می شود که از الگوی صفحه اصلی استفاده می کنند.
  • جزئیات محصول – می توانید طرح بندی را تغییر دهید و هر بخشی از صفحه محصول را با استفاده از تنظیمات تنظیم کنید.
  • پیام‌ها – رنگ‌های پس‌زمینه/متن مورد استفاده در پیام‌های اطلاعاتی WooCommerce ممکن است با استفاده از تنظیمات سفارشی شوند.
  • خرید – تنظیمات به شما امکان می دهد ویژگی های صفحه فروشگاه خود را شخصی سازی و مدیریت کنید.

افزونه Powerpack Storefront، همانطور که در بالا می بینید، سطح بیشتری از ویژگی ها را به تم معمولی Storefront اضافه می کند و به شخصی سازی هر یک از صفحات پیش فرض ایجاد شده توسط WooCommerce برای مطابقت با هویت برند شما کمک می کند. افزونه Storefront Powerpack 59 دلار قیمت دارد و ارزش هر پنی را دارد زیرا یک جزء جدایی ناپذیر برای طراحی صفحه فروشگاه عالی است.

صفحه محصول پاورپک فروشگاهی با قیمت 59 دلار.

تم های کودک ویترین فروشگاه

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

همچنین می‌توانید تم‌های کودک را از ابتدا برای مطابقت با نیازهای خاص ایجاد کنید. این راهنمای عمیق در مورد نحوه ایجاد تم کودک فروشگاه WooCommerce را مرور کنید .

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

فروشگاه تم های کودک ویترین.

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

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

Storefront علاوه بر صفحات معمولی WooCommerce، دو طرح صفحه دیگر – Homepage و Full width – اضافه می کند. طراحی صفحه اصلی یک رویکرد عالی برای نمایش اقلام شما است، زیرا به مشتریان به محض ورود به فروشگاه شما یک نمای کلی از محصولات و دسته بندی محصولات شما ارائه می دهد.

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

  • مرحله 1: به داشبورد وردپرس > صفحات بروید و یک صفحه جدید به نام “صفحه اصلی” ایجاد کنید.
  • مرحله 2: مطالبی را اضافه کنید که دوست دارید بازدیدکنندگان شما در صفحه اصلی ببینند، مانند تصاویر پس‌زمینه و متن.
  • مرحله 3: هنگامی که صفحه را منتشر کردید، به “ویرایش سریع” در زیر صفحه ای که ایجاد کرده اید بروید.
ویرایش سریع صفحه وردپرس
  • مرحله 4: روی “Parent” کلیک کنید و “صفحه اصلی” را از منوی کشویی انتخاب کنید. 
  • مرحله 5: “صفحه اصلی” را از منوی کشویی “الگو” انتخاب کنید.
با الگوی "صفحه اصلی" صفحه اصلی را به صفحه فرود اصلی تبدیل کنید.

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

پیش نمایش قالب 'صفحه اصلی'.

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

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

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

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

  • عنوان آرشیو
  • آرشیو محصولات
  • توضیحات آرشیو
  • محصولات
  • WooCommerce Breadcrumbs
  • افزودن سفارشی به سبد خرید
  • صفحات ووکامرس
  • دسته بندی محصولات
  • منو سبد خرید
ابزارک های مهم صفحه فروشگاه توسط Elementor pro.
ابزارک های مهم صفحه فروشگاه توسط Elementor pro.

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

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

کیت های المنتور

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

برای دسترسی به کتابخانه کیت به پنل وردپرس > Templates > کتابخانه کیت بروید. سپس می توانید یکی را انتخاب کنید که به بهترین وجه نیازهای شما را برآورده می کند. کیت ها را می توان پس از وارد کردن کاملاً سفارشی کرد.

دسترسی به کتابخانه کیت Elementor.
کتابخانه کیت المنتور

برای استفاده از کیت، روی دکمه Apply Kit در سمت راست بالای صفحه کلیک کنید.

دکمه اعمال کیت برای المنتور.

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

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

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

نمونه صفحه فروشگاه Elementor Kit

Elementor Pro دارای تعداد زیادی از توابع مفید است، از جمله:

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

اگر به خرید Elementor Pro فکر می کنید، اکیداً به شما توصیه می کنیم که این کار را انجام دهید. قیمت Elementor pro سالانه 49 دلار برای یک سایت واحد است.

صفحه فروشگاه WooCommerce را با ShopEngine سفارشی کنید

ShopEngine یک سازنده Freemium WooCommerce است که برای بهبود ویژگی های WooCommerce طراحی شده است. دارای ویژگی های غنی است که برای ساخت فروشگاه WooCommerce شما ضروری است. با ShopEngine، می توانید تمام صفحات WooCommerce از جمله صفحه فروشگاه را بسازید و سفارشی کنید.

نحوه سفارشی کردن صفحه فروشگاه WooCommerce با ShopEngine

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

ایجاد یک الگوی صفحه فروشگاه: 

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

ShopEngine> Builder Template

پس از آن بر روی دکمه ” افزودن جدید ” کلیک کنید و نوار قالب بلافاصله با عناصر زیر ظاهر می شود:

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

قالب صفحه فروشگاه WooCommerce خود را با ShopEngine سفارشی کنید:

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

  • تگ HTML: برچسبی را که می خواهید برای عنوان بایگانی استفاده کنید انتخاب کنید.
  • Alignment: تراز را برای عنوان بایگانی خود از اینجا انتخاب کنید.
  • رنگ: رنگ مناسب را برای عنوان آرشیو خود انتخاب کنید.
  • تایپوگرافی: تایپوگرافی عنوان بایگانی خود را ویرایش کنید. از اینجا می توانید خانواده، اندازه فونت، ارتفاع خط، وزن را تغییر دهید.

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

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

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

  • تنظیمات طرح‌بندی: تنظیمات طرح‌بندی را برای محصولات بایگانی فعال یا غیرفعال کنید.
  • محصولات در هر ردیف: تعداد محصولاتی که در هر ردیف نشان داده می شود را انتخاب کنید.
  • ردیف در هر صفحه: تعداد ردیف هایی را که در هر صفحه نمایش داده می شود را انتخاب کنید.

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

نتیجه

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

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

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

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

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