فهرست مطالب
در طراحی فروشگاه اینترنتی با المنتور و ووکامرس، گاهی لازم داریم به کاربر نشان بدهیم که چند محصول در یک دستهبندی خاص وجود دارد یا اینکه در یک نتیجه جستجو دقیقاً چند محصول پیدا شده است.
در این قسمت از دوره آموزش طراحی سایت شبیه دیجی کالا با المنتور، نحوه نمایش تعداد محصولات دسته بندی و نتایج جستجو در ووکامرس را یاد میگیریم.
مراحل نمایش تعداد محصولات دسته بندی و نتایج جستجو در ووکامرس
مرحله ۱: افزودن کد به سایت
ابتدا باید کد کوتاه زیر را در سایت قرار بدهیم:
- وارد پیشخوان وردپرس شوید.
- به مسیر نمایش > ویرایشگر پوسته بروید.
- کد را در فایل
functions.phpقالب فرزند (Child Theme) یا افزونه WPcode قرار دهید:
- در صفحه جستجو، کد تعداد نتایج جستجوی ووکامرس را نمایش میدهد.
- در صفحه آرشیو یک دستهبندی محصول، کد تعداد محصولات همان دسته را برمیگرداند.
- در سایر صفحات خروجی خالی است.
مرحله ۲: ساخت قالب در المنتور
حالا که شورتکد آماده است، وقت آن رسیده که آن را در یک صفحه یا قالب المنتور استفاده کنیم.
- به مسیر المنتور > قالبها بروید و قالب مورد نظر خود (مثلاً آرشیو محصول یا صفحه جستجو) را ویرایش کنید. (آموزش ساخت صفحه آرشیو ووکامرس با المنتور)
- از لیست ابزارکها، ویجت کد کوتاه (Shortcode) را بکشید و در مکان دلخواه قرار دهید.
- در باکس شورت کد، این کد را وارد کنید:
[mt_product_count_current_category] - صفحه را ذخیره و منتشر کنید.
مرحله ۳: استایل دهی با المنتور
یکی از مزیت های المنتور این است که میتوانید استایل دلخواه به خروجی شورتکد بدهید:
- تغییر فونت، رنگ و سایز عدد
- افزودن پسزمینه یا آیکون
- چینش وسط، چپ یا راست
مثلاً میتوانید یک متن ترکیبی مثل «تعداد محصولات این دسته: [کد]» بسازید:
- یک ویجت سربرگ قرار دهید.
- از بخش برچسب های پویا ، کد کوتاه را از لیست انتخاب کرده و مقدار
[mt_product_count_current_category]را وارد کنید. - از بخش پیشرفته تنظیمات کد کوتاه در قسمت فیلد بعد ، مقدار “کالا” را “محصول” را به سلیقه خود بنویسید.
نتیجه نهایی
- در صفحه آرشیو هر دستهبندی، تعداد محصولات آن دسته نمایش داده میشود.
- در صفحه جستجوی محصولات، تعداد نتایج جستجو به صورت خودکار نشان داده میشود.
این روش بدون نیاز به افزونه های سنگین است و با همه قالب های وردپرس و نسخههای ووکامرس سازگار است.
💡 نکات مهم
- بهتر است کد را در قالب فرزند Hello Elementor Child یا افزونه هایی مثل WPcode قرار دهید تا با بروزرسانی قالب از بین نرود.
- برای استایل های پیچیده تر میتوانید شورتکد را در یک کانتینر فلکس باکس قرار داده و از قابلیتهای طراحی المنتور استفاده کنید.
با همین شورت کد ساده و المنتور، حالا میتوانید تجربه کاربری بهتری به مشتریانتان بدهید و آمار محصولات را به صورت زنده نمایش دهید.
کاربران گرامی:
برای مشاهده آموزش کامل این ویدیو ، ابتدا باید عضو دوره جامع طراحی فروشگاه اینترنتی مشابه دیجی کالا باشید ، پس از عضویت ، براحتی دسترسی کامل به محتوای آموزشی کامل ویدیو و همچنین فایل ها و کدهای آماده دوره را خواهید داشت.
