对于经营WooCommerce商店来说，知道有多少访客实际上点击了“添加到购物车”按钮，可以为产品页面的吸引力和转化路径提供宝贵的见解。通过实施“添加到购物车”点击计数器，可以收集到一种额外的数据维度，这将帮助你更精准地评估和优化你的产品页面。

在本文中，将介绍如何在WooCommerce中实现“添加到购物车”按钮点击的跟踪功能。无论是希望了解哪些产品最吸引顾客，还是想提高转化率，这篇文章将为你提供清晰的指导步骤。

为什么需要跟踪“添加到购物车”点击？

• 深入了解产品吸引力
• 提高转化率
• 数据驱动的决策

1、如何实现“添加到购物车”点击计数器

要在WooCommerce中跟踪“添加到购物车”按钮的点击量，可以使用以下PHP代码片段。此代码片段将为每个单一产品页面添加一个点击计数器，并将这些数据存储为产品的元数据。请按照以下步骤操作：

添加到购物车按钮点击计数器 @ WooCommerce 单一产品页面

1. 添加代码到子主题的functions.php文件： 打开WordPress仪表盘，导航到“外观”>“主题文件编辑器”，选择你的子主题的functions.php文件，并添加以下代码：

/** * @snippet Add Cart Button Click Counter @ WooCommerce Single Product Page * @how-to Get CustomizeWoo.com FREE * @author Rodolfo Melogli * @compatible WooCommerce 9 * @community https://businessbloomer.com/club/ */ add_action( 'woocommerce_before_single_product', 'bbloomer_add_to_cart_button_click_counter' ); function bbloomer_add_to_cart_button_click_counter() { wc_enqueue_js( " $('.single_add_to_cart_button').click(function(e){ $.post( '" . '/wp-admin/admin-ajax.php' . "', { action: 'add_cart_clicked', pid: $(this).attr('value') } ); }); " ); } add_action( 'wp_ajax_add_cart_clicked', 'bbloomer_add_cart_clicked' ); add_action( 'wp_ajax_nopriv_add_cart_clicked', 'bbloomer_add_cart_clicked' ); function bbloomer_add_cart_clicked() { $pid = $_POST['pid']; $times_added_to_cart = (int) get_post_meta( $pid, 'add_cart_clicks', true ) ?? 0; update_post_meta( $pid, 'add_cart_clicks', $times_added_to_cart + 1 ); wp_die(); }

2. 解释代码的工作原理：
   • bbloomer_add_to_cart_button_click_counter函数通过jQuery为WooCommerce单个产品页面上的“添加到购物车”按钮添加了一个点击监听器。这个监听器会捕获点击事件，并通过Ajax请求将产品ID传递给自定义的处理函数。
   • bbloomer_add_cart_clicked函数接收Ajax请求，获取产品ID，然后更新该产品的“添加到购物车”点击次数。这个计数数据被存储为产品的元数据，方便后续分析使用。

此代码片段用于跟踪WooCommerce单个产品页面上“添加到购物车”按钮的点击次数。点击监听器会查找具有 single_add_to_cart_button 类的元素，因此如果使用自定义主题或布局，则需要相应地更改选择器。

脚本会检测“添加到购物车”按钮的点击，并通过传递产品 ID 向自定义函数发送 Ajax 请求。对于默认的WooCommerce安装，产品 ID 存储在“添加到购物车”按钮的 value 属性中。如果您使用自定义主题或布局，则需要确保这一点仍然有效。

Ajax函数会检索当前产品的添加到购物车的次数（存储为产品的元数据）并增加计数。此代码适用于登录用户和未登录用户。

在此阶段，点击计数器会被存储为产品的元数据。可以通过以下方式获取该数据：刷新页面后，计数器将更新显示。

get_post_meta( $product_id, 'add_cart_clicks', true );

2、如何实现“销售转化率”

显示“添加到购物车 -> 销售”转化率 @ 产品管理员

收集了点击次数的数据，就可以将这个数字与实际销售量进行比较，从而计算出“添加到购物车”按钮的转化率。这将帮助你识别出最受欢迎的产品以及哪些产品被放弃的次数最多。

要在WooCommerce的产品管理页面中显示这些统计信息，使用以下代码片段：

/**
 * @snippet       Add Cart Button Click Stats @ WooCommerce Product Admin
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 9
 * @community     https://businessbloomer.com/club/
 */
 
add_action( 'add_meta_boxes', 'bbloomer_product_meta_box_add_cart_clicks' );
  
function bbloomer_product_meta_box_add_cart_clicks() {
    add_meta_box( 'add_cart_stats', 'Add to Cart Stats', 'bbloomer_display_add_cart_stats', 'product', 'advanced', 'high' );
}
  
function bbloomer_display_add_cart_stats() {
   global $post;
   $product = wc_get_product( $post->ID );
   $units_sold = $product->get_total_sales();
   $times_added_to_cart = (int) get_post_meta( $post->ID, 'add_cart_clicks', true );
   if ( ! $times_added_to_cart ) {
      echo '<p>No data available</p>';
      return;
   }
   $conversion = 100 * $units_sold / $times_added_to_cart;
   echo '<p>Times added to cart: ' . $times_added_to_cart . '</p>';
   echo '<p>Sales: ' . $units_sold . '</p>'; 
   echo '<p>Conversion rate: ' . number_format( $conversion, 2 ) . '%</p>';
}

此代码将在每个产品的管理页面中添加一个“添加到购物车统计”Meta Box，显示点击次数、销售量以及转化率。

在哪里添加自定义代码？

将上述PHP代码放置在子主题的functions.php文件中是最简单和推荐的做法。确保在修改之前备份文件，以防出现任何问题。对于CSS样式的自定义，可以将其添加到子主题的style.css文件中。WooCommerce 提供了许多动作 (action) 和过滤器 (filter) 钩子，允许你在特定事件发生时执行自定义代码。例如，你可以使用 woocommerce_before_single_product 钩子在产品页面显示之前插入自定义内容。

总结

通过实施“添加到购物车”点击计数器，能够更好地优化你的产品页面和整体转化率。通过结合点击次数和实际销售量的数据，可以识别出哪些产品在吸引顾客方面表现最佳，以及哪些产品的购买转化率相对较低。