Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 4 years ago.

We want to show product variations on all product tiles, in all views. I have some code using woocommerce hooks added to functions.php (see below) that does the trick visually but we have several pages that are loaded through the infinite scroll functionality and products delivered through this method are not being initialised with the required javaScript to view/select the required options.

// SHOW PRODUCT VARIATIONS
add_action( 'woocommerce_after_shop_loop_item', 
  'pn_show_single_add_to_cart', 0);

function pn_show_single_add_to_cart(){
   global $product;
   if( !$product->is_in_stock()){
       add_action( 'woocommerce_after_shop_loop_item', 
         'woocommerce_template_single_add_to_cart', 30 );
} else {
    remove_action( 'woocommerce_after_shop_loop_item', 
        'woocommerce_template_loop_add_to_cart');
    add_action( 'woocommerce_after_shop_loop_item', 
        'woocommerce_template_single_add_to_cart', 30 );
}

};

I suspect the issue is related to bypassing the "select options" button click that normally loads this content through ajax and displays it in a overlay but i have no idea how to attach this binding to the woocommerce hook.

I have read through endless posts that come close but none that use hooks,the two below almost certainly point in the correct direction but the both seem to focus on making custom templates: and