نمایش هوشمند محصولات ووکامرس در میان مطالب و توضیحات محصول (بدون افزونه)
تزریق خودکار محصولات مرتبط در پست ها؛ کد جادویی افزایش فروش + آموزش گام به گام
آیا تا به حال فکر کرده اید که چرا با وجود ترافیک بالای بخش وبلاگ سایتتان، فروش محصولاتتان تغییر چندانی نمی کند؟ کاربر می آید، مقاله را می خواند و می رود! مشکل اینجاست که شما در لحظه طلایی که کاربر نیاز به راهکار دارد، محصولتان را به او پیشنهاد نمی دهید.
استفاده از افزونه های سنگین برای نمایش محصولات مرتبط، سرعت سایت را نابود می کند. اما نگران نباشید؛ در این مقاله از اپیک پیکسل، ما یک راهکار کدنویسی شده، فوق سبک و هوشمند را به شما معرفی می کنیم که محصولات ووکامرس شما را دقیقاً در دل مقالات و توضیحات محصولات دیگر، به صورت کاملاً مرتبط و جذاب تزریق می کند. این یعنی افزایش نرخ تبدیل (CRO) بدون افت سرعت! دقیقا همین کد در وبسایت اپیک پیکسل استفاده شده !
چرا این روش معجزه می کند؟ (منطق پشت کد)
قبل از اینکه سراغ کد برویم، بیایید ببینیم این فانکشن اختصاصی چه ویژگی های منحصر به فردی دارد که آن را از پلاگین ها متمایز می کند:
- هوشمند و حساس به محتوا: برخلاف روش های قدیمی که فقط تعداد پاراگراف را می شمردند، این کد تعداد کاراکترها را محاسبه می کند. چه در موبایل باشید چه دسکتاپ، فاصله تبلیغات همیشه استاندارد است.
- تضمین موجودی انبار: این کد به صورت خودکار چک می کند که محصول موجود (In Stock) باشد. هیچ وقت کاربر را به صفحه محصول فروش فایل متوقف شده نمی فرستد.
- هدف گیری دقیق (Contextual):
- در صفحه محصول: محصولات هم دسته را پیشنهاد می دهد (Cross-sell).
- در صفحه مقاله: دسته بندی مقاله را می خواند و محصولی که نام آن دسته در عنوان یا توضیحاتش باشد را پیدا می کند (مثلاً اگر مقاله درباره “افزونه” است، محصولات “افزونه” را نشان می دهد).
- بدون تکرار: اگر مقاله طولانی باشد، محصولات تکراری نشان نمی دهد.
- تضمین نمایش: حتی اگر متن کوتاه باشد، حداقل یک محصول را نمایش می دهد.
چرا باید همین امروز این کد را استفاده کنید؟
استفاده از این روش در سایت های بزرگ محتوا محور، تجربه کاربری را به شدت بهبود می بخشد. کاربر حس نمی کند با تبلیغات بمباران شده است، بلکه احساس می کند یک پیشنهاد مکمل برای چیزی که در حال خواندنش است دریافت کرده.
افزونه WooCommerce Subscriptions اشتراک ویژه ووکامرس 6.3.2
دانلودآیا نیاز به قابلیت های پیچیده تری دارید؟
اگر سایت شما نیاز به سیستم های فروش پیشرفته تر، قالب های اختصاصی یا پلاگین های خاصی دارد که با این کدها قابل پیاده سازی نیست، پیشنهاد می کنیم حتماً سری به بخش محصولات ویژه اپیک پیکسل بزنید. ما در اپیک پیکسل ابزارهایی داریم که مدیریت سایت وردپرسی شما را متحول می کند.
گام اول: کد جادویی PHP (تزریق هوشمند)
این قطعه کد، مغز متفکر سیستم ماست. آن را کپی کرده و در فایل functions.php قالب خود (ترجیحاً در Child Theme) یا پلاگین های مدیریت کد مثل Code Snippets قرار دهید.
در صورت عدم نمایش کد ها بصورت دقیق فایل zip شامل کد ها دانلود کنید
add_filter( 'the_content', 'epicpixel_smart_product_injector' );
function epicpixel_smart_product_injector( $content ) {
// 1. بررسیهای اولیه و امنیتی
if ( ! is_singular( array( 'post', 'product' ) ) || ! class_exists( 'WooCommerce' ) ) {
return $content;
}
// --- تنظیمات: بعد از هر چند کاراکتر تبلیغ نشان دهد؟ ---
$char_threshold = 1500;
// 2. محاسبه هوشمند تعداد محصولات مورد نیاز
$content_length = mb_strlen( strip_tags( $content ) );
$products_needed = floor( $content_length / $char_threshold );
// تضمین نمایش حداقل یک محصول حتی در متون کوتاه
if ( $products_needed < 1 ) { $products_needed = 1; } // 3. کوئری محصولات (موجود + تصادفی + مرتبط) $args = array( 'post_type' => 'product',
'posts_per_page' => $products_needed,
'orderby' => 'rand',
'post_status' => 'publish',
'meta_query' => array(
array(
'key' => '_stock_status',
'value' => 'instock',
),
),
);
// شرطهای یافتن محصول مرتبط (Contextual)
if ( is_product() ) {
global $post;
$terms = get_the_terms( $post->ID, 'product_cat' );
$cat_ids = array();
if ( $terms ) {
foreach ( $terms as $term ) {
$cat_ids[] = $term->term_id;
}
}
$args['tax_query'] = array(
array(
'taxonomy' => 'product_cat',
'field' => 'term_id',
'terms' => $cat_ids,
),
);
$args['post__not_in'] = array( $post->ID );
} elseif ( is_singular( 'post' ) ) {
$categories = get_the_category();
if ( ! empty( $categories ) ) {
$search_keyword = $categories[0]->name;
$args['s'] = $search_keyword;
}
}
$product_query = new WP_Query( $args );
if ( ! $product_query->have_posts() ) {
wp_reset_postdata();
return $content;
}
$found_products = $product_query->posts;
$product_index = 0;
$products_count = count( $found_products );
// 4. تزریق محتوا بین پاراگرافها
// نکته: اینجا تگ پی را به صورت ایمن نوشتیم تا قالب بهم نریزد
$paragraphs = explode( '</p>', $content );
$new_content = '';
$chars_since_last_ad = 0;
$ad_shown_counter = 0;
foreach ( $paragraphs as $index => $paragraph ) {
if ( empty( trim( $paragraph ) ) ) continue;
$new_content .= $paragraph . '</p>';
$chars_since_last_ad += mb_strlen( strip_tags( $paragraph ) );
if ( $chars_since_last_ad > $char_threshold && $product_index < $products_count ) { $product_html = epicpixel_get_product_html( $found_products[ $product_index ] ); $new_content .= $product_html; $chars_since_last_ad = 0; $product_index++; $ad_shown_counter++; } } // 5. شرط حداقل یکبار نمایش if ( $ad_shown_counter == 0 && isset( $found_products[0] ) ) { $new_content .= epicpixel_get_product_html( $found_products[0] ); } wp_reset_postdata(); return $new_content; } // تابع کمکی برای ساخت ظاهر HTML function epicpixel_get_product_html( $post_object ) { $product = wc_get_product( $post_object->ID );
if ( ! $product ) return '';
$html = '<div class="epicpixel-inline-product">';
$html .= ' <div class="g-prod-thumb">' . $product->get_image( 'thumbnail' ) . '</div>';
$html .= ' <div class="g-prod-info">';
$html .= ' <h4 class="g-prod-title">' . $product->get_name() . '</h4>';
$html .= ' <a href="' . $product->get_permalink() . '" class="g-prod-btn">مشاهده و دانلود</a>';
$html .= ' </div>';
$html .= '</div>';
return $html;
}
افزونه ایمپروود سیل بجز فور ووکامرس 4.4.2 Improved Sale Badges for WooCommerce
دانلود
گام دوم: زیباسازی با CSS (طراحی مدرن و ریسپانسیو)
حالا باید به این باکس جان ببخشیم. کد زیر را به فایل style.css یا بخش CSS سفارشی در تنظیمات قالب اضافه کنید. این استایل از تکنولوژی Flexbox استفاده می کند تا در موبایل و دسکتاپ عالی به نظر برسد
/* باکس اصلی نگهدارنده */
.epicpixel-inline-product {
display: flex;
align-items: center;
background: #ffffff;
border: 2px dashed #e0e0e0;
border-radius: 12px;
padding: 15px;
margin: 40px 0;
gap: 20px;
transition: all 0.3s ease;
}
/* افکت هاور */
.epicpixel-inline-product:hover {
border-color: #27ae60;
box-shadow: 0 10px 20px rgba(0,0,0,0.08);
transform: translateY(-3px);
}
/* تصویر محصول */
.g-prod-thumb img {
width: 90px;
height: 90px;
border-radius: 8px;
object-fit: cover;
margin: 0 !important;
}
/* اطلاعات محصول */
.g-prod-info {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 15px;
}
.g-prod-title {
margin: 0 !important;
font-size: 18px;
font-weight: 700;
color: #333;
line-height: 1.4;
}
/* دکمه دانلود */
.g-prod-btn {
background-color: #27ae60;
color: #fff !important;
padding: 10px 25px;
border-radius: 50px;
text-decoration: none;
font-weight: bold;
font-size: 14px;
box-shadow: 0 4px 10px rgba(39, 174, 96, 0.3);
transition: background-color 0.2s;
}
.g-prod-btn:hover {
background-color: #219150;
transform: scale(1.05);
}
/* ریسپانسیو (موبایل) */
@media (max-width: 600px) {
.epicpixel-inline-product {
flex-direction: column;
text-align: center;
}
.g-prod-info {
flex-direction: column;
width: 100%;
}
.g-prod-btn {
width: 100%;
display: block;
}
}
