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

- پیوند: https://tavtheme.com/woocommerce-custom-button/
- منتشرشده: 1403-12-18T18:08:01+03:30
- نویسنده: تاوتم

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

🔹 این دکمه به‌طور مستقیم در صفحه محصول و کنار دکمه “افزودن به سبد خرید” نمایش داده
می‌شود و فقط در صورتی که مقدار لینک وارد شده باشد، فعال خواهد شد.
🔹 همچنین، قابلیت
انتخاب آیکن از مجموعه‌های محبوب مانند **Font Awesome، Bootstrap Icons، Material 
Icons و …** وجود دارد تا طراحی دکمه مطابق برند شما باشد.

💡 **مزایای این قابلیت:**
✔ هدایت مشتریان به صفحات مهم✔ افزایش نرخ تبدیل با لینک‌دهی
هوشمند✔ استایل‌دهی و سفارشی‌سازی کامل✔ نمایش فقط در صورت نیاز، بدون تأثیر بر سایر
محصولات

    ```CodeMirror
    // افزودن یک متاباکس برای وارد کردن تنظیمات دکمه در صفحه ویرایش محصول ووکامرس
    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');
    ```