روز
ساعت
دقیقه
ثانیه
فرصت داری تا عیدیتو بگیری 🤟🏻❤️🌹

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

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');

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

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

بقیه مقالات

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

Notice: ob_end_flush(): failed to send buffer of zlib output compression (0) in /home/tavtheme/public_html/wp-includes/functions.php on line 5464