วิธีปรับแต่งเทมเพลต WooCommerce โดยทางโปรแกรม

คุณต้องการแก้ไขเทมเพลตในไซต์ของคุณหรือไม่? คู่มือนี้จะแสดงให้คุณเห็น ถึงวิธีปรับแต่งเทมเพลต WooCommerce โดยทางโปรแกรมทั้งโดยใช้ hooks และเขียนทับ

ทำไมต้องแก้ไขเทมเพลต WooCommerce

การช็อปปิ้งออนไลน์นั้นสะดวกสบายและเร็วกว่าการไปที่ร้านที่มีหน้าร้านจริง ดังนั้นอีคอมเมิร์ซจึงได้รับความนิยมอย่างมากในช่วงไม่กี่ปีที่ผ่านมา ด้วยการแข่งขันที่สูงมาก การจัดตั้งร้านค้า WooCommerce ของคุณและนำผลิตภัณฑ์ของคุณเข้าสู่โลกออนไลน์ไม่เพียงพอ คุณต้องหาวิธีสร้างความแตกต่างและ โดดเด่นจากฝูงชน

วิธีที่ดีที่สุดวิธีหนึ่งคือการปรับแต่งร้านค้าของคุณ นอกเหนือจากการเปลี่ยนส่วนหัวและการแก้ไขหน้าหลัก เช่น การชำระเงินหรือหน้าร้านค้า คุณยังสามารถปรับแต่งเทมเพลตที่คุณใช้ได้อีกด้วย มีไซต์ไม่มากนักที่แก้ไขเทมเพลต ดังนั้นคุณจะสามารถ ได้เปรียบเหนือคู่แข่งของคุณ

หากคุณมีทักษะในการเขียนโค้ด คุณอาจทราบดีว่าแนะนำให้ใช้ธีมลูกเมื่อแก้ไขร้านค้าของคุณ ในทำนองเดียวกัน WordPress และ WooCommerce hooks ในตัวนั้นมีความเป็นไปได้มากมายในการแก้ไขและเพิ่มคุณสมบัติใหม่ให้กับเว็บไซต์ใด ๆ

วิธีปรับแต่งเทมเพลต WooCommerce โดยทางโปรแกรม

มีสองวิธีหลักในการปรับแต่งเทมเพลต WooCommerce โดยทางโปรแกรม:

1. พร้อมตะขอ
2. การเขียนทับแม่แบบ

แต่ละวิธีเหล่านี้มีจุดประสงค์ที่แตกต่างกัน มาดูความแตกต่างหลัก ๆ ของพวกเขากันดีกว่า

เขียนทับไฟล์เทมเพลตหรือใช้ hooks?

การปรับแต่งร้านค้าของคุณด้วยตะขอเป็นแนวทางปฏิบัติที่แนะนำ อย่างไรก็ตาม เมื่อปรับแต่ง WooCommerce ด้วย hooks คุณอาจประสบปัญหาความไม่ลงรอยกัน สำหรับการปรับแต่งที่ซับซ้อนมากขึ้น การเขียนทับไฟล์เทมเพลต WooCommerce อาจเป็นตัวเลือกที่ดีกว่า

สิ่งสำคัญที่ควรทราบคือเมื่อคุณเขียนทับไฟล์เทมเพลต hooks ที่ทำงานบนไฟล์นั้นจะหยุดทำงาน เบ็ดแต่ละอันชี้ไปที่ไฟล์ใดไฟล์หนึ่ง ดังนั้นคุณจะไม่สามารถใช้งานได้หากคุณแก้ไขไฟล์เดียวกันที่เรียกใช้ hook

ตัวอย่างเช่น มาคว้าไฟล์ single-product.php เพื่อดูว่ามีการสร้าง hook อย่างไร นอกจากนี้ ให้สังเกตว่าตะขออยู่ที่ไหนทั้งก่อนและหลังการวนซ้ำ

 if ( ! กำหนด ( 'ABSPATH' ) ) {
        ทางออก; // ออกหากเข้าถึงได้โดยตรง
 }
 get_header( 'ร้านค้า' ); ?>
 <?php
                /**
                 * woocommerce_before_main_content ขอเกี่ยว
                 *
                 * @hooked woocommerce_output_content_wrapper - 10 (เอาต์พุตเปิด divs สำหรับเนื้อหา)
                 * @hooked woocommerce_breadcrumb - 20
                 */
                do_action( 'woocommerce_before_main_content' );
        ?>
                <?php ในขณะที่ ( have_posts() ) : ?>
                        <?php the_post(); ?>
                        <?php wc_get_template_part( 'เนื้อหา', 'ผลิตภัณฑ์เดียว' ); ?>
                <?php เมื่อสิ้นสุด; // สิ้นสุดลูป ?>
        <?php
                /**
                 * เบ็ด woocommerce_after_main_content
                 *
                 * @hooked woocommerce_output_content_wrapper_end - 10 (เอาต์พุตปิด divs สำหรับเนื้อหา)
                 */
                do_action( 'woocommerce_after_main_content' );
        ?>
        <?php
                /**
                 * เบ็ด woocommerce_sidebar
                 *
                 * @hooked woocommerce_get_sidebar - 10
                 */
                do_action( 'woocommerce_sidebar' );
        ?>
 <?php
 get_footer( 'ร้านค้า' );

หากคุณได้ดูสคริปต์ คุณจะเห็นว่าเราสร้าง hooks บน do_action('name-of-the-hook'); เส้น

สมมติว่าคุณมีเบ็ดต่อไปนี้ในไฟล์ functions.php ของธีมลูกของคุณ:

 add_action('woocommerce_after_main_content',function(){echo “เนื้อหาที่กำหนดเองหลังจากไฟล์เทมเพลตผลิตภัณฑ์เดียว”;});

คุณสามารถสะท้อนเนื้อหาเดียวกันได้จากไฟล์เทมเพลตดังนี้:

 <?php เมื่อสิ้นสุด; // สิ้นสุดลูป ?>
        <?php
 echo "เนื้อหาที่กำหนดเองหลังจากไฟล์เทมเพลตผลิตภัณฑ์เดียว";
                /**
                 * เบ็ด woocommerce_after_main_content
 do_action( 'woocommerce_after_main_content' );

อย่างไรก็ตาม การทำเช่นนั้น do_action('woocommerce_after_main_content'); ฟังก์ชั่นจะไร้ประโยชน์เนื่องจากคุณได้เพิ่มรหัสของคุณที่นั่นแทนที่จะดึงมันด้วยเบ็ด ดังนั้นคุณอาจต้องการลบ hooks ที่ไม่จำเป็นทั้งหมดในไฟล์เพื่อลบ do_action('name-of-the-hook'); ส่วนต่างๆ

โปรดทราบว่าหากคุณใช้ woocommerce_after_main_content() ขอเกี่ยวที่อื่นในเว็บไซต์ของคุณและคุณลบ do_action( 'name_of_your_hook' ); ในไฟล์นี้ hook จะไม่ทำงานอีกต่อไป

หลังจากลบ hooks และแท็ก PHP ที่ไม่จำเป็นออกแล้ว ไฟล์ของคุณควรมีลักษณะดังนี้:

 if ( ! กำหนด ( 'ABSPATH' ) ) {
 ทางออก; // ออกหากเข้าถึงได้โดยตรง
 }
 get_header( 'ร้านค้า' );
 ในขณะที่ ( have_posts() ) :
 the_post();
 wc_get_template_part( 'เนื้อหา', 'ผลิตภัณฑ์เดียว' );
 ในที่สุด; // สิ้นสุดลูป
 do_action( 'woocommerce_sidebar' );
 get_footer( 'ร้านค้า' );

หมายเหตุ : การลบ hooks ด้วยวิธีนี้อาจส่งผลต่อโค้ดของบุคคลที่สาม เช่น ปลั๊กอินและธีม ทำให้เกิดความล้มเหลวหรือทำลายเว็บไซต์ของคุณ ถือว่าคุณรู้ว่าคุณกำลังทำอะไรอยู่

ปรับแต่งและเขียนทับไฟล์เทมเพลต WooCommerce

การเขียนทับไฟล์เทมเพลต WooCommerce ช่วยให้คุณปรับแต่งร้านค้าของคุณได้อย่างยืดหยุ่น อย่างไรก็ตาม ดังที่ได้กล่าวไว้ก่อนหน้านี้ คุณต้องเข้าใจว่าเมื่อคุณเขียนทับเนื้อหาของไฟล์เทมเพลต hooks ที่ทำงานบนไฟล์นั้นจะหยุดทำงาน นอกจากนี้ WooCommerce อาจเปลี่ยนไฟล์เทมเพลตเป็นครั้งคราว ดังนั้นหากมีการอัปเดตและเปลี่ยนไฟล์ คุณอาจพบว่าไฟล์ที่คุณแก้ไขล้าสมัย

สิ่งที่ควรทราบเมื่อเขียนทับเทมเพลต

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

การเขียนทับเทมเพลต WooCommerce นั้นคล้ายกับการเขียนทับไฟล์ functions.php ข้อแตกต่างหลักคือ คุณแก้ไขไฟล์เทมเพลตของ WooCommerce แทนไฟล์ธีมของคุณ

ในการทำเช่นนั้น คุณต้องคัดลอกไฟล์เทมเพลตที่ต้องการจากโฟลเดอร์เทมเพลตปลั๊กอิน WooCommerce และวางลงในธีมย่อยของคุณภายใต้โฟลเดอร์ WooCommerce หากคุณปฏิบัติตามโครงสร้างเดียวกันของโฟลเดอร์เทมเพลต WooCommerce ชื่อไฟล์ และโฟลเดอร์ย่อย คุณจะสามารถเขียนทับไฟล์เทมเพลตได้ แม้กระทั่งไฟล์ที่อยู่ในโฟลเดอร์ย่อย

มีไฟล์เทมเพลต WooCommerce จำนวนมากและแต่ละไฟล์มีหน้าที่รับผิดชอบงานเดียว คุณสามารถตรวจสอบรายการไฟล์เทมเพลตทั้งหมดที่คุณสามารถแก้ไขได้ รวมถึงไดเรกทอรีย่อยและโครงสร้างโฟลเดอร์ในลิงก์นี้

อย่างที่คุณเห็น มีไฟล์บางไฟล์ในโฟลเดอร์เทมเพลตรูทรวมถึงไดเร็กทอรีย่อยหลายรายการ คุณสามารถปรับแต่งไฟล์ภายในไดเร็กทอรีย่อยด้วยวิธีเดียวกับที่คุณแก้ไขไฟล์หลัก เช่น archive-product.php , single-product.php หรือ content-single-product.php ในทำนองเดียวกัน คุณยังสามารถปรับแต่งไฟล์ในรถเข็น บัญชีของฉัน อีเมล หรือโฟลเดอร์การชำระเงิน หากคุณใช้ชื่อโฟลเดอร์และโครงสร้างเดียวกันกับธีมย่อยของคุณ

ดังนั้น หากคุณต้องการปรับแต่งไฟล์เหล่านี้ ธีมย่อยของคุณจะมีลักษณะดังนี้:

ที่กล่าวว่า มาดูตัวอย่างบางสิ่งที่คุณสามารถทำได้เพื่อปรับแต่งเทมเพลต WooCommerce

1. เพิ่มรหัสย่อให้กับเทมเพลต WooCommerce

ทางเลือกหนึ่งที่น่าสนใจคือการใช้รหัสย่อในรหัสของคุณ รหัสย่อที่มีอยู่ส่วนใหญ่ควรทำงานที่นี่ แต่โดยทั่วไปแล้วจะพบรหัสย่อที่ไม่สนับสนุนนอก WooCommerce และ WordPress อย่างเป็นทางการ

ตัวอย่างเช่น สคริปต์ต่อไปนี้จะรวมแดชบอร์ดบัญชีในหน้าผลิตภัณฑ์เดียวทั้งหมด อย่าลืมวางลงในไฟล์ single-product.php ที่คุณสร้างในธีมย่อยของคุณ

 <?php
 if ( ! กำหนด ( 'ABSPATH' ) ) {
 ทางออก; // ออกหากเข้าถึงได้โดยตรง
 }
 get_header( 'ร้านค้า' );
 ในขณะที่ ( have_posts() ) :
 the_post();
 wc_get_template_part( 'เนื้อหา', 'ผลิตภัณฑ์เดียว' );
 ในที่สุด; // สิ้นสุดลูป
 do_action( 'woocommerce_sidebar' );
 $t= '<div><h4>บัญชีของฉัน</h4>';
 $t.= do_shortcode(" [ woocommerce_my_account ] ");
 $t.="</div>";
 เสียงสะท้อน $t;
 get_footer( 'ร้านค้า' );

และนี่คือผลลัพธ์ในหน้าผลิตภัณฑ์สด:

2. แสดงเนื้อหาสำหรับลูกค้าที่ซื้อสินค้านั้นมาก่อน

หากคุณมีลูกค้าที่ซื้อผลิตภัณฑ์จากคุณแล้วและกลับมาซื้อผลิตภัณฑ์เดิมอีกครั้ง คุณสามารถให้รหัสส่วนลดแก่ลูกค้าเพื่อปรับปรุงประสบการณ์ของพวกเขาและทำให้พวกเขากลับมาที่ร้านค้าของคุณซ้ำแล้วซ้ำอีก

สคริปต์ต่อไปนี้จะแสดงเนื้อหาในหน้าผลิตภัณฑ์สำหรับลูกค้าที่ส่งคืนที่ซื้อผลิตภัณฑ์เดียวกันในอดีต อีกครั้ง เราแก้ไขไฟล์ single-product.php :

 get_header( 'ร้านค้า' );
 ในขณะที่ ( have_posts() ) :
 the_post();
 wc_get_template_part( 'เนื้อหา', 'ผลิตภัณฑ์เดียว' );
 ในที่สุด; // สิ้นสุดลูป
 $current_user = wp_get_current_user();
 ถ้า ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $product->get_id() ) ):
 echo '<div class="user-bought">&หัวใจ; เฮ้ ' . $current_user->first_name ' คุณเคยซื้อสิ่งนี้มาก่อน ซื้ออีกครั้งโดยใช้คูปองนี้: <b>PURCHASE_AGAIN_21</b></div>';
 เอนดิฟ;
 get_footer( 'ร้านค้า' ); 

3. ลบปุ่มหยิบลงตะกร้าตามปริมาณสินค้าและราคารวมของตะกร้า

อีกตัวอย่างหนึ่งที่น่าสนใจหากคุณต้องการปรับแต่งเทมเพลต WooCommerce ของคุณโดยทางโปรแกรมคือการเพิ่มปุ่มรถเข็นตามจำนวนรายการที่ลูกค้าซื้อและราคารวมของรถเข็น

ในกรณีนี้ เราจะเข้าสู่ WooCommerce loop โดยใช้ไฟล์ที่อยู่ในโฟลเดอร์ loop ในไดเร็กทอรีเทมเพลต เพียงสร้างไฟล์ add-to-cart.php ใหม่ภายใต้โฟลเดอร์ชื่อ loop ภายใต้โฟลเดอร์ woocommerce ของธีมลูกของคุณ และวางสคริปต์นี้:

 if ( ! กำหนด ( 'ABSPATH' ) ) {
 ทางออก;
 }
 ผลิตภัณฑ์ $ ทั่วโลก;
 $count= WC()->cart->get_cart_contents_count(); $count= WC()->รถเข็น->get_cart_contents_count();
 $total_price= WC()->cart->get_cart_total();
 preg_match_all('!\d+!', $total_price, $matches);
 $to_int = intval($matches[0][1]);
 ถ้า($to_int>500){
 echo "เกินจำนวนที่จำกัดสำหรับรถเข็นทั้งหมด";
 }
 elseif($นับ<10){
 echo Apply_filters (
 'woocommerce_loop_add_to_cart_link', // WPCS: XSS ตกลง
 sprintf(
 '<a href="%s" data-quantity="%s" class="%s" %s>%s</a>',
 esc_url( $product->add_to_cart_url() ),
 esc_attr( isset( $args['quantity'] ) ? $args['quantity'] : 1 ),
 esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ),
 isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '',
 esc_html( $product->add_to_cart_text() )
 ),$สินค้า,$args);
 }
 อื่น{
 echo "เกินขีดจำกัดจำนวน";
 }

ในกรณีนี้ เรากำลังเพิ่มคำสั่ง if() ตรรกะตามเงื่อนไขเพื่อตรวจสอบว่ามีสินค้าที่เพิ่มในรถเข็นมากกว่า 10 รายการหรือไม่ และราคารวมของรถเข็นไม่เกิน 500 ดอลลาร์

อย่างที่คุณเห็น เรากำลังเข้าสู่ขอบเขตคลาส WooCommerce ที่เรียกอ็อบเจ็กต์ WooCommerce ด้วยวิธีนี้: WC()->cart ด้วยวิธีนี้ คุณสามารถดึงข้อมูลบางอย่างเพื่อเพิ่มปุ่มรถเข็นไปยังหน้าร้านค้าได้หรือไม่ ขึ้นอยู่กับเงื่อนไขของคุณ

นี่คือผลลัพธ์เมื่อใช้ข้อจำกัดตามเงื่อนไขทั้งสอง:

โปรดทราบว่าการดำเนินการนี้จะใช้ได้เฉพาะในหน้าร้านค้าหลักเท่านั้น คุณจะต้องเพิ่มโค้ดเพิ่มเติมหากต้องการทำเช่นเดียวกันกับหน้าอื่นๆ

4. แก้ไขไฟล์เทมเพลตอีเมล WooCommerce

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

เราจะเพิ่มลิงก์ในส่วนหัวของเลย์เอาต์อีเมล ดังนั้นเราต้องการสำเนาของไฟล์ email-header.php ซึ่งอยู่ในโฟลเดอร์อีเมลของไดเร็กทอรีย่อยเทมเพลตของ WooCommerce

สร้างโฟลเดอร์ใหม่ในธีมลูกของคุณ และวางไฟล์ในนั้นด้วยชื่อเดียวกัน คุณจะเห็นแฟล็กเริ่มต้น <!–header–> และ <!–end header–> และนั่นคือที่ที่คุณจะเพิ่มลิงก์:

 <!-- ส่วนหัว -->
 <table border="0" cellpadding="0" cellspacing="0" width="100%">
 <tr>
 <td>
 <h1><?php echo $email_heading; ?></h1>
 <h3>
 <?php echo '<span class="my-link"><a href="#login-URL">เข้าสู่ระบบบัญชีของคุณ</a></span>';?>
 </h3>
 </td>
 </tr>
 </table>
 <!-- End Header →

แค่นั้นแหละ! คุณเพิ่งแก้ไขไฟล์ส่วนหัวของเทมเพลตอีเมล WooCommerce ในทำนองเดียวกัน คุณสามารถแก้ไขไฟล์เทมเพลตอีเมลทั้งหมดที่อยู่ในไดเร็กทอรีนี้ได้ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีทดสอบเทมเพลตอีเมล โปรดดูคู่มือฉบับสมบูรณ์นี้

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

5. วิธีการใช้สไตล์ CSS กับเทมเพลตอีเมล WooCommerce

อีกทางเลือกหนึ่งที่น่าสนใจคือการปรับแต่งสไตล์ของเทมเพลต WooCommerce ของคุณแบบเป็นโปรแกรม เมื่อคุณแก้ไขมาร์กอัป HTML คุณสามารถเพิ่มสไตล์ CSS ให้กับเทมเพลตอีเมลได้ เนื่องจาก CSS แบบอินไลน์ไม่ใช่วิธีปฏิบัติที่แนะนำ เราจึงจำเป็นต้องใช้ไฟล์ email-styles.php นี่คือไฟล์ที่จัดการ CSS สำหรับเทมเพลตอีเมล

หากต้องการใช้โค้ด CSS ที่กำหนดเองกับอีเมล ให้คัดลอกไฟล์นี้จากโฟลเดอร์ปลั๊กอิน WooCommerce แล้ววางลงในโฟลเดอร์ WooCommerce ธีมของคุณ นี่คือไฟล์ PHP ดังนั้น คุณจะสามารถใช้ตัวแปร ฟังก์ชัน และสร้างคำสั่งตรรกะของคุณเอง และนำไปใช้กับสไตล์ได้:

 ก {
 สี: <?php echo esc_attr( $link_color ); ?>;
 ตัวอักษร-น้ำหนัก: ปกติ;
 ตกแต่งข้อความ: ขีดเส้นใต้;
 }

และนี่คือตัวเลือกลิงก์ที่กำหนดเอง:

 .my-link > a:nth-child(1){
 สี: ขาว;
 ขนาดตัวอักษร:14px;
 }

บทสรุป

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

มี 2 ​​วิธีหลักในการปรับแต่งเทมเพลต WooCommerce โดยทางโปรแกรม:

• พร้อมตะขอ
• การเขียนทับแม่แบบ

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

หากคุณมีปัญหาใด ๆ ในการปฏิบัติตามคำแนะนำ โปรดแจ้งให้เราทราบในความคิดเห็นด้านล่าง และเราจะพยายามอย่างเต็มที่เพื่อช่วยเหลือคุณ