How To Add Custom Button Link Per Product in WooCommerce

How To Add a Custom Button With Custom Link After Add to Cart for Every Product in WooCommerce

Are you are business owner wondering how to add a custom button with custom link after add to cart for every product? Well, you are in luck as that’s exactly what we are going to discuss in this awesome guide.

WooCommerce is an incredibly flexible and powerful platform, enabling store owners to create a unique and personalized e-commerce experience for their customers. One feature that many store owners may find useful is the ability to add a custom button link for each product. Whether you want to direct customers to a specific landing page, provide additional information or resources, or offer a unique promotion, custom button links can help you achieve your goals.

In today’s blog post, we will discuss the benefits of having a custom button link per product in WooCommerce and how it can elevate your online store. To make things even better, we’re going to share a custom plugin specifically designed for this purpose, absolutely free! This plugin will allow you to easily add and manage custom button links for each product in your WooCommerce store, without the need for any technical knowledge or coding skills.

So, let’s dive in and explore the world of custom button links in WooCommerce, and get ready to enhance your store with our free custom plugin!

Here’s Our Free Plugin to Add a Custom Button With Custom Link After Add to Cart for Every Product in WooCommerce

With this plugin, you can now add custom button links to each product in WooCommerce by editing the product and entering the custom link in the “Custom Button Link” field. The custom button will be displayed on the product page below the “Add to Cart” button. 

<?php

/**

 * Plugin Name: WooCommerce Custom Button Link

 * Plugin URI: https://shieldthemes.com

 * Description: Add a custom button link per product in WooCommerce.

 * Version: 1.0.0

 * Author: ShieldThemes

 * Author URI: https://shieldthemes.com

 * License: GPLv2 or later

 * License URI: https://www.gnu.org/licenses/gpl-2.0.html

 * WC requires at least: 3.0

 * WC tested up to: 6.2

 * Text Domain: wc-custom-button-link

 */



// Exit if accessed directly.

if (!defined('ABSPATH')) {

    exit;

}



// Hook a function to register a custom field in the product editor.

add_action('woocommerce_product_options_general_product_data', 'wccbl_add_custom_button_link_field');



function wccbl_add_custom_button_link_field() {

    global $woocommerce, $post;



    // Create a new options group in the product editor.

    echo '<div class="options_group">';



    // Add a custom text input field for the button link.

    woocommerce_wp_text_input(array(

        'id' => '_wccbl_custom_button_link',

        'label' => __('Custom Button Link', 'wc-custom-button-link'),

        'placeholder' => 'https://',

        'description' => __('Enter the custom button link for this product.', 'wc-custom-button-link'),

        'desc_tip' => true,

        'type' => 'url',

    ));



    // Close the options group.

    echo '</div>';

}



// Hook a function to save the custom field value when the product is saved.

add_action('woocommerce_process_product_meta', 'wccbl_save_custom_button_link_field', 10, 2);



function wccbl_save_custom_button_link_field($post_id, $post) {

    // Get the submitted custom button link value and sanitize it.

    $custom_button_link = isset($_POST['_wccbl_custom_button_link']) ? wc_clean($_POST['_wccbl_custom_button_link']) : '';



    // Save the custom button link value as post meta.

    update_post_meta($post_id, '_wccbl_custom_button_link', $custom_button_link);

}



// Hook a function to display the custom button link on the product page.

add_action('woocommerce_after_add_to_cart_button', 'wccbl_display_custom_button_link');



function wccbl_display_custom_button_link() {

    global $product;



    // Get the custom button link value from the post meta.

    $custom_button_link = get_post_meta($product->get_id(), '_wccbl_custom_button_link', true);



    // If the custom button link value is not empty, display the button.

    if (!empty($custom_button_link)) {

        echo '<div class="wccbl-custom-button-link">';

        echo '<a href="' . esc_url($custom_button_link) . '" class="button" target="_blank" rel="noopener">' . __('Custom Button', 'wc-custom-button-link') . '</a>';

        echo '</div>';

    }

}

This code creates a custom plugin for WooCommerce that allows you to add a custom button link per product. The plugin provides a custom field in the product editor where the store owner can input a custom link. When the product is saved, the custom link value is saved as post meta. On the front end, the custom button link is displayed below the “Add to Cart” button on the product page if a custom link is provided for the product.

Key WooCommerce Actions for Adding a Custom Button Link Per Product

In our custom plugin for adding a custom button link per product in WooCommerce, we utilized three important action hooks: woocommerce_product_options_general_product_data, woocommerce_process_product_meta, and woocommerce_after_add_to_cart_button. In this section, we’ll discuss these action hooks in detail, explaining what they are, why we used them, and how we modified them to implement our new feature.

1. woocommerce_product_options_general_product_data

This action hook is used to add custom fields to the general product data section in the product editor of the WooCommerce dashboard. We used this hook to create a new custom field where the store owner can input the custom button link for each product.

By utilizing this hook, we ensured that our custom field is neatly integrated into the existing WooCommerce product editor interface, providing a seamless experience for store owners managing their products.

2. woocommerce_process_product_meta

This action hook is triggered when a product is saved in the WooCommerce dashboard. We used this hook to save the custom button link data submitted by the store owner in the product editor. By attaching our function to this hook, we ensured that the custom button link data is properly saved as post meta whenever a product is updated.

This approach allows the custom button link data to be efficiently stored and easily retrieved when needed, such as when displaying the custom button on the product page.

3. woocommerce_after_add_to_cart_button

This action hook is used to add content immediately after the “Add to Cart” button on the product page. We used this hook to display the custom button link on the front end, allowing customers to interact with the custom button.

By using this hook, we ensured that the custom button link is consistently positioned and displayed in a logical location on the product page, right after the “Add to Cart” button. This placement ensures maximum visibility for the custom button while maintaining a clean and organized layout on the product page.

Conclusion

In summary, the woocommerce_product_options_general_product_data, woocommerce_process_product_meta, and woocommerce_after_add_to_cart_button action hooks played a crucial role in implementing our custom button link per product feature in WooCommerce. By utilizing these hooks, we were able to create a seamless and user-friendly experience for both store owners and customers, while maintaining compatibility with the existing WooCommerce framework.

With our custom plugin, store owners can now easily add custom button links to each product, offering a unique and personalized shopping experience for their customers.

Buffer Pinterest