WooCommerceのカートボタンにカスタム追加を追加する方法

公開: 2021-04-22

WooCommerceのカートボタンにカスタム追加を追加任意のページにカスタムの[カートに追加]ボタンを追加する方法をお探しですか？[カートに追加]ボタンは、どのオンラインストアでも非常に重要です。顧客がこのボタンをクリックすると、商品がカートに追加されます。

それは直接売上と収益につながります。

したがって、販売する商品を含むページを作成する場合は、カスタムの[カートに追加]ボタンを追加することが重要です。

WooCommerceには、WordPressなど、さまざまなレベルで利用できる多くのカスタマイズオプションが用意されていることに注意してください。

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は、ページに表示できる投稿の最大数を設定します。
apply_filters（ 'woocommerce_short_description'、$ post-> post_excerpt）は、カートのページURLとカート内のアイテムを表示します
esc_attr（$ product-> get_id（））は製品IDを取得します
esc_attr（$ product-> get_sku（））は、商品のSKUを取得します

従う必要のある手順は次のとおりです。

WordPressサイトにログインし、管理者ユーザーとしてダッシュボードにアクセスします。
[ダッシュボード]メニューから、[外観メニュー]> [テーマエディターメニュー]をクリックします。テーマエディタページが開いたら、カートにカスタム追加ボタンを追加する関数を追加するテーマ関数ファイルを探します。
次のコードをphpファイルに追加します。

add_filter('woocommerce_product_single_add_to_cart_text','njengah_add_to_cart_button_woocommerce');

function njengah_add_to_cart_button_woocommerce() {

return __('Custom add to cart button code', 'woocommerce');

}

これが結果です：

結論

これで、カスタムのカートに追加ボタンを追加できるようになります。カスタムボタンは、ユーザーエクスペリエンスに付加価値をもたらすため、重要です。

カスタムコードを使用してページを編集しているため、子テーマを作成することをお勧めします。これにより、更新中に変更が失われないようになります。

同様の記事

100以上のヒント、コツ、スニペットUltimate WooCommerce Hide Guide
ログアウト後のWooCommerceリダイレクト[究極のガイド]
チェックアウト後のWooCommerceリダイレクト：カスタムサンキューページにリダイレクト
WooCommerceのショップページに検索を追加する方法
カートページで商品画像を非表示にする方法WooCommerce
WooCommerceでステータス変更時にメールを送信する方法
WooCommerce登録フォームにフィールドを追加する方法
WooCommerceでショップを非表示にする方法
WooCommerceで現在の製品カテゴリ名を取得する方法
トップ30以上の最高のWordPressフォームプラグイン»最高のWordPressフォームプラグイン
チェックアウトエンドポイントを変更する方法WooCommerce
WooCommerceの説明タブをデフォルトで開いたままにする方法
WooCommerceでカスタムカテゴリページを作成する方法
WooCommerceでログアウト時にカートをクリアする方法
WooCommerceの製品ページをカスタマイズする方法
WooCommerceに通貨を追加する方法[カスタム通貨]
ユーザーがWordPressにログインしているかどうかを確認する方法
カスタムオーダー受信ページWooCommerceを作成する方法
WooCommerceでプログラムでカートに商品を追加する方法
プロのようにWordPressの抜粋の長さを制限する5つ以上の便利な方法