Wordpress woocommerce：通过Ajax展示最新产品

您知道如何通过ajax（使用回调或类似的方法）显示Woocommerce最近的产品吗？现在我有了这个短代码：

[recent_products per_page="12" columns="3"]

---

我想创建一个按钮，允许我在同一页上显示接下来的12种产品。

一个简单的例子，它是基本的wordpress ajax调用，返回最近的产品的输出。在页面的某个地方放置一个带有

#wc#u recent#u products

id的链接，ajax响应将替换

div#main

（

$（'#main'）.html（response）；

，如果要将内容放在其他地方，请更改该行）

---

一个简单的例子，基本的wordpress ajax调用返回
最新产品的输出。在页面的某个地方放置一个带有
#wc#u recent#u products
id的链接，ajax响应将替换
div#main
（
$（'#main'）.html（response）；
，如果要将内容放在其他地方，请更改该行）


<?php

add_action( 'wp_ajax_wc_recent_products', function() 
{
    if ( isset( $_POST['nonce'] ) && wp_verify_nonce( $_POST['nonce'], 'wc_recent_products' ) ) 
    {
        echo do_shortcode( '[recent_products per_page="12" columns="3"]' );
    }
    exit();
});


add_action( 'wp_head', function() {

?>
    <script type="text/javascript" >
    jQuery(function ($) {
        $( '#wc_recent_products' ).on( 'click', function() {
            $.post( 
                '<?php echo admin_url( 'admin-ajax.php' ); ?>', 
                { action: 'wc_recent_products', nonce: '<?php echo wp_create_nonce( 'wc_recent_products' ); ?>' }, 
                function( response ) {              
                    $( '#main' ).html( response );          
                }
            );
            return false;
        });
    });
    </script>
<?php
});
?>