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

44 بازدید
یکشنبه ۲۹ مرداد ۱۳۹۶
نحوه نمایش محصولات ووکامرس در قالب وردپرسReviewed by جواد نبوی on Aug 20Rating: 4.5

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

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

کد پایه

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

<?php
 $params = array('posts_per_page' => 5, 'post_type' => 'product');
 $wc_query = new WP_Query($params);
 ?>
 <?php if ($wc_query->have_posts()) : ?>
 <?php while ($wc_query->have_posts()) :
 $wc_query->the_post(); ?>
 /*start-product-content*/
 <?php the_title(); ?>
 /*end-product-content*/
 <?php endwhile; ?>
 <?php wp_reset_postdata(); ?>
 <?php else: ?>
 <p>
 <?php _e( 'No Products'); ?>
 </p>
 <?php endif; ?>

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

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

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

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

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

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

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

<?php the_title(); ?>

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

<?php
 $params = array('posts_per_page' => 5, 'post_type' => 'product');
 $wc_query = new WP_Query($params);
 ?>
 <ul>
 <?php if ($wc_query->have_posts()) : ?>
 <?php while ($wc_query->have_posts()) :
 $wc_query->the_post(); ?>
 <li>
 <h3>
 <a href="<?php the_permalink(); ?>">
 <?php the_title(); ?>
 </a>
 </h3>
 <?php the_post_thumbnail(); ?>
 <?php the_excerpt(); ?>
 </li>
 <?php endwhile; ?>
 <?php wp_reset_postdata(); ?>
 <?php else: ?>
 <li>
 <?php _e( 'No Products' ); ?>
 </li>
 <?php endif; ?>
 </ul>

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

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

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

<?php echo $product->get_price_html(); ?>

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

  • $product->get_sale_price() – قیمت حراج محصول را بدون مالیات نمایش می دهد.
  • $product->get_regular_price() – قیمت واقعی محصول را بدون مالیات نمایش می دهد.
  • $product->get_price() – قیمت فعال محصول را بدون مالیات نمایش میدهد (قیمت فعال یعنی اگر برای محصول قیمت حراج مشخص شده باشد همان را نمایش می دهد اما اگر مشخص نشده باشد قیمت واقعی را نشان می دهد).
  • $product->get_price_excluding_tax() – همانند تابع بالا، قیمت فعال محصول را بدون مالیات نشان می دهد..
  • $product->get_price_including_tax() – قیمت فعال محصول را همراه با مالیات نشان می دهد.
  • wc_price() – واحد پول را نشان می دهد (توابع بالا فقط قیمت محصول را به صورت عددی و بدون واحد نمایش می دهند، پس تابع معرفی شده در این قسمت حتما باید در بخش قیمت محصول به همراه توابع بالا درج شود).

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

<?php echo wc_price($product->get_price_including_tax()); ?>

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

<?php echo wc_price($product->get_sale_price()); ?>

نمایش آرای محصول

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

<?php echo $product->get_rating_html(); ?>

البته توجه داشته باشید که کد بالا از ساختار استاندارد ووکامرس استفاده کرده و خروجی نهایی اش محدود به کد html ای است که ووکامرس تولید می کند. برای شخصی سازی بیشتر باید از توابعی مانند get_rating_count() برای نشان دادن تعداد آرا و یا از get_average_rating() برای نمایش میانگین آرا و همچنین توابع دیگری که در مستندات ووکامرس موجود است استفاده کنید.

نمایش تعداد نقد (نظر) های یک محصول

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

<?php echo $product->get_review_count(); ?>

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

<a href="<?php the_permalink(); ?>#reviews"> Reviews: <?php echo $product->get_review_count(); ?> </a>

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

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

  • $product->is_on_sale() – برای نمایش محصولاتی که در حالت حراج هستند.
  • $product->is_featured() – نمایش محصولات ویژه.
  • $product->is_in_stock() – نمایش محصولات الصاق شده.
  • $product->is_sold_individually – برای محصولاتی که به صورت تکی فروخته می شوند نه به عنوان بخشی از یک مجموعه.
  • $product->is_downloadable() – برای نمایش محصولاتی که فقط دانلود می شوند.
  • $product->is_virtual() – محصولات مجازی که به صورت فیزیکی قابل فروش نیستند.

در مثال زیر میتوانید خیلی راحت نحوه استفاده از توابع بالا را ببینید:

<?php if($product->is_on_sale()) : ?>
 <strong>
 <?php _e('Sale', 'my-theme'); ?>
 </strong>
 <?php endif; ?>

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

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

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

<form class="cart" method="post" enctype="multipart/form-data">
 <input type="hidden" name="add-to-cart" value="<?php echo esc_attr($product->id); ?>">
 <button type="submit"> <?php echo $product->single_add_to_cart_text(); ?> </button>
 </form>

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

<form class="cart" action="<?php the_permalink() ?>" method="post" enctype="multipart/form-data">
 <input type="hidden" name="add-to-cart" value="<?php echo esc_attr($product->id); ?>">
 <button type="submit"><?php echo $product->single_add_to_cart_text(); ?></button>
 </form>

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

<form class="cart" action="<?php the_permalink() ?>" method="post" enctype="multipart/form-data">
 <div class="quantity">
 <input type="number" step="1" min="1" max="9" name="quantity" value="1" title="<?php _e('Szt.', 'my-theme'); ?>" class="input-text qty text" size="4">
 </div>
 <input type="hidden" name="add-to-cart" value="<?php echo esc_attr($product->id); ?>">
 <button type="submit"><?php echo $product->single_add_to_cart_text(); ?></button>
 </form>

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

تبلیغات

نویسنده (مدیر سایت)

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

پاسخ دهید

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