วิธีเพิ่มปุ่มเพิ่มลงในตะกร้าสินค้าใน WooCommerce

เผยแพร่แล้ว: 2021-04-22

เพิ่มปุ่ม Add to Cart แบบกำหนดเองใน WooCommerce คุณกำลังมองหาวิธีเพิ่มปุ่มสั่งใส่ตะกร้าในหน้าใด ๆ หรือไม่ปุ่ม Add to Cart มีความสำคัญมากในร้านค้าออนไลน์ทุกแห่ง เมื่อลูกค้าคลิกที่ปุ่มนี้ สินค้าจะถูกเพิ่มลงในตะกร้าสินค้า

มันนำไปสู่การขายและรายได้โดยตรง

ดังนั้น หากคุณต้องการสร้างเพจที่จะรวมสินค้าสำหรับขาย การเพิ่มปุ่ม Add to Cart แบบกำหนดเองเป็นสิ่งสำคัญ

สิ่งสำคัญคือต้องทราบว่า WooCommerce มีตัวเลือกการปรับแต่งมากมายในระดับต่างๆ เช่น WordPress

วิธีเพิ่มปุ่มเพิ่มลงในตะกร้าสินค้าใน WooCommerce

ในโพสต์นี้ เราจะปรับแต่งปุ่ม Add to Cart และเพิ่มไปยังหน้าเทมเพลตใดๆ เป็นมูลค่าการกล่าวขวัญว่าคุณต้องมีทักษะการเขียนโปรแกรมก่อนที่จะดำเนินการ

อย่างไรก็ตาม หากคุณไม่สะดวกใจกับการจัดการโค้ด โปรดอ่านในขณะที่เราได้พยายามอธิบายแต่ละขั้นตอนอย่างดีที่สุดแล้ว

ให้เราดูว่าคุณจะบรรลุเป้าหมายนี้ได้อย่างไร:

ขั้นตอนในการเพิ่มปุ่มใส่ในรถเข็นแบบกำหนดเองใน 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() ) รับรหัสผลิตภัณฑ์
esc_attr( $product->get_sku() ) รับ SKU สำหรับผลิตภัณฑ์

นี่คือขั้นตอนที่คุณต้องปฏิบัติตาม:

ลงชื่อเข้าใช้ไซต์ WordPress และเข้าถึง แดชบอร์ด ในฐานะผู้ดูแลระบบ
จากเมนูแดชบอร์ด ให้คลิกที่ เมนูลักษณะที่ปรากฏ > เมนูตัวแก้ไขธีม เมื่อหน้า Theme Editor เปิดขึ้น ให้มองหาไฟล์ฟังก์ชันของธีมที่เราจะเพิ่มฟังก์ชันที่จะเพิ่มปุ่ม "หยิบใส่ตะกร้า" แบบกำหนดเอง
เพิ่มรหัสต่อไปนี้ ในไฟล์ 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+ Tips, Tricks & Snippets Ultimate WooCommerce ซ่อนคู่มือ
WooCommerce Redirect หลังจากออกจากระบบ [สุดยอดคู่มือ]
การเปลี่ยนเส้นทาง WooCommerce หลังจากชำระเงิน : เปลี่ยนเส้นทางไปยังหน้าขอบคุณแบบกำหนดเอง
วิธีเพิ่มการค้นหาไปยังหน้าร้านค้าใน WooCommerce
วิธีซ่อนภาพสินค้าในหน้ารถเข็น WooCommerce
วิธีส่งอีเมลเมื่อเปลี่ยนสถานะใน WooCommerce
วิธีเพิ่มฟิลด์ในแบบฟอร์มการลงทะเบียน WooCommerce
วิธีซ่อนร้านค้าใน WooCommerce
วิธีรับชื่อหมวดหมู่ผลิตภัณฑ์ปัจจุบันใน WooCommerce
ปลั๊กอินฟอร์ม WordPress ที่ดีที่สุด 30 อันดับแรก » ปลั๊กอินฟอร์ม WordPress ที่ดีที่สุด
วิธีการเปลี่ยนจุดชำระเงิน WooCommerce
วิธีเปิดแท็บคำอธิบาย WooCommerce โดยค่าเริ่มต้น
วิธีสร้างหน้าหมวดหมู่ที่กำหนดเองใน WooCommerce
วิธีล้างรถเข็นเมื่อออกจากระบบใน WooCommerce
วิธีปรับแต่งหน้าผลิตภัณฑ์ WooCommerce
วิธีเพิ่มสกุลเงินใน WooCommerce [สกุลเงินที่กำหนดเอง]
วิธีตรวจสอบว่าผู้ใช้ลงชื่อเข้าใช้ WordPress
วิธีสร้างหน้ารับคำสั่งซื้อที่กำหนดเอง WooCommerce
วิธีเพิ่มสินค้าลงรถเข็นโดยทางโปรแกรมใน WooCommerce
5+ วิธีที่มีประโยชน์ในการจำกัดความยาวของข้อความที่ตัดตอนมาของ WordPress อย่างมืออาชีพ