نحوه اضافه کردن دکمه سفارشی افزودن به سبد خرید در ووکامرس

دکمه افزودن به سبد خرید شاید مهمترین دکمه در هر فروشگاه 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، نشانی اینترنتی صفحه سبد خرید و موارد موجود در سبد خرید (در صورت وجود) را نشان می دهد.

esc_attr( $product->get_id() )

این خط شناسه محصول را دریافت می کند

esc_attr( $product->get_sku() )

این خط SKU محصول را دریافت می کند

esc_html($product->add_to_cart_text())

اضافه کردن متن در بالای دکمه افزودن به سبد خرید

یکی دیگر از فرصت‌های عالی برای سفارشی‌سازی، افزودن یک متن درست بالای دکمه سفارشی افزودن به سبد خرید است. قطعه زیر خط متن را اضافه می کند. این امر با دستور echo امکان پذیر است.

تغییر متن دکمه

در نهایت، زمان اضافه کردن قسمت نهایی سفارشی سازی فرا رسیده است. تغییر متنی که روی دکمه ظاهر می شود آسان است. این کار از طریق قطعه کد ساده انجام می شود:

سخن آخر!

دکمه سفارشی افزودن به سبد خرید WooCommerce سفارشی سازی مهمی است که به تجربه کاربر ارزش می بخشد و به تبدیل در فروشگاه کمک می کند. اگر برای اعمال این سفارشی سازی در فروشگاه WooCommerce خود به کمک نیاز دارید، در قسمت نظرات ما رو از سوالاتتون آگاه کنید.س