Add a custom button with custom link after add to cart for every product

Welcome to WPSE.

You can use a WordPress WooCommerce hook to achive this. Just like WordPress itself, WooCommerce also allows you to use hooks and filters to customize your shop. You need to add the following code to the functions.php of your current theme.

This code adds a simple link after the WooCommerce add to cart button.

// This function gets the value for the the custom fields from the database and adds it to the frontend output function
function wpse_add_custom_link_output() {
    $external_link = get_post_meta(get_the_ID(), '_custom_product_text_field', true);
    $html="<a href="".$external_link.'" class="custom-button-class" target="_blank" title="'.__('External product link','woocommerce').'">'.$external_link.'</a>';
    echo $html;
};
add_action( 'woocommerce_after_add_to_cart_button', 'wpse_add_custom_link_output', 10, 0 ); 
// This function creates the field in the backend
function wpse_add_custom_link_field(){
    global $woocommerce, $post;
    echo '<div class="product_custom_field">';
    // Custom Product Text Field
    woocommerce_wp_text_input(
        array(
            'id' => '_custom_product_text_field',
            'placeholder' => __('Paste product link here', 'woocommerce'),
            'label' => __('Custom product link', 'woocommerce'),
            'desc_tip' => 'true'
        )
    );
    echo '</div>';
}
add_action('woocommerce_product_options_general_product_data', 'wpse_add_custom_link_field');
// this function saves the link/text field
function wpse_save_custom_link_field($post_id){
    // Custom Product Text Field
    $woocommerce_custom_product_text_field = $_POST['_custom_product_text_field'];
    if (!empty($woocommerce_custom_product_text_field))
    update_post_meta($post_id, '_custom_product_text_field', 
    esc_attr($woocommerce_custom_product_text_field));
}
add_action('woocommerce_process_product_meta', 'wpse_save_custom_link_field');

You may want to add some css like:

a.custom-button-class:link,
a.custom-button-class:visited {
    display: block;
    margin-top: 30px;
}
a.custom-button-class:hover,
a.custom-button-class:focus {
    /* some hover style */
}

Please accept the answer as correct if it worked for you. I have tested this code with theme 2020.

Leave a Comment