Comment ajouter un bouton "Ajouter au panier" personnalisé dans WooCommerce

WooCommerce s."添加到购物车”按钮能让客户轻松地从你的购物网站购买商品。当客户点击“添加到购物车”按钮时，商品会被添加到他们的购物车中，然后他们可以继续购物或直接进入结账流程。

这个按钮可以简化客户的购买流程，让他们更方便地将商品加入购物车并完成购买。很多网站可能需要对其进行自定义，改善客户的整体用户体验。

自定义“添加到购物车”按钮的好处

在 WooCommerce 中使用自定义“添加到购物车”按钮有许多好处，这里列举三个主要优势：

1. 提升美观性
   自定义按钮设计可以与品牌风格和配色方案相匹配，提升网站整体美观性。这样可以给购物网站营造统一且专业的视觉效果。
2. 增强功能性
   自定义按钮可以提供更强的功能性，例如显示商品的更多信息，如价格、库存状态或适用的折扣和促销信息。
3. Augmenter le taux de conversion
   通过改进“添加到购物车”按钮的美观性和功能性，能够有效提高转化率，从而增加整体收入和盈利能力。

在模板中显示“添加到购物车”按钮

下面代码片段可以在选择的任何 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="/fr/</?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="/fr/</?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() ): : En collaboration avec l'Agence européenne pour la sécurité et la santé au travail (ESA), l écho 语句配合使用，显示购物车页面的 URL 以及购物车中的商品（如果有）。
• esc_attr( $product->get_id() )：获取商品的 ID。
• esc_attr( $product->get_sku() )：获取商品的 SKU（库存单位）。
• esc_html( $product->add_to_cart_text() )：获取购物车按钮的文本内容。

在“添加到购物车”按钮上方添加文本

另一个比较好的自定义机会是，在自定义“添加到购物车”按钮的上方添加一行文本。下面代码片段通过 écho 语句实现了这一功能：

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 语句指定的文本。

résumés

自定义 WooCommerce 中的“添加到购物车”按钮是一项实用功能，能让管理员自定义商品页面的外观和功能。这不仅能改善客户的购物体验，还能对购物网站的整体成功产生积极影响，因为按钮在购物流程中起着很重要的作用。如果大家有任何疑问，可以在评论区留言。

Questions fréquemment posées

问：如何自定义 WooCommerce 的“添加到购物车”按钮？
Réponse :
在 WooCommerce 中自定义“添加到购物车”按钮可以通过以下三种方法：

1. Utilisation de plug-ins
2. 覆盖主题中的 woocommerce/templates/single-product/add-to-cart/simple.php 文件，来自定义按钮的外观和行为。
3. utiliser woocommerce_single_product_summary 等钩子更改按钮的文本或样式，同时还可以通过 CSS 修改按钮的外观。

问：如何在 WooCommerce 中更改“添加到购物车”按钮的 HTML？
Réponse :
更改“添加到购物车”按钮的 HTML 步骤如下：

1. Créez unsous-thème或使用现有主题。
2. 在主题文件夹中覆盖 WooCommerce 模板文件 add-to-cart.php.
3. 在该文件中编辑 HTML 结构，满足你的需求。

问：如何向 WooCommerce 购物车添加自定义字段？
Réponse :
要向 WooCommerce 购物车添加自定义字段，可以使用 woocommerce_after_cart_item_name 钩子。例如，可以添加文本框、选择框或复选框。以下是添加自定义字段的一个示例：

问：如何获取“添加到购物车”按钮？
Réponse :
在 WooCommerce 中获取“添加到购物车”按钮，可以使用 WooCommerce 函数 woocommerce_template_single_add_to_cart()，该函数会在商品页面上输出按钮。