دکمه سفارشی در ووکامرس – افزایش نرخ تبدیل با هدایت هوشمند کاربران

woocommerce-custom-button

یکی از چالش‌های مدیران فروشگاه‌های اینترنتی، هدایت مشتریان به صفحات مهم مانند فرم‌های مشاوره، پیشنهادات ویژه، صفحات فرود، و تخفیف‌های خاص است. بسیاری از قالب‌های ووکامرس این قابلیت را ندارند، اما با این راهکار می‌توانید برای هر محصول یک دکمه سفارشی با متن، آیکن، رنگ، و لینک دلخواه ایجاد کنید.

🔹 این دکمه به‌طور مستقیم در صفحه محصول و کنار دکمه “افزودن به سبد خرید” نمایش داده می‌شود و فقط در صورتی که مقدار لینک وارد شده باشد، فعال خواهد شد.
🔹 همچنین، قابلیت انتخاب آیکن از مجموعه‌های محبوب مانند 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');

اشتراک گذاری

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

بقیه مقالات
این افزونه با استفاده از جدیدترین روش‌های برنامه‌نویسی وردپرس و ووکامرس، بدون ایجاد بار اضافی روی سایت شما، تجربه خرید را برای مشتریان جذاب‌تر می‌کند و نرخ تبدیل فروشگاه شما را افزایش می‌دهد. همین حالا این افزونه را نصب کنید و تاثیر آن را در افزایش فروش و جلب اعتماد مشتریان ببینید!
افزونه زمان‌بندی اسلاید المنتور یک ابزار ضروری برای هر وب‌سایتی است که می‌خواهد مدیریت محتوای اسلایدها را به صورت هوشمند و خودکار انجام دهد. این افزونه با ارائه قابلیت‌های زمان‌بندی پیشرفته، نه تنها در وقت و انرژی شما صرفه‌جویی می‌کند، بلکه به شما کمک می‌کند تا همیشه محتوای به‌روز و هدفمندی را به مخاطبان خود ارائه دهید.
بسیاری از کاربران دوست دارند محصولی که سفارش می‌دهند، به‌صورت کادویی برای کسی ارسال شود — اما در بسیاری از فروشگاه‌های ووکامرس، چنین امکانی وجود ندارد!
ثبت مشاوره یا پلاگین
Discount
×

تخفیف برای تو

با وارد کردن ایمیلت همین الان تخفیف بگیر!!!!

تماس با ما
واتساپ تلگرام اینستاگرام ارسال تیکت