كيفية إضافة زر إضافة مخصص إلى عربة التسوق في 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" => "المنتج" هو نوع المنشور المخصص الافتراضي لـ WooCommerce.

• 'posts_per_page' => 12 يعيّن الحد الأقصى لعدد المشاركات التي يمكن عرضها على الصفحة.
• يعرض application_filters ('woocommerce_short_description' ، $ post-> post_excerpt) عنوان URL لصفحة سلة التسوق والعناصر الموجودة في سلة التسوق
• تحصل esc_attr ($ product-> get_id ()) على معرف المنتج
• esc_attr ($ product-> get_sku ()) يحصل على SKU للمنتج

فيما يلي الخطوات التي يجب عليك اتباعها:

1. قم بتسجيل الدخول إلى موقع WordPress الخاص بك والوصول إلى لوحة التحكم بصفتك المستخدم المسؤول.
2. من قائمة لوحة التحكم ، انقر فوق قائمة المظهر> قائمة محرر السمات . عند فتح صفحة Theme Editor ، ابحث عن ملف وظائف السمة حيث سنضيف الوظيفة التي ستضيف زر إضافة مخصص إلى عربة التسوق.
3. أضف الكود التالي إلى ملف 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');

}

4. هذه هي النتيجة:

استنتاج

الآن ، يجب أن تكون قادرًا على إضافة زر إضافة مخصص إلى سلة التسوق. يعد الزر المخصص مهمًا لأنه يضيف قيمة إلى تجربة المستخدم.

نظرًا لأننا نقوم بتحرير الصفحة باستخدام رمز مخصص ، فإننا نوصي بإنشاء سمة فرعية. سيضمن ذلك عدم فقدان التغييرات أثناء التحديث.

مقالات مماثلة

1. 100+ تلميحات وحيل ومقتطفات دليل إخفاء WooCommerce النهائي
2. إعادة توجيه WooCommerce بعد تسجيل الخروج [الدليل النهائي]
3. إعادة توجيه WooCommerce بعد الخروج: إعادة التوجيه إلى صفحة الشكر المخصصة
4. كيفية إضافة بحث إلى صفحة التسوق في WooCommerce
5. كيفية إخفاء صورة المنتج على صفحة عربة التسوق WooCommerce
6. كيفية إرسال بريد إلكتروني عند تغيير الحالة في WooCommerce
7. كيفية إضافة الحقول في نموذج تسجيل WooCommerce
8. كيفية إخفاء التسوق في WooCommerce
9. كيفية الحصول على اسم فئة المنتج الحالي في WooCommerce
10. أعلى 30+ أفضل ملحقات WordPress Form »أفضل مكون إضافي لنموذج WordPress
11. كيفية تغيير WooCommerce Checkout Endpoints
12. كيفية الاحتفاظ بعلامة تبويب وصف WooCommerce مفتوحة افتراضيًا
13. كيفية إنشاء صفحة فئة مخصصة في WooCommerce
14. كيفية مسح سلة التسوق عند تسجيل الخروج في WooCommerce
15. كيفية تخصيص صفحات منتج WooCommerce
16. كيفية إضافة عملة إلى WooCommerce [عملة مخصصة]
17. كيفية التحقق مما إذا كان المستخدم قد تم تسجيل دخوله إلى WordPress
18. كيفية إنشاء طلب مخصص تم استلام صفحة WooCommerce
19. كيفية إضافة المنتج إلى عربة التسوق برمجيًا في WooCommerce
20. 5+ طرق مفيدة للحد من طول مقتطفات WordPress مثل المحترفين