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

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

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

کد پایه

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

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

حالا چرا فقط عنوان محصولات را نشان می دهد؟ چون در بین دو کامنت /*start-product-content*/ و /*end-product-content*/ که مشخص کننده محل قرار گیری توابع محصول هستند، فقط تابع عنوان یعنی  قرار گرفته. اگر میخواهید چیز های دیگر مثل تصویر شاخص، توضیحات محصول، قیمت و … را اضافه کنید کافیست در همین محدوده آن ها را اضافه کنید. که در ادامه کدشان را معرفی می کنیم.

توجه: کد بالا را میتوانید در هر قسمت از سایت از index.php گرفته تا خود فایل تمپلیت ووکامرس قرار دهید.

توابع استاندارد نمایش محصولات ووکامرس

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

  • the_title() – نام محصول را نمایش می دهد.
  • the_excerpt() – خلاصه ای از توضیحات محصول را نمایش می دهد.
  • the_content() – توضیحات کامل محصول را نمایش می دهد.
  • the_permalink() – آدرس url محصول را نمایش می دهد.
  • the_ID() – شماره ID محصول را نمایش می دهد.
  • the_post_thumbnail() – تصویر شاخص محصول را نمایش می دهد.

توجه: برای وارد کردن توابع بالا توجه داشته باشید که آن ها را درون تگ های php بنویسید و علامت سمیکالون (;) را در انتهای تابع بگذارید. مثلا برای تابع نام محصول به این شکل آن را وارد کنید:

یک نمونه ساده و استاندارد از نمایش آخرین محصولات که جزئیاتی مانند نام محصول، تصویر شاخص و توضیحاتش را نمایش میدهد به شکل زیر است:

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

نمایش قیمت محصول

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

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

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

خب در نهایت میخواهیم یک دکمه “افزودن به سبد خرید” ایجاد کنیم. ساده ترین کدی که این کار را انجام میدهد به صورت زیر است:

البته من پیشنهاد میکنم از کد زیر به جای کد بالا استفاده کنید که عملکرد بهتری دارد:

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

امیدواریم این آموزش برای شما مفید بوده باشد. اگر سوال یا تجربه ای در این زمینه دارید در بخش نظرات با ما در میان بگذارید.

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

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

۵۶ ۲۸۴ ۲۸۴ (۰۲۱)