Adding “Buy on Amazon” Button to WooCommerce Product Pages

Hello WooCommerce Community,

I’m seeking assistance with implementing the addition of a “Buy on Amazon” button to the product page of my WooCommerce online store. This button needs to work seamlessly for both regular and variable products.

Here is the approach I’ve tried:

Step 1: I created a custom field for the product using the following code:

// Add a custom field "Buy on Amazon Link" to variable product variations
add_action('woocommerce_product_after_variable_attributes', 'add_amazon_link_field_to_variations', 10, 3);
function add_amazon_link_field_to_variations($loop, $variation_data, $variation) {
    woocommerce_wp_text_input(array(
        'id'            => '_buy_on_amazon[' . $loop . ']',
        'class'         => 'short',
        'label'         => __('Buy on Amazon Link', 'woocommerce'),
        'value'         => get_post_meta($variation->ID, '_buy_on_amazon', true)
    ));
}

// Save the custom field for variations
add_action('woocommerce_save_product_variation', 'save_amazon_link_field_from_variations', 10, 2);
function save_amazon_link_field_from_variations($variation_id, $i) {
    $amazon_link = $_POST['_buy_on_amazon'][$i];
    if (isset($amazon_link)) {
        update_post_meta($variation_id, '_buy_on_amazon', esc_attr($amazon_link));
    }
}

// Add a custom field to regular products
add_action('woocommerce_product_options_general_product_data', 'add_amazon_link_field_to_products');
function add_amazon_link_field_to_products() {
    woocommerce_wp_text_input(array(
        'id'            => '_buy_on_amazon',
        'class'         => 'short',
        'label'         => __('Buy on Amazon Link', 'woocommerce'),
        'desc_tip'      => true,
        'description'   => __('This field will be used for the Amazon product links', 'woocommerce'),
        'value'         => get_post_meta(get_the_ID(), '_buy_on_amazon', true)
    ));
}

// Save the custom field for regular products
add_action('woocommerce_process_product_meta', 'save_amazon_link_field_from_products');
function save_amazon_link_field_from_products($post_id) {
    $amazon_link = $_POST['_buy_on_amazon'];
    if (isset($amazon_link)) {
        update_post_meta($post_id, '_buy_on_amazon', esc_attr($amazon_link));
    }
}

Step 2: Then, I attempted to display the “Buy on Amazon” button on the product page using this code:

// Add the Buy on Amazon button next to the Add to Cart button
add_action('woocommerce_single_product_summary', 'add_amazon_button', 15);
function add_amazon_button() {
    global $product;

    // Check if the product is variable
    if ($product->is_type('variable')) {
        // Get the selected variation
        $variation_id = $product->get_available_variations()[0]['variation_id'];

        // Get the Amazon link for the selected variation
        $amazon_link = get_post_meta($variation_id, '_buy_on_amazon', true);

        // If the Amazon link exists, output the button
        if ($amazon_link) {
            echo '<a href="' . esc_url($amazon_link) . '" class="amazon-button" target="_blank">Buy on Amazon</a>';
        }
    } else {
        // For regular products, use the parent product's link
        $amazon_link = get_post_meta($product->get_id(), '_buy_on_amazon', true);

        // If the Amazon link exists, output the button
        if ($amazon_link) {
            echo '<a href="' . esc_url($amazon_link) . '" class="amazon-button" target="_blank">Buy on Amazon</a>';
        }
    }
}

For regular products, the button is displayed correctly. However, for variable products, the button consistently links to the first variation. In other words, when switching between different variations on the site, the link does not update accordingly.

I’m reaching out to the community for guidance on resolving this issue or for suggestions on alternative methods to achieve this. Your insights and expertise would be greatly appreciated.

Thank you in advance for your assistance.