How to make a button for loading a product in WooCommerce?

Question

AJAX

Hello! Can you please tell me how to implement the loading of goods? I tried using the Ajax Load More plugin , but there the original template is not suitable for my layout.
template which is there

<li class="alm-item<?php if (! has_post_thumbnail() ) { echo ' no-img'; } ?>">
   <?php if ( has_post_thumbnail() ) {
      the_post_thumbnail('alm-thumbnail');
   }?>
   <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
   <p class="entry-meta">
       <?php the_time("F d, Y"); ?>
   </p>
   <?php the_excerpt(); ?>
</li>

I tried to display my items:

<li class="product type-product post-134 status-publish instock product_cat-zhenskaya product_cat-odezhda product_cat-palto has-post-thumbnail sold-individually shipping-taxable purchasable product-type-variable">
  <a href="/%d0%bf%d0%b0%d0%bb%d1%8c%d1%82%d0%be-%d0%b6%d0%b5%d0%bd%d1%81%d0%ba%d0%be%d0%b5/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link"><img width="150" height="150" src="wp-content/uploads/2021/03/1-1-150x150.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy" srcset="/wp-content/uploads/2021/03/1-1-150x150.jpg 150w, /wp-content/uploads/2021/03/1-1-100x100.jpg 100w, h/wp-content/uploads/2021/03/1-1-300x300.jpg 300w, /wp-content/uploads/2021/03/1-1-768x768.jpg 768w, /wp-content/uploads/2021/03/1-1.jpg 1000w" sizes="(max-width: 150px) 100vw, 150px"><h2 class="woocommerce-loop-product__title">Пальто Женское</h2>
  <span class="price"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">₽</span>12,000.00</bdi></span></span>
</a><a href="/product/%d0%bf%d0%b0%d0%bb%d1%8c%d1%82%d0%be-%d0%b6%d0%b5%d0%bd%d1%81%d0%ba%d0%be%d0%b5/" data-quantity="1" class="button product_type_variable add_to_cart_button" data-product_id="134" data-product_sku="" aria-label="Выбрать опции для &quot;Пальто Женское&quot;" rel="nofollow">Выбрать ...</a></li>

This is the final version (which is displayed in the browser). As I understand it, I need to translate this code into a similar code to the one above, but my knowledge is not enough. I rummaged through a bunch of docks and articles, but did not understand anything. I found the Load More Products plugin , but it only displays pagination, and then only on the store page. Please explain what to do? Maybe there are other solutions?

Answer 1

Install the WooCommerce Load More Products plugin from beRocket and you will be happy