วิธีแก้ไขหน้าร้านค้า WooCommerce โดยทางโปรแกรม (CSS และ PHP)

เผยแพร่แล้ว: 2020-08-27

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

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

เหตุใดการแก้ไขหน้าร้านค้าใน WooCommerce จึงสำคัญ

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

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

วิธีแก้ไขหน้าร้านค้า WooCommerce โดยทางโปรแกรม

ก่อนหน้านี้เราได้เห็นวิธีการต่างๆ ในการปรับแต่งหน้าร้านค้า อย่างไรก็ตาม ในบทช่วยสอนนี้ เราจะเน้นที่ การแก้ไขหน้าร้านค้าของ WooCommerce โดยใช้โค้ด CSS และ PHP เล็กน้อย เป็นที่น่าสังเกตว่าในคู่มือนี้ เราจะใช้ธีมย่อย และเราจะแก้ไขเทมเพลตร้านค้าเริ่มต้นของ WooCommerce ด้วย เราจะให้ความสำคัญกับไฟล์เทมเพลต WooCommerce และการอ้างอิงบางส่วนไปยังไฟล์ functions.php ของธีมย่อย

ในบทช่วยสอนนี้ คุณจะได้เรียนรู้วิธี แก้ไขหน้าร้านค้า WooCommerce โดยทางโปรแกรม เพื่อ:

  1. ปิดใช้งานเทมเพลตหน้าร้านค้า WooCommerce เริ่มต้น
  2. ปรับแต่งส่วนหัวและเนื้อหา
    1. สินค้ายอดนิยม
    2. สินค้าขายดี
    3. ระดับสูง
    4. แสดงสินค้าตามอนุกรมวิธาน
    5. ปรับแต่งหน้าร้านค้า WooCommerce ใน functions.php
  3. แก้ไขเลย์เอาต์ของลูปผลิตภัณฑ์และใช้สไตล์ชีต CSS
    1. แก้ไขจำนวนคอลัมน์เริ่มต้นต่อแถว
    2. ใช้ CSS Style กับหน้าร้านค้า
  4. แก้ไขไฟล์วนซ้ำของหน้าร้านค้า WooCommerce
    1. แทนที่ข้อความ "ลดราคา" เริ่มต้นสำหรับ gif แบบเคลื่อนไหว
    2. ลบตัวเลือกการเรียงลำดับและการแบ่งหน้า

ก่อนคุณเริ่ม

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

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

ตอนนี้เรามาดูวิธีการปรับแต่งหน้าร้านค้าใน WooCommerce ด้วยการเขียนโค้ดกัน

1. ปิดใช้งานเทมเพลตหน้าร้านค้า WooCommerce เริ่มต้น

ในการปรับแต่งหน้าร้านค้า มีสองวิธีที่เป็นไปได้:

  1. คุณสามารถเขียนทับไฟล์ WooCommerce ที่รับผิดชอบการพิมพ์หน้าร้านค้าได้
  2. เพิ่มสคริปต์ที่กำหนดเองลงในไฟล์ functions.php ของธีมลูกของคุณโดยใช้ WC hooks

คุณสามารถแก้ไขเทมเพลต HTML ของ WooCommerce ได้เหมือนกับไฟล์ functions.php ของธีมย่อย โดยเขียนทับไฟล์หลักเพื่อป้องกันการลบเมื่อมีการอัปเดต อย่างไรก็ตาม เนื่องจากสิ่งต่าง ๆ ไม่ทำงานเหมือนกับในไฟล์ functions.php หาก WooCommerce ตัดสินใจอัปเดตไฟล์เหล่านี้ การปรับแต่งของคุณอาจไม่ทำงานอีกต่อไป

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

ดังนั้น ก่อนอื่น คุณต้อง ปิดการใช้งานหน้าร้านค้าเทมเพลต WooCommerce เริ่มต้น เพื่อสร้างเทมเพลตของคุณตั้งแต่เริ่มต้น

ไฟล์ archive-product.php

ใน WooCommerce ไฟล์ที่รับผิดชอบผลลัพธ์ในหน้าร้านค้าจะเรียกว่า archive-product.php และคุณสามารถค้นหาได้ในโฟลเดอร์เทมเพลต WooCommerce ( WooCommerce > เทมเพลต > archive-product.php ) แก้ไขหน้าร้านค้า WooCommerce โดยทางโปรแกรม - ปิดการใช้งานเทมเพลตหน้าร้านค้า

ในการเขียนทับไฟล์นี้ คุณต้องคัดลอกและวางลงในโฟลเดอร์ WooCommerce ในธีมย่อยของคุณดังที่แสดงด้านล่าง:

ตอนนี้ มาดู archive-product.php เพื่อดูว่า WooCommerce แสดงหน้าร้านค้าอย่างไร ในการทำเช่นนั้น ให้เปิดสภาพแวดล้อมการพัฒนาแบบรวม (IDE) ที่คุณโปรดปราน ไปที่โฟลเดอร์เทมเพลตของปลั๊กอิน WooCommerce แล้วเปิดไฟล์ คุณสามารถแก้ไขและเล่นกับมันได้ เช่นเดียวกับที่คุณสามารถปรับแต่งไฟล์เทมเพลต WC อื่นๆ ได้

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

ใน archive-product.php คุณจะเห็น do_action() หลายฟังก์ชัน ฟังก์ชันเหล่านี้ใช้เพื่อสร้าง WooCommerce hooks ที่มีอยู่ในปัจจุบันสำหรับหน้าร้านค้า หากต้องการปิดการใช้งานหน้าร้านค้า WooCommerce อย่างสมบูรณ์ เพียงลบลูปที่รับผิดชอบในการพิมพ์ผลิตภัณฑ์:

 ถ้า (wc_get_loop_prop ('รวม')) {
    ในขณะที่ (have_posts()) {
        the_post();
        do_action('woocommerce_shop_loop');
        wc_get_template_part('เนื้อหา', 'ผลิตภัณฑ์');
    }
}

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

หลังจากลบลูปสำหรับการพิมพ์ผลิตภัณฑ์ archive-product.php จะมีลักษณะดังนี้:

 กำหนด ('ABSPATH') || ทางออก;
get_header('ร้านค้า');
do_action('woocommerce_before_main_content');
ถ้า (woocommerce_product_loop()) {
    do_action('woocommerce_before_shop_loop');
    // ที่นี่เราลบลูปแล้ว
    do_action('woocommerce_after_shop_loop');
} อื่น {
    do_action('woocommerce_no_products_found');
}
do_action('woocommerce_after_main_content');
do_action('woocommerce_sidebar');
get_footer('ร้านค้า');

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

2. ปรับแต่งส่วนหัวและเนื้อหาของหน้าร้านค้า WooCommerce โดยทางโปรแกรม

เนื้อหาและส่วนหัวอาจเป็นมาร์กอัป HTML ใดๆ ที่อาจรวมถึงรูปภาพ ตาราง หรือลิงก์ หรือแม้แต่บางอย่างเช่นคอนเทนเนอร์เปล่าเพื่อเรียกใช้ไฟล์ JavaScript ภายนอก สำหรับสิ่งนี้ คุณจะต้องมีความรู้พื้นฐานเกี่ยวกับรหัสย่อของ WooCommerce เนื่องจากคุณจะใช้เพื่อแสดงผลิตภัณฑ์บนหน้าร้านค้า หากคุณไม่คุ้นเคยกับรหัสย่อของ WC ให้ดูที่คู่มือนี้

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

2.1 แสดงสินค้ายอดนิยม

ในการแสดงสินค้ายอดนิยม คุณต้องแก้ไข archive-product.php ของธีมลูกของคุณ ขั้นแรก ใช้รหัสย่อต่อไปนี้

 [ products orderby="popularity" ]

ตรงตำแหน่งที่วนซ้ำอยู่ก่อนที่คุณจะลบมัน #แสดงสินค้ายอดนิยม2ชิ้นใน2คอลัมน์

 do_action('woocommerce_before_shop_loop');
echo '<h1>ยอดนิยมที่สุด !!</h1>';
do_shortcode('[ products orderby="popularity" class="m-popular" columns="2" limit="2" ]'); do_action('woocommerce_after_shop_loop');

ในรหัสย่อ คุณจะเพิ่มคลาสที่เรียกว่า m-popular ซึ่งคุณสามารถใช้ในภายหลังเมื่อนำสไตล์ไปใช้ ในตัวอย่างข้างต้น เราตั้งค่าให้แสดงผลิตภัณฑ์ 2 รายการในแถว 2 คอลัมน์เดียว (columns=”2″ limit=”2″) โปรดทราบว่าคุณไม่สามารถใช้รหัสย่อที่นี่ในลักษณะเดียวกับที่ใช้ในโพสต์หรือหน้า

คุณต้องใช้ do_shortcode() เพื่อให้รหัสย่อทำงาน หากทุกอย่างเป็นไปด้วยดี ตอนนี้คุณควรเห็นสิ่งนี้บนหน้าร้านค้า: หน้าร้านค้าที่กำหนดเอง

2.2 สินค้าขายดี

อีกวิธีหนึ่งในการปรับแต่งร้านค้า WooCommerce โดยทางโปรแกรมคือการจัดเรียงสินค้าตามผู้ขายที่ดีที่สุด สำหรับสิ่งนี้ นอกเหนือจากการสะท้อนรหัสย่อ คุณจะเพิ่มเนื้อหาโดยใช้มาร์กอัป HTML อย่างง่าย ( <h1> ) คุณสามารถเพิ่มเนื้อหาประเภทอื่นๆ ที่ตรงกับรูปแบบ HTML ที่เหมาะสมได้ที่นี่

มาแสดงสินค้าขายดีกัน คราวนี้เป็นแบบ 2 แถว 3 คอลัมน์ ในการทำเช่นนั้น เพียงวางสิ่งนี้หลังบรรทัด echo do_shortcode() ที่คุณได้แทรกในขั้นตอนที่ 2.1 ก่อนหน้านี้:

 echo '<h1>สินค้าขายดี</h1>';
do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]');

และสิ่งที่คุณได้รับคือ: หน้าร้านค้าที่กำหนดเอง หากคุณต้องการเพิ่มสินค้าขายดีแทนสินค้ายอดนิยม ให้แทนที่ echo line ใน 2.1 ด้วยรายการใน 2.2

2.3 สินค้ายอดนิยม

ตอนนี้ มาเล่นกันมากขึ้นด้วยรหัสย่อและแสดงผลิตภัณฑ์ยอดนิยม คราวนี้ เราจะใช้รหัสสั้นที่ไม่มีแอตทริบิวต์มากกว่าคลาส

 echo '<h1>คะแนนสูงสุด</h1>';
do_shortcode('[ top_rated_products class="t-rated" ]');

มาดูกันว่าจะเกิดอะไรขึ้นหลังจากนี้: หน้าร้านค้าที่กำหนดเอง อย่างที่คุณเห็น เลย์เอาต์เริ่มต้นของ WooCommerce มี 4 คอลัมน์ ปล่อยให้มันเป็นอย่างนั้นตอนนี้เราจะกลับมาในภายหลัง

2.4 แสดงสินค้าตามอนุกรมวิธานในหน้าร้านค้า

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

 echo '<h1>การจัดหมวดหมู่เสื้อผ้า:</h1>';
do_shortcode('[ products category="Clothing" columns="5" limit="10" class="t-clothing" ]'); echo '<h1>การจัดหมวดหมู่โปสเตอร์:</h1>'; echo '<h2>นำโปสเตอร์ที่ดีที่สุดไปที่ผนังของคุณ</h2>'; do_shortcode('[ products category="Posters" limit="4" class="t-posters" ]');

และนี่คือลักษณะ archive-product.php ของคุณควรมีลักษณะดังนี้:

 <header class="woocommerce-products-header">
       <h1 class="woocommerce-products-header__title page-title"></h1>	
</header>
<?php
ถ้า ( woocommerce_product_loop() ) {
	do_action( 'woocommerce_before_shop_loop' );		
	
	echo '<h1>ยอดนิยมที่สุด !!</h1>';
        do_shortcode('[ products orderby="popularity" class="m-popular" columns="2" limit="2" ]'); echo '<h1>สินค้าขายดี</h1>'; do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]'); echo '<h1>คะแนนสูงสุด</h1>'; do_shortcode('[ top_rated_products class="t-rated" ]'); echo '<h1>การจัดหมวดหมู่เสื้อผ้า:</h1>'; do_shortcode('[ products category="Clothing" columns="5" limit="10" class="t-clothing" ]'); echo '<h1>การจัดหมวดหมู่โปสเตอร์:</h1>; echo '<h2>นำโปสเตอร์ที่ดีที่สุดไปที่ผนังของคุณ</h2>'; do_shortcode('[ products category="Posters" columns="2" limit="4" class="t-posters" ]'); do_action( 'woocommerce_after_shop_loop' ); } อื่น ๆ { do_action( 'woocommerce_no_products_found' ); } do_action( 'woocommerce_after_main_content' ); do_action( 'woocommerce_sidebar' ); get_footer( 'ร้านค้า' );

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

2.5 ปรับแต่งหน้าร้านค้า WC ใน functions.php

หากคุณต้องการปรับแต่งหน้าร้านค้า WooCommerce โดยทางโปรแกรม คุณยังสามารถแก้ไขไฟล์ functions.php ได้อีกด้วย สำหรับเนื้อหาที่อยู่นอกลูปผลิตภัณฑ์ คุณสามารถใช้ hooks บางส่วนที่เห็นใน archive-product.php โดยเรียกใช้จากไฟล์ functions.php ของธีมย่อย วิธีนี้จะทำให้คุณแน่ใจได้ว่าสคริปต์ของคุณจะยังคงทำงานแม้ว่า WC จะตัดสินใจอัปเดตไฟล์เทมเพลตก็ตาม

สำหรับตัวอย่างนี้ ให้เพิ่มส่วนหัวแบบกำหนดเองที่มีชื่อ คำบรรยาย คำอธิบาย และแบนเนอร์ วางสคริปต์นี้ในไฟล์ functions.php ของธีมลูก:

 add_action('woocommerce_before_shop_loop','shop_main_heading');
ฟังก์ชั่น shop_main_heading(){
	$เนื้อหา = '';
	$content.='<h1>ยินดีต้อนรับสู่หน้าร้านค้าที่ยอดเยี่ยมของฉัน!</h1>'; 
	$content.='<h2>สร้างด้วยความรักด้วยตัวฉันเอง</h2>';
	$content.='<p>ขอขอบคุณที่แวะเยี่ยมชมหน้าร้านค้าของเว็บไซต์ของฉัน โปรดเลือกดูผลิตภัณฑ์ที่คุณชอบมากที่สุดและซื้อผลิตภัณฑ์ทั้งหมด</p>';
	$content.='<img src="https://www.carpetright.co.uk/globalassets/static-pages/useful-links/samples/sample-banner.jpg"/>';
	สะท้อน $ เนื้อหา;
}

นี่คือหน้าตาของร้านค้าของคุณ: หน้าร้านค้าที่กำหนดเอง ในทำนองเดียวกัน คุณสามารถใช้ hook woocommerce_after_shop_loop เพื่อแสดงเนื้อหาบางส่วนที่ส่วนท้ายของหน้าร้านค้า

3. แก้ไขจำนวนสินค้าต่อแถว & ใช้สไตล์ชีต CSS กับหน้าร้านค้า WC

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

3.1 แก้ไขจำนวนคอลัมน์เริ่มต้นต่อแถว

หากคุณระบุแอตทริบิวต์คอลัมน์ของรหัสย่อ WC คุณสามารถกำหนดจำนวนผลิตภัณฑ์ที่แต่ละแถวจะแสดงได้ นอกจากนี้ คุณสามารถกำหนดจำนวนผลิตภัณฑ์ทั้งหมดสำหรับรหัสย่อด้วยแอตทริบิวต์จำกัด:

 [ product orderby=”popularity” columns=”3” limit=”3” ]

อย่างไรก็ตาม หากคุณไม่ได้กำหนดแอตทริบิวต์ของคอลัมน์ คุณสามารถกำหนดจำนวนผลิตภัณฑ์ที่คุณต้องการพิมพ์สำหรับแต่ละแถวโดยใช้สคริปต์นี้ในไฟล์ functions.php ของธีมย่อย

 add_filter('loop_shop_columns', 'loop_columns', 999);
ถ้า (!function_exists('loop_columns')) {
    ฟังก์ชัน loop_columns() {
        ส่งคืน 4 ;//4 สินค้าต่อแถว
    }
}

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

3.2 ใช้ CSS Styles กับหน้าร้านค้า

ในการใช้ CSS กับหน้าร้านค้า WooCommerce คุณสามารถเพิ่มสคริปต์ของคุณในไฟล์เทมเพลตดังนี้:

 <style>
* {
    พื้นหลัง-สี:#a2bcff;
}
</style>

สิ่งนี้ใช้ได้สำหรับ CSS ชิ้นเล็กๆ แต่ไม่ใช่แนวทางปฏิบัติที่แนะนำ ในการใช้ CSS Style กับ WordPress คุณต้องใช้ wp_enqueue_scripts hook เพื่อโหลดสคริปต์ของคุณจากไฟล์อื่น

สำหรับตัวอย่างนี้ เราจะตั้งชื่อไฟล์นี้ว่า shop_style.css และเราจะเก็บไว้ในโฟลเดอร์หลักของธีมลูกของเรา ที่ระดับลำดับชั้นเดียวกันกับ style.css เริ่มต้น หลังจากสร้างไฟล์นี้แล้ว ให้วางสคริปต์ต่อไปนี้ในไฟล์ functions.php ของคุณ:

 add_action( 'wp_enqueue_scripts', 'quadlayers_enqueue_css' );
ฟังก์ชัน quadlayers_enqueue_css(){    
    ถ้า( is_shop() ) :
    wp_enqueue_style( 'checkout_style',
        get_stylesheet_directory_uri() . '/shop_style.css'
    );
    เอนดิฟ;
}

อย่างที่คุณเห็น if(is_shop()): เงื่อนไขจำเป็นต้องเป็นจริงเพื่อจัดคิวไฟล์ shop_style.css ในไฟล์นี้ คุณจะมี style script ทั้งหมดที่คุณต้องการใช้ กับหน้าร้านค้า เท่านั้น ซึ่งแตกต่างจาก style.css ในธีมลูกที่จะใช้สคริปต์กับส่วนหน้าของเว็บไซต์ทั้งหมด สำหรับคำแนะนำนี้ เราจะใช้ไฟล์ shop_style.css ต่อไปนี้ แต่คุณสามารถใช้สคริปต์ CSS ของคุณหรือเปลี่ยนแปลงไฟล์นี้ได้

 div.storefront-sorting:nth-child(2){
	จัดข้อความ:ศูนย์;
} 
#main div.storefront-sorting h1{
	ตัวอักษรสไตล์:ปกติ;
}
#หลัก h1,# หลัก h2{
	ตัวอักษร-น้ำหนัก:โดดเด่นกว่า;
	ตัวอักษรสไตล์: เฉียง;
	จัดข้อความ:ศูนย์;
}
#main > .m-popular,#main > .b-sellers,#main > .t-rated,#main > .t-clothing,#main > .t-posters{	
	เส้นขอบ: ทึบ #b8b8b8 1px;
	รัศมีเส้นขอบ: 25px;
	ระยะขอบล่าง: 25px;
	ช่องว่างภายในด้านบน: 35px;	
	ช่องว่างภายใน-ซ้าย: 20px;
	ช่องว่างภายใน-ขวา: 20px;	
} 
#main > .m ยอดนิยม{
	พื้นหลัง-สี:#dbad97;	
}
#main > .b-ผู้ขาย {
	พื้นหลัง-สี:#b4e6a3;
}
#main > .t-rated {
	พื้นหลัง-สี:#f0f695;	
}
#main > .t-clothing {
	พื้นหลังสี:#95b4f6;	
}
#main > .t-โปสเตอร์ {
	พื้นหลัง-สี:#c88fe5;	
}

ในไฟล์ CSS คุณจะพบตัวเลือกบางตัวที่มีคลาสที่กำหนดเอง เราได้สร้างไว้ก่อนที่จะสร้างรหัสย่อ ตัวอย่างเช่น เราได้เพิ่มคลาส "b-sellers" ในรหัสสั้นดังนี้:

 do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]');

ดังนั้นหลังจากเพิ่ม CSS Style ลงในหน้าร้านค้าของ WooCommerce แล้ว คุณจะได้สิ่งนี้ (คลิกที่ภาพเพื่อดูขนาดเต็ม): คลิกที่ภาพเพื่อดูขนาดเต็ม

คลิกที่ภาพเพื่อดูขนาดเต็ม

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

โบนัส : วิธีเปลี่ยนจำนวนสินค้าต่อหน้า

ในตอนนี้ สมมติว่าคุณต้องการเปลี่ยนจำนวนสินค้าที่แสดงต่อหน้าในหน้าร้านค้า ตัวอย่างเช่น หากคุณต้องการแสดง 10 ผลิตภัณฑ์ต่อหน้า เพียงเพิ่มโค้ดต่อไปนี้ในไฟล์ functions.php :

 add_filter( 'loop_shop_per_page', 'new_loop_shop_per_page', 20 );

ฟังก์ชั่น new_loop_shop_per_page( $cols ) {
  $cols = 10;
  ส่งคืน $cols;
}

โดยที่ $cols มีจำนวนของสินค้าต่อหน้าที่นำค่าจาก ตัวเลือก -> การอ่าน และส่งคืนจำนวนผลิตภัณฑ์ที่คุณต้องการแสดงในแต่ละหน้า

4. แก้ไขไฟล์วนซ้ำของหน้าร้านค้า WooCommerce

จนถึงตอนนี้ เราได้เห็นวิธีแก้ไขไฟล์เทมเพลต archive-product.php เพื่อปรับแต่งหน้าร้านค้า WooCommerce โดยทางโปรแกรม ไฟล์นี้เป็นตำแหน่งที่วน WC ทำงานเพื่อแสดงผลิตภัณฑ์ทั้งหมดของเพจ ตอนนี้ เปิดโฟลเดอร์ปลั๊กอิน WooCommerce ในตัวแก้ไขปลั๊กอินหรือ IDE ของคุณ แล้วเปิดโฟลเดอร์ลูป คุณจะพบได้ในระดับเดียวกับ archive-product.php

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

หลังจากนี้ ให้คัดลอกไฟล์ sale-flash.php ต้นฉบับจากเทมเพลตปลั๊กอินแล้ววางลงในโฟลเดอร์ลูปนี้ในธีมย่อยของคุณ เราจะใช้ไฟล์ sale-flash.php เพื่อเพิ่ม gif แบบเคลื่อนไหวให้กับผลิตภัณฑ์ทั้งหมดที่ลดราคา หากคุณได้ดูไฟล์ คุณจะเห็นว่านี่คือสคริปต์ที่รับผิดชอบในการแสดงข้อความ "SALE" เมื่อมีสินค้าลดราคา

4.1 แทนที่ข้อความ "ลดราคา" เริ่มต้นสำหรับ gif แบบเคลื่อนไหว

ในส่วนนี้ เราจะแสดงวิธีปิดใช้งานข้อความ ลดราคา เริ่มต้นและแทนที่ด้วย gif แบบเคลื่อนไหว คุณต้องแก้ไขไฟล์ flash-sale.php ของธีมลูกของคุณ ให้มีลักษณะดังนี้:

 กำหนด ('ABSPATH') || ทางออก;
โพสต์ $ ทั่วโลก, $ ผลิตภัณฑ์;
ถ้า ( $product->is_on_sale() ) { 
   $an_gif = '<img src="https://i1.wp.com/tamingchaos.net/wp-content/uploads/2020/04/Sale-Gif.gif" width="100px" height="60px"/ >';
   เสียงสะท้อน $an_gif;
}

คุณสามารถแทนที่ไฟล์ gif ด้วย gif อื่น ๆ ที่คุณชอบได้จากที่นั่น

4.2 ลบตัวเลือกการเรียงลำดับและการแบ่งหน้า

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

สร้างทั้งสองไฟล์ในโฟลเดอร์ลูปและเรียกมันว่า orderby.php และ pagination.php ในการปิดการใช้งานทั้งสองไฟล์อย่างสมบูรณ์ คุณควรใส่สคริปต์นี้ในแต่ละไฟล์เท่านั้น:

 กำหนด ('ABSPATH') || ทางออก;

หลังจากทำเช่นนี้ คุณจะมีส่วนหัวและส่วนท้ายที่สะอาดขึ้นในหน้าร้านค้าของคุณ ยิ่งไปกว่านั้น การแบ่งหน้าอาจไม่มีประโยชน์มากนัก เนื่องจากคุณกำลังแสดงผลิตภัณฑ์จำนวนมาก แก้ไขหน้าร้านค้า WooCommerce โดยทางโปรแกรม - การเรียงลำดับและการแบ่งหน้า โปรดทราบว่าในไฟล์ sale-flash.php เราได้ลบพฤติกรรม WooCommerce เริ่มต้น และเพิ่มการแสดง gif แบบเคลื่อนไหวของเราเอง นี่เป็นงานพื้นฐาน แต่เทคนิคนี้มีความเป็นไปได้มากมายสำหรับนักพัฒนาขั้นสูง

หมายเหตุสุดท้าย

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

โบนัส: แสดงหมวดหมู่บนหน้าร้านค้า WooCommerce

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

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

เพิ่มหมวดหมู่ในหน้าร้านค้า

ในแดชบอร์ดของคุณ ไปที่ ลักษณะที่ ปรากฏ > ตัวแก้ไขธีม และเปิดไฟล์ functions.php ของธีมลูก คลิกที่ไฟล์ functions.php ที่แถบด้านข้างของไฟล์ธีมทางขวา และวางสคริปต์ต่อไปนี้เพื่อเพิ่มฟังก์ชันที่คุณกำหนดเอง

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

 ฟังก์ชัน product_subcategories( $args = array() ) {
$parentid = get_queried_object_id();

$args = อาร์เรย์ (
'parent' => $parentid
);

$terms = get_terms( 'product_cat', $args );

ถ้า ( $terms ) {
echo '<ul class="product-cats">';

foreach ( $terms เป็น $term ) {
echo '<li class="category">'; 
woocommerce_subcategory_thumbnail( $term );
ก้อง '<h2>';
echo '<a href="' . esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';
echo $term->name;
เสียงสะท้อน '</a>';
ก้อง '</h2>';
ก้อง '</li>';
}

ก้อง '</ul>';
}

}

add_action( 'woocommerce_before_shop_loop', 'product_subcategories', 50 );

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

บทสรุป

โดยรวมแล้ว หน้าร้านค้ามีความสำคัญอย่างยิ่งและสามารถสร้างหรือทำลายร้านค้าของคุณได้ นั่นเป็นเหตุผลที่หากคุณมีทักษะในการเขียนโค้ด เราขอแนะนำให้คุณ แก้ไขหน้าร้านค้าของ WooCommerce โดยทางโปรแกรม และเพิ่มประสิทธิภาพเพื่อเพิ่มอัตราการแปลงของคุณ

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

สำหรับคำแนะนำเพิ่มเติมในการปรับแต่งร้านค้า WooCommerce ของคุณ เราขอแนะนำให้คุณตรวจสอบ:

  • WooCommerce AJAX หยิบใส่ตะกร้า
  • วิธีเพิ่มฟิลด์ที่กำหนดเองในหน้าชำระเงิน
  • WooCommerce เพิ่มฟังก์ชั่นรถเข็นโดยทางโปรแกรม

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