WooCommerce 的“添加到购物车”按钮能让客户轻松地从你的购物网站购买商品。当客户点击“添加到购物车”按钮时，商品会被添加到他们的购物车中，然后他们可以继续购物或直接进入结账流程。
这个按钮可以简化客户的购买流程，让他们更方便地将商品加入购物车并完成购买。很多网站可能需要对其进行自定义，改善客户的整体用户体验。
自定义“添加到购物车”按钮的好处
在 WooCommerce 中使用自定义“添加到购物车”按钮有许多好处，这里列举三个主要优势：
提升美观性
自定义按钮设计可以与品牌风格和配色方案相匹配，提升网站整体美观性。这样可以给购物网站营造统一且专业的视觉效果。
增强功能性
自定义按钮可以提供更强的功能性，例如显示商品的更多信息，如价格、库存状态或适用的折扣和促销信息。
提高转化率
通过改进“添加到购物车”按钮的美观性和功能性，能够有效提高转化率，从而增加整体收入和盈利能力。
在模板中显示“添加到购物车”按钮
下面代码片段可以在选择的任何 WooCommerce 模板页面上显示“添加到购物车”按钮。
<?php
/* Template Name: Customize Add To Cart*/
get_header(); ?>
<div id=”primary” class=”content-area”>
<main id=”main” class=”site-main” role=”main”>
<ul class=”products”>
<?php
$args = array(
‘post_type’ => ‘product’,
‘posts_per_page’ => 12,
);
$loop = new WP_Query( $args );
if ($loop->have_posts()) {
while ($loop->have_posts()) : $loop->the_post();
?>
<div id=”product-image1″>
<a href=”<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>”
title=”<?php echo esc_attr( $product->get_title() ); ?>”>
<?php echo $product->get_image(); ?>
</a>
</div>
<div id=”product-description-container”>
<ul>
<a href=”<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>”
title=”<?php echo esc_attr( $product->get_title() ); ?>”>
<li><h4><?php echo $product->get_title(); ?></h4></li>
</a>
<li><?php echo apply_filters( ‘woocommerce_short_description’, $post->post_excerpt )?></li>
<li><h2><?php echo $product->get_price_html(); ?> </h2></li>
<?php
echo apply_filters(
‘woocommerce_loop_add_to_cart_link’,
sprintf(
‘<a href=”%s” rel=”nofollow” data-product_id=”%s” data-product_sku=”%s” class=”button %s product_type_%s”>%s</a>’,
esc_url( $product->add_to_cart_url() ),
esc_attr( $product->get_id() ),
esc_attr( $product->get_sku() ),
$product->is_purchasable() ? ‘add_to_cart_button’ : ”,
esc_attr( $product->product_type ),
esc_html( $product->add_to_cart_text() )
),
$product
);?>
</ul>
</div> <?php endwhile;
} else {
echo __( ‘ o products found’ );
}
wp_reset_postdata();
?>
</ul>
<!–/.products–> </main>
<!– #main –>
</div><!– #primary –> <?php
do_action( ‘storefront_sidebar’ );
get_footer();
以下快照展示了代码片段的实际效果。
代码片段解析
上面的代码片段虽然较长，但理解起来相对比较简单。下面是代码中重要部分的简要说明，可以帮助你们根据需要理解和修改：
‘post_type’ => ‘product’：这是 WooCommerce 默认的自定义文章类型，用于显示商品。
‘posts_per_page’ => 12：这是每页显示的最大商品数量，目前设置为 12，可以根据网站需求进行修改。
apply_filters( ‘woocommerce_short_description’, $post->post_excerpt )：显示商品的简短描述和详细描述。
esc_url( $product->add_to_cart_url() )：与 echo 语句配合使用，显示购物车页面的 URL 以及购物车中的商品（如果有）。
esc_attr( $product->get_id() )：获取商品的 ID。
esc_attr( $product->get_sku() )：获取商品的 SKU（库存单位）。
esc_html( $product->add_to_cart_text() )：获取购物车按钮的文本内容。
在“添加到购物车”按钮上方添加文本
另一个比较好的自定义机会是，在自定义“添加到购物车”按钮的上方添加一行文本。下面代码片段通过 echo 语句实现了这一功能：
add_filter(‘woocommerce_product_single_add_to_cart_text’,’custom_add_to_cart_button_woocommerce’);
function custom_add_to_cart_button_woocommerce() {
return __(‘WooCommerce custom add to cart button code’, ‘woocommerce’);
}
上面代码将在按钮上方显示一行文本，实际效果如下图所示：
更改“添加到购物车”按钮的文本
最后一个自定义项是更改按钮上显示的文本。这可以通过下面简单的代码片段实现：
add_filter(‘woocommerce_product_single_add_to_cart_text’,’custom_add_to_cart_button_woocommerce’);
function custom_add_to_cart_button_woocommerce() {
return __(‘WooCommerce custom add to cart button code’, ‘woocommerce’);
}
按钮上的标签会更改为 custom_add_to_cart_button_woocommerce() 函数中 return 语句指定的文本。
总结
自定义 WooCommerce 中的“添加到购物车”按钮是一项实用功能，能让管理员自定义商品页面的外观和功能。这不仅能改善客户的购物体验，还能对购物网站的整体成功产生积极影响，因为按钮在购物流程中起着很重要的作用。如果大家有任何疑问，可以在评论区留言。
常见问题解答
问：如何自定义 WooCommerce 的“添加到购物车”按钮？
答：
在 WooCommerce 中自定义“添加到购物车”按钮可以通过以下三种方法：
使用插件
覆盖主题中的 woocommerce/templates/single-product/add-to-cart/simple.php 文件，来自定义按钮的外观和行为。
使用 woocommerce_single_product_summary 等钩子更改按钮的文本或样式，同时还可以通过 CSS 修改按钮的外观。
问：如何在 WooCommerce 中更改“添加到购物车”按钮的 HTML？
答：
更改“添加到购物车”按钮的 HTML 步骤如下：
创建一个子主题或使用现有主题。
在主题文件夹中覆盖 WooCommerce 模板文件 add-to-cart.php。
在该文件中编辑 HTML 结构，满足你的需求。
问：如何向 WooCommerce 购物车添加自定义字段？
答：
要向 WooCommerce 购物车添加自定义字段，可以使用 woocommerce_after_cart_item_name 钩子。例如，可以添加文本框、选择框或复选框。以下是添加自定义字段的一个示例：
问：如何获取“添加到购物车”按钮？
答：
在 WooCommerce 中获取“添加到购物车”按钮，可以使用 WooCommerce 函数 woocommerce_template_single_add_to_cart()，该函数会在商品页面上输出按钮。