Add a button with an URL variable in WooCommerce single product page

Question

In WooCommerce, I have added a "subscribe" button in single product pages. It opens a popup window from an URL like:
https://elfromulario.com?sku= where I add the product SKU as an URL variable.

But when I use it, the browsers block the pop-up window.

Is there a more functional way or a more efficient way to do it?

My code:

add_action( 'woocommerce_single_product_summary', 'woocommerce_template_custom_content', 25 );

function woocommerce_template_custom_content(){
    global $product;
    $sku = $product->get_sku();

    if (isset($_POST['subscriberc'])) {
        // Redirect to  with the SKU appended
        $googleUrl = "https:https://googleurl.com/Formulario.php?SKU=" . $sku;
        echo '<script>window.open("' . $googleUrl . '");</script>';
    }
        
    ?><form method="post">
        <input type="hidden" name="subscriberc" value="1">
        <input style="
        background: #034392 !important;
        font-family: 'Open Sans', sans-serif;
        font-size: 15px;
        font-weight: bold;
        width: 200px;
        margin-bottom: 18px;
        " type="submit" value="¡SUSCRIBITE AHORA!">
    </form><?

}

score 0 · Answer 1 · answered Aug 03 '23 at 21:33

I'm not surprised that any browser prevents redirecting from javascript. You might prefer to redirect with PHP with something like :

function woocommerce_template_custom_content(){
    global $product;
    $sku = $product->get_sku();

    if (isset($_POST['subscriberc'])) {
 
    // Redirect to  with the SKU appended
    $googleUrl = "https:https://googleurl.com/Formulario.php?SKU=" . $sku;
    // redirect with headers instead of JS
    header('Location: ' . $googleUrl);
}

Also : you have https: prepended to the URL string, maybe that won't help :)

LoicTheAztec · Answer 2 · 2023-08-03T22:08:40.190

Why just not using a simple linked button with a '_bank' target to open the link in a new browser tab, instead of a complicated form, that reloads the page opening a popup that will be blocked anyway by the browser.

Try the following simple solution instead:

add_action( 'woocommerce_single_product_summary', 'open_external_subscribe_url', 25 );
function open_external_subscribe_url(){
    global $product;
    
    if ( $sku = $product->get_sku() ) :
        
    $google_url = sprintf('https://googleurl.com/Formulario.php?SKU=%s', $sku );
    echo '<style>
    a.subscribers {
        background: #034392 !important;
        font-family: \'Open Sans\', sans-serif;
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 18px;
    }
    </style>
    <a href="'. $google_url .'" target="_blank" class="subscribers button alt">'. __('¡SUSCRIBITE AHORA!') .'</a>';
    endif;
}

Code goes in functions.php file of the child theme (or in a plugin). Tested and works.

You will get something like (without a form, just a link):

score -1 · Answer 3 · answered Aug 04 '23 at 00:57

Instead of using a form and JavaScript to open a new window (which can often be blocked by browsers), you could use a simple HTML link with the target attribute set to "_blank". This will open the link in a new tab, which is generally more accepted by browsers and users.

Here's how you could modify your code:

add_action( 'woocommerce_single_product_summary', 'add_subscribe_button', 25 );

function add_subscribe_button() {
    global $product;
    $sku = $product->get_sku();

    if ( $sku ) {
        $url = "https://elfromulario.com?sku=" . $sku;
        echo '<a href="' . $url . '" target="_blank" class="button alt">¡SUSCRIBITE AHORA!</a>';
    }
}

Add a button with an URL variable in WooCommerce single product page

3 Answers3