یکی از چالش‌های مدیران فروشگاه‌های اینترنتی، هدایت مشتریان به صفحات مهم مانند فرم‌های مشاوره، پیشنهادات ویژه، صفحات فرود، و تخفیف‌های خاص است. بسیاری از قالب‌های ووکامرس این قابلیت را ندارند، اما با این راهکار می‌توانید برای هر محصول یک دکمه سفارشی با متن، آیکن، رنگ، و لینک دلخواه ایجاد کنید.
این دکمه به‌طور مستقیم در صفحه محصول و کنار دکمه “افزودن به سبد خرید” نمایش داده می‌شود و فقط در صورتی که مقدار لینک وارد شده باشد، فعال خواهد شد. همچنین، قابلیت انتخاب آیکن از مجموعه‌های محبوب مانند Font Awesome، Bootstrap Icons، Material Icons و … وجود دارد تا طراحی دکمه مطابق برند شما باشد.
مزایای این قابلیت:
هدایت مشتریان به صفحات مهم افزایش نرخ تبدیل با لینک‌دهی هوشمند استایل‌دهی و سفارشی‌سازی کامل نمایش فقط در صورت نیاز، بدون تأثیر بر سایر محصولات
x
122
122
1
// افزودن یک متاباکس برای وارد کردن تنظیمات دکمه در صفحه ویرایش محصول ووکامرس2
function tav_custom_button_metabox() {3
add_meta_box(4
'tav_custom_button',5
__('تنظیمات دکمه سفارشی', 'tav-theme'), // عنوان متاباکس6
'tav_custom_button_metabox_callback', // تابعی که متاباکس را نمایش می•دهد7
'product', // نوع پست که متاباکس به آن اضافه می•شود (محصولات ووکامرس)8
'side', // محل نمایش در پنل ویرایش9
'high' // اولویت نمایش10
);11
}12
add_action('add_meta_boxes', 'tav_custom_button_metabox');13
14
// تابع برای نمایش فیلدهای تنظیمات دکمه در متاباکس15
function tav_custom_button_metabox_callback($post) {16
// دریافت مقادیر ذخیره•شده قبلی برای پر کردن فرم17
$button_text = get_post_meta($post->ID, '_tav_button_text', true);18
$button_url = get_post_meta($post->ID, '_tav_button_url', true);19
$button_icon = get_post_meta($post->ID, '_tav_button_icon', true);20
$button_color = get_post_meta($post->ID, '_tav_button_color', true);21
$button_radius = get_post_meta($post->ID, '_tav_button_radius', true);22
23
// افزودن nonce برای امنیت بیشتر هنگام ذخیره اطلاعات24
wp_nonce_field('tav_custom_button_nonce', 'tav_custom_button_nonce_field');25
26
?>27
<p>28
<label for="tav_button_text"><?php _e('متن دکمه:', 'tav-theme'); ?></label>29
<input type="text" id="tav_button_text" name="tav_button_text" value="<?php echo esc_attr($button_text); ?>" class="widefat">30
</p>31
<p>32
<label for="tav_button_url"><?php _e('لینک دکمه:', 'tav-theme'); ?></label>33
<input type="url" id="tav_button_url" name="tav_button_url" value="<?php echo esc_url($button_url); ?>" class="widefat">34
</p>35
<p>36
<label for="tav_button_icon"><?php _e('کلاس آیکن (مثلا fa fa-link):', 'tav-theme'); ?></label>37
<input type="text" id="tav_button_icon" name="tav_button_icon" value="<?php echo esc_attr($button_icon); ?>" class="widefat">38
</p>39
<p>40
<label for="tav_button_color"><?php _e('رنگ دکمه:', 'tav-theme'); ?></label>41
<input type="color" id="tav_button_color" name="tav_button_color" value="<?php echo esc_attr($button_color); ?>">42
</p>43
<p>44
<label for="tav_button_radius"><?php _e('بوردر رادیوس (px):', 'tav-theme'); ?></label>45
<input type="number" id="tav_button_radius" name="tav_button_radius" value="<?php echo esc_attr($button_radius); ?>" class="widefat">46
</p>47
<?php48
}49
50
// تابع برای ذخیره مقادیر وارد شده در متاباکس هنگام ذخیره محصول51
function tav_save_custom_button_metabox($post_id) {52
// بررسی nonce برای جلوگیری از حملات CSRF53
if (!isset($_POST['tav_custom_button_nonce_field']) || !wp_verify_nonce($_POST['tav_custom_button_nonce_field'], 'tav_custom_button_nonce')) {54
return;55
}56
57
// جلوگیری از ذخیره•سازی خودکار وردپرس که ممکن است داده•های ناقص ذخیره کند58
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {59
return;60
}61
62
// بررسی دسترسی کاربر برای ویرایش محصول63
if (!current_user_can('edit_post', $post_id)) {64
return;65
}66
67
// ذخیره داده•های ورودی از متاباکس در متادیتای محصول68
update_post_meta($post_id, '_tav_button_text', sanitize_text_field($_POST['tav_button_text']));69
update_post_meta($post_id, '_tav_button_url', esc_url($_POST['tav_button_url']));70
update_post_meta($post_id, '_tav_button_icon', sanitize_text_field($_POST['tav_button_icon']));71
update_post_meta($post_id, '_tav_button_color', sanitize_hex_color($_POST['tav_button_color']));72
update_post_meta($post_id, '_tav_button_radius', intval($_POST['tav_button_radius']));73
}74
add_action('save_post', 'tav_save_custom_button_metabox');75
76
// نمایش دکمه سفارشی در صفحه محصول ووکامرس77
function tav_display_custom_button() {78
global $post;79
80
// دریافت مقادیر تنظیم•شده برای دکمه81
$button_text = get_post_meta($post->ID, '_tav_button_text', true);82
$button_url = get_post_meta($post->ID, '_tav_button_url', true);83
$button_icon = get_post_meta($post->ID, '_tav_button_icon', true);84
$button_color = get_post_meta($post->ID, '_tav_button_color', true);85
$button_radius = get_post_meta($post->ID, '_tav_button_radius', true);86
87
// اگر لینکی وارد نشده باشد، دکمه نمایش داده نمی•شود88
if (!$button_url) {89
return;90
}91
92
// تعریف استایل دکمه به•صورت داینامیک93
$style = "background-color: {$button_color}; border-radius: {$button_radius}px; padding: 10px 20px; color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 5px;";94
?>95
<a href="<?php echo esc_url($button_url); ?>" class="tav-custom-button" style="<?php echo esc_attr($style); ?>">96
<?php if (!empty($button_icon)) : ?>97
<i class="<?php echo esc_attr($button_icon); ?>"></i>98
<?php endif; ?>99
<?php echo esc_html($button_text); ?>100
</a>101
<?php102
}103
// اضافه کردن دکمه سفارشی بعد از دکمه "افزودن به سبد خرید"104
add_action('woocommerce_after_add_to_cart_button', 'tav_display_custom_button', 35);105
106
// بارگذاری استایل•های مربوط به دکمه و فونت•های آیکن107
function tav_enqueue_custom_button_styles() {108
// بارگذاری Font Awesome برای استفاده از آیکن•ها109
wp_enqueue_style('tav-font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css', array(), '6.5.1', 'all');110
111
// بارگذاری Bootstrap Icons (اختیاری)112
wp_enqueue_style('tav-bootstrap-icons', 'https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css', array(), null, 'all');113
114
// اضافه کردن استایل•های اختصاصی برای دکمه115
wp_add_inline_style('tav-font-awesome', '116
.tav-custom-button:hover {117
opacity: 0.8;118
}119
');120
}121
add_action('wp_enqueue_scripts', 'tav_enqueue_custom_button_styles');122
