نمایش ویژیگی محصولات ووکامرس مشابه دیجی کالا
آیا به دنبال راهی زیبا و متفاوت برای نمایش مشخصات محصولات فروشگاه ووکامرس خود هستید؟ آیا میخواهید صفحات محصول حرفهایتر و کاربرپسندتر به نظر برسند؟ در این مقاله یک شورت کد کاربردی برای نمایش ویژگیهای محصول ووکامرس به صورت جعبههای شیک و مرتب معرفی میکنیم
function my_product_features_boxed_shortcode() {
global $product;
if ( ! $product ) {
$product = wc_get_product( get_the_ID() );
}
if ( ! $product ) {
return '';
}
$attributes = $product->get_attributes();
if ( empty( $attributes ) ) {
return '';
}
ob_start();
?>
get_visible() ) {
continue;
}
if ( $attribute->is_taxonomy() ) {
$attribute_label = wc_attribute_label( $attribute->get_name() );
$terms = wp_get_post_terms( $product->get_id(), $attribute->get_name(), array( 'fields' => 'names' ) );
$attribute_values = implode( ', ', $terms );
} else {
$attribute_label = $attribute->get_name();
$attribute_values = implode( ', ', $attribute->get_options() );
}
if ( ! empty( $attribute_values ) ) {
?>
این شورت کد چه کاری انجام میدهد؟
این شورت کد پیشرفته به نام [my_boxed_product_features] تمام ویژگیهای محصول ووکامرس را استخراج کرده و آنها را در قالب جعبههای زیبا و مرتب نمایش میدهد. هر جعبه شامل دو بخش است:
- عنوان ویژگی: نام ویژگی محصول (مانند رنگ، سایز، جنس و…)
- مقدار ویژگی: مقدار یا مقادیر مربوط به آن ویژگی (مانند قرمز، XL، چرم و…)
نتیجه کار، یک نمایش گرید (شبکهای) زیبا از تمام مشخصات محصول است که:
- به صورت خودکار در دستگاههای مختلف (موبایل، تبلت و دسکتاپ) تنظیم میشود
- از راست به چپ چیده میشود (مناسب برای سایتهای فارسی و عربی)
- با طراحی ساده و شیک، اطلاعات محصول را برجسته میکند
- فونت و رنگهای استاندارد دارد که با اکثر قالبها سازگار است
مزایای استفاده از نمایش جعبهای ویژگیهای محصول
این روش نمایش ویژگیهای محصول مزایای زیادی دارد:
- تجربه کاربری بهتر: اطلاعات محصول به شکلی سازمانیافته و خوانا ارائه میشوند
- ظاهر حرفهایتر: این نمایش مدرن، فروشگاه شما را از سایر فروشگاههای معمولی متمایز میکند
- افزایش نرخ تبدیل: دسترسی سریعتر به اطلاعات مهم محصول میتواند تصمیمگیری خرید را تسهیل کند
- سازگار با موبایل: طراحی واکنشگرا به صورت خودکار در دستگاههای مختلف تنظیم میشود
- افزایش زمان حضور در صفحه: جذابیت بصری باعث میشود کاربران زمان بیشتری را در صفحه محصول سپری کنند
نحوه پیادهسازی شورت کد در سایت ووکامرسی
برای استفاده از این شورت کد، باید:
- کد کامل ارائه شده در این مقاله را کپی کنید
- به داشبورد وردپرس خود بروید
- به بخش ظاهر (Appearance) و سپس ویرایشگر (Theme Editor) بروید
- فایل
functions.phpقالب فرزند (child theme) خود را انتخاب کنید - کد را در انتهای فایل اضافه کرده و ذخیره کنید
نکته مهم: حتماً از قالب فرزند (child theme) استفاده کنید تا در صورت بروزرسانی قالب، تغییرات شما از بین نرود.
نحوه استفاده از شورت کد
پس از افزودن کد به فایل functions.php، میتوانید از شورت کد [my_boxed_product_features] در یکی از این روشها استفاده کنید:
روش 1: استفاده در توضیحات محصول
سادهترین روش، اضافه کردن شورت کد در ویرایشگر توضیحات محصول است:
- به پنل مدیریت ووکامرس بروید
- محصول مورد نظر را برای ویرایش باز کنید
- در قسمت توضیحات محصول، عبارت
[my_boxed_product_features]را وارد کنید - تغییرات را ذخیره کنید
با این روش، جعبههای ویژگی در همان محلی که شورت کد را قرار دادهاید نمایش داده میشوند.
روش 2: استفاده در قالب محصول
اگر میخواهید این ویژگی در تمام محصولات نمایش داده شود، میتوانید آن را مستقیماً به قالب محصول اضافه کنید:
- فایل
single-product.phpقالب فرزند خود را باز کنید - در محل مناسب (معمولاً بعد از توضیحات محصول یا قبل از تبها)، کد زیر را قرار دهید:php