如何自定义 WooCommerce 添加到购物车按钮

WooCommerce s."カートに入れるボタンを使用すると、お客様は簡単にショッピングサイトから商品を購入することができます。お客様が"カートに入れる」ボタンそうすると、商品がショッピングカートに追加され、買い物を続けるか、そのままチェックアウトプロセスに進むことができます。

このボタンは顧客の購入プロセスを簡素化し、カートに商品を追加して購入を完了するのを容易にします。多くのウェブサイトでは、顧客の全体的なユーザーエクスペリエンスを向上させるためにカスタマイズする必要があるかもしれません。

カートに入れる」ボタンをカスタマイズするメリット

WooCommerceでカスタム "カートに追加 "ボタンを使用するメリットはたくさんありますが、ここでは3つの主なものを紹介します：

美観の向上
カスタムボタンのデザインは、ウェブサイトの全体的な美観を向上させるために、ブランドスタイルやカラースキームに一致させることができます。これにより、ショッピングサイトに統一感とプロフェッショナルなビジュアル効果が生まれます。
機能性の向上
カスタマイズされたボタンは、価格、在庫状況、適用される割引やキャンペーンなど、商品に関する詳細情報を表示するなど、より高い機能を提供することができます。
コンバージョン率の向上
改善することで "カートに入れる「ボタンの美しさと機能性は、コンバージョンを増やすのに効果的です。

テンプレートに「カートに入れる」ボタンを表示

次のコード・スニペットは、選択された 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="/ja/</?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="/ja/</?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() ):: と連動して エコー ステートメントは、ショッピングカートページのURLと、カートに商品がある場合はその商品を表示するために連動します。
esc_attr( $product->get_id() )商品のIDを取得します。
esc_attr( $product->get_sku() )商品のSKU（在庫管理単位）を取得します。
esc_html( $product->add_to_cart_text() )ショッピングカートボタンのテキストを取得します。

カートに入れる」ボタンの上にテキストを追加します。

カスタマイズのもう一つの良い機会は、"カートに入れる」ボタンの上にテキスト行を追加します。次のコード・スニペットは、テキスト行を エコー ステートメントはこの機能を実装しています：

add_filter('woocommerce_product_single_add_to_cart_text', 'custom_add_to_cart_button_woocommerce')；
関数 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')；
関数 custom_add_to_cart_button_woocommerce() {
return __('WooCommerce custom add to cart button code', 'woocommerce'); }.
}

ボタンのラベルが custom_add_to_cart_button_woocommerce() 関数で 戻り ステートメントで指定されたテキスト。

概要

WooCommerceのカスタマイズ "カートに入れる「ボタンは、管理者が商品ページの外観や機能をカスタマイズできる便利な機能です。これは、顧客のショッピング体験を向上させるだけでなく、ボタンがショッピングプロセスにおいて重要な役割を果たすため、ショッピングサイト全体の成功にもプラスの影響を与えます。ご質問があれば、コメント欄にご記入ください。

よくある質問

Q: WooCommerceの「カートに入れる」ボタンはどのようにカスタマイズできますか？
答えてください：
WooCommerceのカートに追加ボタンをカスタマイズするには、3つの方法があります：

プラグインの使用
のテーマを上書きします。 woocommerce/templates/single-product/add-to-cart/simple.php ファイルでボタンの外観と動作をカスタマイズできます。
使う woocommerce_single_product_summary ボタンのテキストやスタイルを変更したり、CSSでボタンの外観を変更したりするフックです。

Q: WooCommerceの「カートに追加」ボタンのHTMLを変更するには？
答えてください：
カートに入れる」ボタンのHTMLを変更するには、以下の手順に従ってください：

を作成します。サブテーマまたは既存のテーマを使用します。
テーマフォルダ内のWooCommerceテンプレートファイルを上書きします。 カートに追加.php.
このファイルのHTML構造をあなたのニーズに合わせて編集してください。

Q: WooCommerceショッピングカートにカスタムフィールドを追加する方法を教えてください。
答えてください：
WooCommerceのカートにカスタムフィールドを追加するには woocommerce_after_cart_item_name フックです。例えば、テキストボックス、セレクトボックス、チェックボックスを追加することができます。以下はカスタムフィールドを追加する例です：

Q: 「カートに入れる」ボタンはどうすれば表示されますか？
答えてください：
WooCommerceで「カートに追加」ボタンを取得するには、WooCommerceの関数 woocommerce_template_single_add_to_cart()この関数は、商品ページにボタンを出力します。

お問い合わせ
記事が読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み