یکی از چالشهای مدیران فروشگاههای اینترنتی، هدایت مشتریان به صفحات مهم مانند فرمهای مشاوره، پیشنهادات ویژه، صفحات فرود، و تخفیفهای خاص است. بسیاری از قالبهای ووکامرس این قابلیت را ندارند، اما با این راهکار میتوانید برای هر محصول یک دکمه سفارشی با متن، آیکن، رنگ، و لینک دلخواه ایجاد کنید.
🔹 این دکمه بهطور مستقیم در صفحه محصول و کنار دکمه “افزودن به سبد خرید” نمایش داده میشود و فقط در صورتی که مقدار لینک وارد شده باشد، فعال خواهد شد.
🔹 همچنین، قابلیت انتخاب آیکن از مجموعههای محبوب مانند Font Awesome، Bootstrap Icons، Material Icons و … وجود دارد تا طراحی دکمه مطابق برند شما باشد.
💡 مزایای این قابلیت:
✔ هدایت مشتریان به صفحات مهم
✔ افزایش نرخ تبدیل با لینکدهی هوشمند
✔ استایلدهی و سفارشیسازی کامل
✔ نمایش فقط در صورت نیاز، بدون تأثیر بر سایر محصولات
// افزودن یک متاباکس برای وارد کردن تنظیمات دکمه در صفحه ویرایش محصول ووکامرس function tav_custom_button_metabox() { add_meta_box( 'tav_custom_button', __('تنظیمات دکمه سفارشی', 'tav-theme'), // عنوان متاباکس 'tav_custom_button_metabox_callback', // تابعی که متاباکس را نمایش میدهد 'product', // نوع پست که متاباکس به آن اضافه میشود (محصولات ووکامرس) 'side', // محل نمایش در پنل ویرایش 'high' // اولویت نمایش ); } add_action('add_meta_boxes', 'tav_custom_button_metabox'); // تابع برای نمایش فیلدهای تنظیمات دکمه در متاباکس function tav_custom_button_metabox_callback($post) { // دریافت مقادیر ذخیرهشده قبلی برای پر کردن فرم $button_text = get_post_meta($post->ID, '_tav_button_text', true); $button_url = get_post_meta($post->ID, '_tav_button_url', true); $button_icon = get_post_meta($post->ID, '_tav_button_icon', true); $button_color = get_post_meta($post->ID, '_tav_button_color', true); $button_radius = get_post_meta($post->ID, '_tav_button_radius', true); // افزودن nonce برای امنیت بیشتر هنگام ذخیره اطلاعات wp_nonce_field('tav_custom_button_nonce', 'tav_custom_button_nonce_field'); ?> <p> <label for="tav_button_text"><?php _e('متن دکمه:', 'tav-theme'); ?></label> <input type="text" id="tav_button_text" name="tav_button_text" value="<?php echo esc_attr($button_text); ?>" class="widefat"> </p> <p> <label for="tav_button_url"><?php _e('لینک دکمه:', 'tav-theme'); ?></label> <input type="url" id="tav_button_url" name="tav_button_url" value="<?php echo esc_url($button_url); ?>" class="widefat"> </p> <p> <label for="tav_button_icon"><?php _e('کلاس آیکن (مثلا fa fa-link):', 'tav-theme'); ?></label> <input type="text" id="tav_button_icon" name="tav_button_icon" value="<?php echo esc_attr($button_icon); ?>" class="widefat"> </p> <p> <label for="tav_button_color"><?php _e('رنگ دکمه:', 'tav-theme'); ?></label> <input type="color" id="tav_button_color" name="tav_button_color" value="<?php echo esc_attr($button_color); ?>"> </p> <p> <label for="tav_button_radius"><?php _e('بوردر رادیوس (px):', 'tav-theme'); ?></label> <input type="number" id="tav_button_radius" name="tav_button_radius" value="<?php echo esc_attr($button_radius); ?>" class="widefat"> </p> <?php } // تابع برای ذخیره مقادیر وارد شده در متاباکس هنگام ذخیره محصول function tav_save_custom_button_metabox($post_id) { // بررسی nonce برای جلوگیری از حملات CSRF if (!isset($_POST['tav_custom_button_nonce_field']) || !wp_verify_nonce($_POST['tav_custom_button_nonce_field'], 'tav_custom_button_nonce')) { return; } // جلوگیری از ذخیرهسازی خودکار وردپرس که ممکن است دادههای ناقص ذخیره کند if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) { return; } // بررسی دسترسی کاربر برای ویرایش محصول if (!current_user_can('edit_post', $post_id)) { return; } // ذخیره دادههای ورودی از متاباکس در متادیتای محصول update_post_meta($post_id, '_tav_button_text', sanitize_text_field($_POST['tav_button_text'])); update_post_meta($post_id, '_tav_button_url', esc_url($_POST['tav_button_url'])); update_post_meta($post_id, '_tav_button_icon', sanitize_text_field($_POST['tav_button_icon'])); update_post_meta($post_id, '_tav_button_color', sanitize_hex_color($_POST['tav_button_color'])); update_post_meta($post_id, '_tav_button_radius', intval($_POST['tav_button_radius'])); } add_action('save_post', 'tav_save_custom_button_metabox'); // نمایش دکمه سفارشی در صفحه محصول ووکامرس function tav_display_custom_button() { global $post; // دریافت مقادیر تنظیمشده برای دکمه $button_text = get_post_meta($post->ID, '_tav_button_text', true); $button_url = get_post_meta($post->ID, '_tav_button_url', true); $button_icon = get_post_meta($post->ID, '_tav_button_icon', true); $button_color = get_post_meta($post->ID, '_tav_button_color', true); $button_radius = get_post_meta($post->ID, '_tav_button_radius', true); // اگر لینکی وارد نشده باشد، دکمه نمایش داده نمیشود if (!$button_url) { return; } // تعریف استایل دکمه بهصورت داینامیک $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;"; ?> <a href="<?php echo esc_url($button_url); ?>" class="tav-custom-button" style="<?php echo esc_attr($style); ?>"> <?php if (!empty($button_icon)) : ?> <i class="<?php echo esc_attr($button_icon); ?>"></i> <?php endif; ?> <?php echo esc_html($button_text); ?> </a> <?php } // اضافه کردن دکمه سفارشی بعد از دکمه "افزودن به سبد خرید" add_action('woocommerce_after_add_to_cart_button', 'tav_display_custom_button', 35); // بارگذاری استایلهای مربوط به دکمه و فونتهای آیکن function tav_enqueue_custom_button_styles() { // بارگذاری Font Awesome برای استفاده از آیکنها 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'); // بارگذاری Bootstrap Icons (اختیاری) wp_enqueue_style('tav-bootstrap-icons', 'https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css', array(), null, 'all'); // اضافه کردن استایلهای اختصاصی برای دکمه wp_add_inline_style('tav-font-awesome', ' .tav-custom-button:hover { opacity: 0.8; } '); } add_action('wp_enqueue_scripts', 'tav_enqueue_custom_button_styles');