آیا میدانستید که فروش مکمل میتواند درآمد فروشگاه وردپرسی شما را تا ۳۰٪ افزایش دهد؟ بله فروش مکمل یکی از روشهای مؤثر برای افزایش ارزش میانگین سبد خرید و رشد فروش است.
با این حال بسیاری از صاحبان کسبوکار این فرصت ارزشمند را از دست میدهند نه اینکه چون کار پیچیدهای باشد، بلکه چون نمیدانند چطور باید آن را بهدرستی پیادهسازی کنند.
در این مقاله از سری آموزش های وردپرس وب آیدین، به شما نشان میدهیم که چطور میتوانید فراتر از امکانات پیشفرض ووکامرس بروید و یک استراتژی قوی برای فروش مکمل طراحی کنید.
فروش مکمل یا Cross Sell چیست؟
فروش مکمل در ووکامرس یک استراتژی فروش است که محصولات مرتبط با کالایی را که مشتری قصد خرید آن را دارد پیشنهاد میدهد.
این پیشنهادها معمولاً در صفحه محصول، داخل سبد خرید، هنگام تسویهحساب یا حتی از طریق ایمیلهای فروش مکمل نمایش داده میشوند.
هدف از این کار، افزایش ارزش متوسط هر سفارش با ارائه محصولات مکمل است.
برای مثال، اگر مشتری یک بسته قهوه تازه سفارش دهد، میتوانید محصولاتی مانند یک ماگ شیک یا یک بسته بیسکویت را پیشنهاد دهید.
نمایش حرفه ای محصولات مرتبط در قالب وردپرسی
اکثر قالب های حرفه ای وردپرس بخشی به نام محصولات مکمل دارند که زمانی که شما به یک محصول، چند محصول مکمل اضافه می کنید در صفحه محصول اول آن محصولات را نیز پیشنهاد می دهد، اما برخی از این قالب ها یا به صورت کلی جایگاهی برای معرفی محصول مکمل ندارند یا ظاهر آن بخش اصلا خوب نیست که کاربر به آن توجه کند و اینطور خواهد شد که فروش برای محصول مکمل رخ نخواهد داد.
به طور مثال به تصویر زیر توجه کنید، این تصویر یکی از محصولات دیجیکالا است و ما می خواهیم چنین ویژگی با چنین استایلی به صفحه محصول ووکامرسی خود اضافه کنیم.
کد فروش مکمل مشابه دیجیکالا
برای اضافه کردن کد زیر ابتدا از پیشخوان وردپرس وارد بخش ویرایش قالب شده و سپس کد زیر را به انتهای فایل Functions.php تزریق کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
function custom_cross_sells_shortcode() { if ( ! is_product() ) return; global $product; $cross_sells = $product->get_cross_sell_ids(); if ( empty($cross_sells) ) return ''; ob_start(); ?> <div class="custom-cross-sells-wrapper" style="margin-top: 20px;"> <?php foreach ( $cross_sells as $cross_id ) : $cross_product = wc_get_product( $cross_id ); $product_permalink = get_permalink( $cross_id ); ?> <div class="cross-sell-box" style="display:flex;justify-content:space-between;align-items:center;border:1px solid #ddd;border-radius:12px;padding:15px;margin-bottom:15px;box-shadow:0 1px 4px rgba(0,0,0,0.06);"> <div style="display:flex;align-items:center;gap:15px;"> <input type="checkbox" name="custom_cross_sells[]" value="<?php echo esc_attr($cross_id); ?>" style="width:18px;height:18px;accent-color:#2e90fa;" /> <a href="<?php echo esc_url($product_permalink); ?>" style="display:block;width:60px;height:60px;overflow:hidden;border-radius:8px;"> <?php echo $cross_product->get_image( 'woocommerce_thumbnail', ['style'=>'width:100%;height:100%;object-fit:contain;' ] ); ?> </a> <div style="font-size:14px;color:#333;line-height:1.6;"> <a href="<?php echo esc_url($product_permalink); ?>" style="color:#333;text-decoration:none;"> <?php echo $cross_product->get_name(); ?> </a> <div style="color:#777;font-size:13px;"><?php echo wc_price($cross_product->get_price()); ?></div> </div> </div> <a href="<?php echo esc_url($product_permalink); ?>" target="_blank" style="font-size:13px;color:#2e90fa;text-decoration:underline;">مشاهده جزئیات</a> </div> <?php endforeach; ?> </div> <script> document.addEventListener('DOMContentLoaded', function () { const form = document.querySelector('form.cart'); const checkboxes = document.querySelectorAll('input[name="custom_cross_sells[]"]'); if (!form) return; jQuery(document.body).on('added_to_cart', function(event, fragments, cart_hash, $button) { const selected = []; checkboxes.forEach(cb => { if (cb.checked) selected.push(cb.value); }); if (selected.length > 0) { jQuery.ajax({ type: 'POST', url: wc_add_to_cart_params.ajax_url, data: { action: 'add_cross_sell_items', items: selected }, success: function(response) { if (response.success) { jQuery.post(wc_add_to_cart_params.wc_ajax_url.toString().replace('%%endpoint%%', 'get_refreshed_fragments'), {}, function(data) { if (data && data.fragments) { jQuery.each(data.fragments, function(key, value) { jQuery(key).replaceWith(value); }); } }); } } }); } }); }); </script> <?php return ob_get_clean(); } add_shortcode( 'custom_cross_sells', 'custom_cross_sells_shortcode' ); add_action('wp_ajax_add_cross_sell_items', 'handle_ajax_add_cross_sell_items'); add_action('wp_ajax_nopriv_add_cross_sell_items', 'handle_ajax_add_cross_sell_items'); function handle_ajax_add_cross_sell_items() { if (isset($_POST['items']) && is_array($_POST['items'])) { foreach ($_POST['items'] as $product_id) { $product_id = intval($product_id); if ($product_id > 0) { WC()->cart->add_to_cart($product_id, 1); } } wp_send_json_success(); } else { wp_send_json_error(); } } #بخش نمایش function add_shortcode_to_woocommerce_product($content) { if (is_singular('product') && is_main_query()) { $shortcode_output = do_shortcode('[custom_cross_sells]'); // شورتکد خودتو اینجا بذار return $content . $shortcode_output; } return $content; } add_filter('the_content', 'add_shortcode_to_woocommerce_product'); |
و تغییرات را ذخیره و کش وردپرس را نیز پاک کنید.
جمع بندی
در این مقاله سعی کردیم فقط با اضافه کردن چند کد به فایل Functions.php قالب سایت ظاهر بخش فروش مکمل محصولات را تغییر دهیم تا این بخش دید خوبی از نگاه کاربر داشته باشد و در نهایت فروشگاه اینترنتی شما فروش بیشتری را تجربه کند.
