Woocommerce open product link in new tab after "endless scroll" with ajax

user_8463204 0
Viewed 1520

I have managed to get all product links on my Woocommerce site to open in a new tab, however, I am using endless scroll with ajax for loading more products and the products that get loaded via endless scroll does not open in a new tab when clicking on them.

Here is my current code for opening products in a new tab;

remove_action( 'woocommerce_before_shop_loop_item','woocommerce_template_loop_product_link_open', 10 );
add_action ( 'woocommerce_before_shop_loop_item', 'chr_function_open_new_tab', 10 );
function chr_function_open_new_tab() {
echo '<a target="_blank" href="' . get_the_permalink() . '" class="woocommerce-LoopProduct-link">';
}

Any help with this is highly appreciated. Thanks in advance!

woocommerce wordpress php ajax
2 Answers

I think that your remove_action cannot take an action. That's why it gives a trouble. So try this code:

add_action('init',function(){ remove_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10 ); } ,0);
function chr_function_open_new_tab() {
    echo '<a target="_blank" href="' . get_the_permalink() . '" class="woocommerce-LoopProduct-link">';
}

Second Other Solution, you can do it with simple jQuery

add_action('wp_footer',function(){
if ( has_term( 'stone', 'product_cat' ) ) {
echo '<script>

//for existing content
jQuery(".woocommerce-LoopProduct-link").attr("target","_blank");

//for content part which comes from AJAX
jQuery( document ).ajaxComplete(function() {
jQuery(".woocommerce-LoopProduct-link").attr("target","_blank");
});
</script>';
}
});

user_24585940

Instead try to use this dedicated filter hook for add to cart button:

// Change loop add to cart ajax button to a linked button to single product pages
add_filter( 'woocommerce_loop_add_to_cart_link', 'replace_loop_add_to_cart', 20, 2 );
function replace_loop_add_to_cart( $html, $product ) {
    $link = $product->get_permalink();
    $text = __("Read More", "woocommerce");
    return '<a href="' . $link . '" target="_blank" class="button alt add_to_cart_button">' . $text . '</a>';
}

And here for the product link:

add_filter( 'woocommerce_before_shop_loop_item', 'replace_template_loop_product_link_open', 1 );
function replace_loop_product_link() {
    remove_action( 'woocommerce_before_shop_loop_item','woocommerce_template_loop_product_link_open', 10 );
    add_action ( 'woocommerce_before_shop_loop_item', 'new_loop_product_link_open', 10 );
}

function new_loop_product_link_open() {
    global $product;

    echo '<a href="' . esc_url( $product->get_permalink() ) . '" target="_blank" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">';
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

But in your case, it could not work as expected, depending on how your custom ajax functionality is implemented. As the problem remains for products loaded via ajax, the target="_blank" need to be implemented in the corresponding script too.

At this point nobody can help you more as we can't guess how this functionality is built.

user_37307540
Related