How to Add External Links for Each Variations and Open it in New Tab for WooCommerce Variable Products?

Have you ever wanted to turn your WooCommerce variable products into affiliate items with specific external links for each variation? While you can easily designate a product as an external or affiliate type by selecting “External/Affiliate” product type. But this method only allows for a single URL.

In this post, we address the limitation for variable products that require different URLs for each variation. The code creates a distinct URL field for each product variation in the edit product section, enabling store owners to set unique external links that open in a new tab after the customer chooses the variation and clicks the ‘Add to Cart’ button. By implementing this solution, you can enhance the shopping experience for your customers while maximizing your affiliate potential for variable products as well.

Solution: Add External Links for Each Variations and Open it in New Tab for WooCommerce Variable Products

The code will adds the text URL field for each variations in the edit product page at the backend.
If an url is entered for the variation, the value gets saved. On the product page when customers select a variation and click on ‘Add to cart’, the external link will be opened in new tab.

// Add External URL Field to Product Variations
add_action('woocommerce_variation_options', 'ts_add_external_url_field', 10, 3);
function ts_add_external_url_field($loop, $variation_data, $variation) {
    woocommerce_wp_text_input(array(
        'id' => "external_url_{$variation->ID}",
        'name' => "external_url_{$variation->ID}",
        'label' => __('External URL', 'woocommerce'),
        'placeholder' => 'https://example.com',
        // 'description' => __('Enter an external URL for this variation.', 'woocommerce'),
        'value' => get_post_meta($variation->ID, '_external_url', true),
    ));
}

// Save External URL Field Value
add_action('woocommerce_save_product_variation', 'ts_save_external_url_field', 10, 2);
function ts_save_external_url_field($variation_id, $i) {
    $external_url = isset($_POST["external_url_{$variation_id}"]) ? $_POST["external_url_{$variation_id}"] : '';
    update_post_meta($variation_id, '_external_url', esc_url($external_url));
}

// Pass External URL to the Frontend
add_filter('woocommerce_available_variation', 'ts_add_external_url_to_variation');
function ts_add_external_url_to_variation($variation_data) {
    $external_url = get_post_meta($variation_data['variation_id'], '_external_url', true);
    if ($external_url) {
        $variation_data['external_url'] = $external_url; // Add the external URL to the variation data
    }
    return $variation_data;
}

// JavaScript to handle "Add to Cart" click for external URL
add_action('wp_footer', 'ts_add_custom_js');
function ts_add_custom_js() {
    if (is_product()) {
        ?>
        <script type="text/javascript">
        jQuery(document).ready(function($) {
            // When the Add to Cart button is clicked
            $('form.cart').on('submit', function(event) {
                event.preventDefault(); // Prevent the default form submission
                
                // Get selected variation data
                var variation_id = $('input[name="variation_id"]').val();
                var variation = $('form.variations_form').data('product_variations').find(function(variation) {
                    return variation.variation_id == variation_id;
                });
                
                // Check if the external URL exists
                if (variation && variation.external_url) {
                    // Open the external URL in a new tab
                    window.open(variation.external_url, '_blank');
                } else {
                    // Submit the form normally if no external URL is found
                    $(this).off('submit').submit();
                }
            });
        });
        </script>
        <?php
    }
}

Output

The code will add a new text field on the admin edit product page which allows store owners to set an external url for product variations as shown in the image below.

When customers clicks on the ‘Add to cart’ button associated with the variable product, they will be redirected to the specified external link in a new tab instead of being directed to the cart page of your site.

We hope you’ve successfully added unique external links for each variation of your products, as this paves the way to increase your affiliate potential. Additionally, consider applying this strategy to make WooCommerce external products, images, and titles open in a new tab . By doing so, you create a smoother browsing experience for your customers, which can lead to increased satisfaction and retention. Plus, minimizing bounce rates can positively impact your site’s SEO, helping you attract more visitors over time.