Snippets library

Browse Snippets
Claim your Free Profile
Add Snippet
Home / Admin / create woocommerce call to order button for specific product in your wordpress website
Duplicate Snippet

Embed Snippet on Your Site

create woocommerce call to order button for specific product in your wordpress website

Are you looking to boost conversions on your WooCommerce website? One effective strategy is to incorporate a call to order button, which allows customers to easily contact you and place orders directly.

In this blog post, we will guide you through the process of adding a call to order button to your WooCommerce store, using a convenient method: the Code Snippets plugin.

The Code Snippets plugin provides a hassle-free way to add custom code to your WordPress site, including snippets that enable the functionality of a call to order button. By leveraging this plugin, you can avoid modifying your theme files directly, ensuring better compatibility and easier maintenance of your website.

While there are various approaches to adding a call to order button, such as manually editing theme files or using custom functions, we will focus on using the Code Snippets plugin for its simplicity and flexibility. However, we will also briefly mention alternative methods, so you can choose the one that best suits your needs.

Here are the key points we’ll cover in this tutorial:

The importance of a call to order button in increasing conversions.
Introduction to the Code Snippets plugin and its benefits.
Step-by-step instructions on installing and activating the Code Snippets plugin.
Creating a new snippet to add the call to order button functionality.
Customizing the call to order button appearance and placement on your WooCommerce website.
By the end of this post, you’ll have a powerful tool at your disposal to increase conversions and provide a seamless ordering experience for your customers.

Zakaria Kalatozishvili
<10
Code Preview
Comments
php
<?php
// Rename "Add to Cart" button to "Call to Order"
add_filter('woocommerce_product_single_add_to_cart_text', 'rename_add_to_cart_button', 10, 1);
function rename_add_to_cart_button($button_text)
{
    return __('Call to Order', 'woocommerce');
}
// Redirect "Call to Order" button to initiate a phone call
add_filter('woocommerce_product_add_to_cart_url', 'redirect_to_call_for_order', 10, 2);
function redirect_to_call_for_order($add_to_cart_url, $product)
{
    $phone_number = isset($_POST['phone_number']) ? sanitize_text_field($_POST['phone_number']) : '';
    return !empty($phone_number) ? 'tel:' . $phone_number : $add_to_cart_url;
}
// Add "Call to Order" tab in product edit area
add_filter('woocommerce_product_data_tabs', 'add_call_to_order_product_tab', 0);
function add_call_to_order_product_tab($tabs)
{
    $tabs['call_to_order'] = array(
        'label' => __('Call to Order', 'woocommerce'),
        'target' => 'call_to_order_product_options',
        'class' => array('show_if_simple'),
    );
    return $tabs;
}
// Display content of "Call to Order" tab in product edit area
add_action('woocommerce_product_data_panels', 'call_to_order_product_tab_content');
function call_to_order_product_tab_content()
{
    global $post;
    echo '<div id="call_to_order_product_options" class="panel woocommerce_options_panel">';
    echo '<div class="options_group">';
    // Checkbox field
    woocommerce_wp_checkbox(
        array(
            'id' => 'call_to_order_checkbox',
            'label' => __('Enable Call to Order for this product', 'woocommerce'),
            'description' => '',
            'value' => get_post_meta($post->ID, 'call_to_order_checkbox', true)
        )
    );
    echo '</div>';
    echo '<div class="options_group">';
    // Phone number field
    woocommerce_wp_text_input(
        array(
            'id' => 'call_to_order_phone_number',
            'label' => __('Phone Number', 'woocommerce'),
            'desc_tip' => true,
            'description' => __('Enter the phone number for call to order.', 'woocommerce'),
            'value' => get_post_meta($post->ID, 'call_to_order_phone_number', true),
            'type' => 'tel',
        )
    );
    echo '</div>';
    echo '</div>';
}
// Save checkbox and phone number values in "Call to Order" tab
add_action('woocommerce_process_product_meta', 'save_call_to_order_meta');
function save_call_to_order_meta($post_id)
{
    $checkbox = isset($_POST['call_to_order_checkbox']) ? 'yes' : 'no';
    $phone_number = isset($_POST['call_to_order_phone_number']) ? sanitize_text_field($_POST['call_to_order_phone_number']) : '';
    update_post_meta($post_id, 'call_to_order_checkbox', $checkbox);
    update_post_meta($post_id, 'call_to_order_phone_number', $phone_number);
}
// Limit "Call to Order" button to add the product to cart
add_filter('woocommerce_is_purchasable', 'limit_call_to_order_button', 10, 2);
function limit_call_to_order_button($purchasable, $product)
{
    $checkbox = get_post_meta($product->get_id(), 'call_to_order_checkbox', true);
    if ($checkbox == 'yes') {
        $purchasable = false;
    }
    return $purchasable;
}
// Display either "Call to Order" button or "Add to Cart" button based on the checkbox value
add_filter('woocommerce_loop_add_to_cart_link', 'display_call_to_order_or_add_to_cart_button', 10, 2);
add_filter('woocommerce_product_single_add_to_cart_text', 'display_call_to_order_or_add_to_cart_button', 10, 2);
function display_call_to_order_or_add_to_cart_button($button_text, $product)
{
    $checkbox = get_post_meta($product->get_id(), 'call_to_order_checkbox', true);
    if ($checkbox == 'yes') {
        $phone_number = isset($_POST['phone_number']) ? sanitize_text_field($_POST['phone_number']) : '';
        if (!empty($phone_number)) {
            $button_text = '<a class="button" href="tel:' . $phone_number . '">' . __('Call to Order', 'woocommerce') . '</a>';
        } else {
            $button_text = __('Call to Order', 'woocommerce');
        }
    } else {
        // If the checkbox is not checked, show the "Add to Cart" button
        $button_text = get_option('woocommerce_add_to_cart_text', __('Add to Cart', 'woocommerce'));
    }
    return $button_text;
}
// Add custom CSS for the "Call to Order" tab
add_action('admin_head', 'call_to_order_custom_styles');
function call_to_order_custom_styles()
{
    echo '<style>
        #call_to_order_phone_number {
            width: 50%;
        }
    </style>';
}
// Display "Call to Order" button on the front-end and shop page
add_action('woocommerce_after_shop_loop_item', 'display_call_to_order_button_on_archive', 10, 2);
add_action('woocommerce_single_product_summary', 'display_call_to_order_button_on_single_product', 30);
function display_call_to_order_button_on_archive()
{
    global $product;
    $checkbox = get_post_meta($product->get_id(), 'call_to_order_checkbox', true);
    if ($checkbox == 'yes') {
        $phone_number = get_post_meta($product->get_id(), 'call_to_order_phone_number', true);
        if (!empty($phone_number)) {
            echo '<a class="button" href="tel:' . $phone_number . '">' . __('Call to Order', 'woocommerce') . '</a>';
        } else {
            echo __('Call to Order', 'woocommerce');
        }
    }
}
function display_call_to_order_button_on_single_product()
{
    global $product;
    $checkbox = get_post_meta($product->get_id(), 'call_to_order_checkbox', true);
    if ($checkbox == 'yes') {
        $phone_number = get_post_meta($product->get_id(), 'call_to_order_phone_number', true);
        if (!empty($phone_number)) {
            echo '<a class="button" href="tel:' . $phone_number . '">' . __('Call to Order', 'woocommerce') . '</a>';
        } else {
            echo __('Call to Order', 'woocommerce');
        }
    }
}
Hosted with ❤️ by WPCode
1-click Use in WordPress

Comments

Add a Comment

Login to Deploy Snippet