WooCommerce 的“添加到購物車”按鈕能讓客戶輕松地從你的購物網(wǎng)站購買商品。當(dāng)客戶點(diǎn)擊“添加到購物車”按鈕時，商品會被添加到他們的購物車中，然后他們可以繼續(xù)購物或直接進(jìn)入結(jié)賬流程。

這個按鈕可以簡化客戶的購買流程，讓他們更方便地將商品加入購物車并完成購買。很多網(wǎng)站可能需要對其進(jìn)行自定義，改善客戶的整體用戶體驗(yàn)。

自定義“添加到購物車”按鈕的好處

在 WooCommerce 中使用自定義“添加到購物車”按鈕有許多好處，這里列舉三個主要優(yōu)勢：

1. 提升美觀性
   自定義按鈕設(shè)計(jì)可以與品牌風(fēng)格和配色方案相匹配，提升網(wǎng)站整體美觀性。這樣可以給購物網(wǎng)站營造統(tǒng)一且專業(yè)的視覺效果。
2. 增強(qiáng)功能性
   自定義按鈕可以提供更強(qiáng)的功能性，例如顯示商品的更多信息，如價格、庫存狀態(tài)或適用的折扣和促銷信息。
3. 提高轉(zhuǎn)化率
   通過改進(jìn)“添加到購物車”按鈕的美觀性和功能性，能夠有效提高轉(zhuǎn)化率，從而增加整體收入和盈利能力。

在模板中顯示“添加到購物車”按鈕

下面代碼片段可以在選擇的任何 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();

以下快照展示了代碼片段的實(shí)際效果。

代碼片段解析

上面的代碼片段雖然較長，但理解起來相對比較簡單。下面是代碼中重要部分的簡要說明，可以幫助你們根據(jù)需要理解和修改：

• 'post_type' => 'product'：這是 WooCommerce 默認(rèn)的自定義文章類型，用于顯示商品。
• 'posts_per_page' => 12：這是每頁顯示的最大商品數(shù)量，目前設(shè)置為 12，可以根據(jù)網(wǎng)站需求進(jìn)行修改。
• apply_filters( 'woocommerce_short_description', $post->post_excerpt )：顯示商品的簡短描述和詳細(xì)描述。
• 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() )：獲取購物車按鈕的文本內(nèi)容。

在“添加到購物車”按鈕上方添加文本

另一個比較好的自定義機(jī)會是，在自定義“添加到購物車”按鈕的上方添加一行文本。下面代碼片段通過 echo 語句實(shí)現(xiàn)了這一功能：

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');
}

上面代碼將在按鈕上方顯示一行文本，實(shí)際效果如下圖所示：

更改“添加到購物車”按鈕的文本

最后一個自定義項(xiàng)是更改按鈕上顯示的文本。這可以通過下面簡單的代碼片段實(shí)現(xiàn)：

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');
}

按鈕上的標(biāo)簽會更改為 custom_add_to_cart_button_woocommerce() 函數(shù)中 return 語句指定的文本。

總結(jié)

自定義 WooCommerce 中的“添加到購物車”按鈕是一項(xiàng)實(shí)用功能，能讓管理員自定義商品頁面的外觀和功能。這不僅能改善客戶的購物體驗(yàn)，還能對購物網(wǎng)站的整體成功產(chǎn)生積極影響，因?yàn)榘粹o在購物流程中起著很重要的作用。如果大家有任何疑問，可以在評論區(qū)留言。

常見問題解答

問：如何自定義 WooCommerce 的“添加到購物車”按鈕？
答：
在 WooCommerce 中自定義“添加到購物車”按鈕可以通過以下三種方法：

1. 使用插件
2. 覆蓋主題中的 woocommerce/templates/single-product/add-to-cart/simple.php 文件，來自定義按鈕的外觀和行為。
3. 使用 woocommerce_single_product_summary 等鉤子更改按鈕的文本或樣式，同時還可以通過 CSS 修改按鈕的外觀。

問：如何在 WooCommerce 中更改“添加到購物車”按鈕的 HTML？
答：
更改“添加到購物車”按鈕的 HTML 步驟如下：

1. 創(chuàng)建一個子主題或使用現(xiàn)有主題。
2. 在主題文件夾中覆蓋 WooCommerce 模板文件 add-to-cart.php。
3. 在該文件中編輯 HTML 結(jié)構(gòu)，滿足你的需求。

問：如何向 WooCommerce 購物車添加自定義字段？
答：
要向 WooCommerce 購物車添加自定義字段，可以使用 woocommerce_after_cart_item_name 鉤子。例如，可以添加文本框、選擇框或復(fù)選框。以下是添加自定義字段的一個示例：

問：如何獲取“添加到購物車”按鈕？
答：
在 WooCommerce 中獲取“添加到購物車”按鈕，可以使用 WooCommerce 函數(shù) woocommerce_template_single_add_to_cart()，該函數(shù)會在商品頁面上輸出按鈕。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M(fèi)解答！免費(fèi)助力個人，小企站點(diǎn)！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時間：周一至周五，9:30-18:30，節(jié)假日休息