วิธีแสดงผลิตภัณฑ์ WooCommerce ตามหมวดหมู่

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

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

แสดงผลิตภัณฑ์ WooCommerce ตามหมวดหมู่

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

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

อย่างไรก็ตาม ข้อเสียหลักเกี่ยวกับเรื่องนี้ก็คือมันแสดงหมวดหมู่/หมวดหมู่ย่อยร่วมกัน โดยไม่มีการแบ่งแยกระหว่างสองหมวดหมู่ ทำให้เลย์เอาต์ดูรกเล็กน้อยเนื่องจากขนาดของรูปภาพต่างกัน

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

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

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

ก) แสดงทั้งผลิตภัณฑ์และหมวดหมู่หรือหมวดย่อย

ขั้นตอนในการแสดงทั้งผลิตภัณฑ์และหมวดหมู่หรือหมวดหมู่ย่อย

ลงชื่อเข้าใช้ไซต์ WordPress และเข้าถึง แดชบอร์ด ในฐานะผู้ดูแลระบบ
จากเมนูแดชบอร์ด ให้คลิกที่ เมนูลักษณะที่ปรากฏ > ปรับแต่ง คลิกที่ หน้าร้านค้า และเลือก WooCommerce > แคตตาล็อกสินค้า ที่ตัวเลือก Shop Display ให้เลือก Show types & products ที่ตัวเลือกการ แสดง Category เลือก Show subcategories & products ตามที่แสดงด้านล่าง:
อย่าลืม บันทึก การเปลี่ยนแปลงที่คุณทำ
นี่จะเป็น ผลลัพธ์ :

b) แสดงหมวดหมู่ผลิตภัณฑ์ WooCommerce

อย่างไรก็ตาม คุณสามารถแสดงหมวดหมู่ผลิตภัณฑ์ WooCommerce ได้โดยใช้ข้อมูลโค้ดด้านล่าง ซึ่งควรอยู่ในไฟล์ functions.php

ขั้นตอนในการแสดงหมวดหมู่สินค้า WooCommerce

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

ลงชื่อเข้าใช้ไซต์ WordPress และเข้าถึง แดชบอร์ด ในฐานะผู้ดูแลระบบ
จากเมนู Dashboard ให้คลิกที่ Appearance Menu > Theme Editor เมื่อเปิดหน้า Theme Editor ให้มองหา ไฟล์ฟังก์ชัน ของธีมที่เราจะเพิ่มฟังก์ชันที่จะแสดงหมวดหมู่ผลิตภัณฑ์ WooCommerce
เพิ่มรหัสต่อไปนี้ ในไฟล์ php :

 ฟังก์ชัน woocommerce_product_category( $args = array() ) {

    $woocommerce_category_id = get_queried_object_id();

  $args = อาร์เรย์ (

             'parent' => $woocommerce_category_id
  );

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

  ถ้า ( $terms ) {

             echo '<ul class="woocommerce-categories">';

             foreach ( $terms เป็น $term ) {

             echo '<li class="woocommerce-product-category-page">';

            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', 'woocommerce_product_category', 100 );

นี่จะเป็นผลลัพธ์:

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

รหัสทำงานอย่างไร

โค้ดนี้ทำงานโดยใช้ woocommerce_product_category() function ซึ่งแสดงหมวดหมู่หรือหมวดหมู่ย่อยก่อนที่จะรันลูปที่ส่งออกผลิตภัณฑ์ สามารถแทนที่ธีมได้ เนื่องจากฟังก์ชันนี้เสียบปลั๊กได้

c) แสดงรายการหมวดหมู่ย่อยของหมวดหมู่ผลิตภัณฑ์ WooCommerce

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

ขั้นตอนในการแสดงรายการหมวดหมู่ย่อยของหมวดหมู่ผลิตภัณฑ์ WooCommerce

ลงชื่อเข้าใช้ไซต์ WordPress และเข้าถึง แดชบอร์ด ในฐานะผู้ดูแลระบบ
จากเมนู Dashboard ให้คลิกที่ Appearance Menu > Theme Editor เมื่อเปิดหน้า Theme Editor ให้มองหา ไฟล์ฟังก์ชัน ของธีมที่เราจะเพิ่มฟังก์ชันที่จะแสดงรายการหมวดหมู่ย่อยของหมวดหมู่ผลิตภัณฑ์ WooCommerce
เพิ่มรหัสต่อไปนี้ ในไฟล์ php :

 ฟังก์ชั่น woocommerce_get_product_category_of_subcategories ( $category_slug ){

$terms_html = อาร์เรย์ ();
$taxonomy = 'product_cat';
$parent = get_term_by( 'slug', $category_slug, $taxonomy );
$children_ids = get_term_children( $parent->term_id, $taxonomy );

foreach($children_ids เป็น $children_id){

    $term = get_term( $children_id, $อนุกรมวิธาน );

    $term_link = get_term_link( $term_link $อนุกรมวิธาน );

    ถ้า ( is_wp_error( $term_link ) ) $term_link = '';

    $terms_html[] = '<a href="' . esc_url( $term_link ) . '" rel="tag" class="' . $term->slug . '">' $term->name '</a>';
}

ส่งคืน '<span class="subcategories-' . $category_slug . '">' ระเบิด( ', ', $terms_html ) '</span>';

}

นี่จะเป็นผลลัพธ์:

รหัสทำงานอย่างไร

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

d) การระบุรหัสที่ WooCommerce ใช้เพื่อส่งออกหมวดหมู่และผลิตภัณฑ์ในหอจดหมายเหตุ

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

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

 <?php
/**
* woocommerce_before_shop_loop ตะขอ
*
* @hooked woocommerce_result_count - 20
* @hooked woocommerce_catalog_ordering - 30
*/

do_action( 'woocommerce_before_shop_loop' );
?>

<?php woocommerce_product_loop_start(); ?>

<?php woocommerce_product_subcategories(); ?>

<?php ในขณะที่ ( have_posts() ) : the_post(); ?>

<?php wc_get_template_part( 'เนื้อหา', 'ผลิตภัณฑ์' ); ?>

<?php เมื่อสิ้นสุด; // สิ้นสุดลูป ?>

<?php woocommerce_product_loop_end(); ?>

รหัสทำงานอย่างไร:

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

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

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

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

e) การสร้าง Plugin

คุณต้องสร้างชื่อใหม่ขึ้นมาใหม่และตั้งชื่อเฉพาะในไดเร็กทอรี wp-content/plugins สำหรับตัวอย่างนี้ โปรดใช้ความระมัดระวังเมื่อทำตามขั้นตอนต่างๆ เพื่อให้คุณสามารถทำงานตามที่เราต้องการได้ ฉันจะใช้ชื่อนี้ njengah-separate-products-categories-in-archives

ภายในโฟลเดอร์นี้ คุณต้องสร้างไฟล์ใหม่อีกครั้งโดยใช้ชื่อที่ไม่ซ้ำ ฉันจะใช้ชื่อเดียวกันสำหรับโฟลเดอร์นี้ njengah-separate-products-categories-in-archives.php

ขั้นตอนในการสร้างปลั๊กอิน

เปิดไฟล์ของคุณ และเพิ่มรหัสต่อไปนี้:

 <?php
/**
* ชื่อปลั๊กอิน: หมวดหมู่สินค้า WooCommerce
* คำอธิบาย: แสดงหมวดหมู่ WooCommerce บนหน้าผลิตภัณฑ์ WooCommerce

**/

ก่อน เขียนฟังก์ชันของเรา คุณต้องปิดรายการหมวดหมู่ในหน้าจอผู้ดูแลระบบโดยลงชื่อเข้าใช้ไซต์ WordPress และเข้าถึง แดชบอร์ด ในฐานะผู้ดูแลระบบ
จากเมนูแดชบอร์ด ให้คลิกที่ เมนูลักษณะที่ปรากฏ > ปรับแต่ง คลิกที่ หน้าร้านค้า และเลือก WooCommerce > แคตตาล็อกสินค้า ที่ตัวเลือก Shop Display ให้เลือก Show products ในตัวเลือกการแสดง ประเภท เลือก แสดงสินค้า
อย่าลืม บันทึก การเปลี่ยนแปลงที่คุณทำ
นี่จะเป็น ผลลัพธ์ :
เพิ่ม ลงในไฟล์ปลั๊กอิน:

 ฟังก์ชัน njengah_product_subcategories ($args = array()) {

}

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

จากนั้นคุณต้องเพิ่มรหัสนี้ในฟังก์ชัน:

 $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>';

}

นี่จะเป็นผลลัพธ์: แสดงผลิตภัณฑ์ WooCommerce ตามหมวดหมู่

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

รหัสทำงานอย่างไร

ฟังก์ชันที่เราสร้างขึ้นจะระบุอ็อบเจ็กต์ที่สอบถามในปัจจุบันและกำหนด id ของมันคือ $parentid จากนั้นจะใช้ get_terms() เพื่อระบุเงื่อนไขที่มีรายการที่สืบค้นในปัจจุบันเป็นผู้ปกครอง หากนี่คือหน้าร้านค้าหลัก จะแสดงหมวดหมู่ระดับบนสุด และหากเป็นที่เก็บถาวรของหมวดหมู่ ก็จะส่งคืนหมวดหมู่ย่อย

นอกจากนี้ ฟังก์ชันจะตรวจสอบว่ามีเงื่อนไขใดๆ หรือไม่ ก่อนที่จะเปิด a สำหรับแต่ละลูปและองค์ประกอบ ul ซึ่งหมายความว่าสำหรับแต่ละคำศัพท์จะสร้างองค์ประกอบ li แล้วส่งออก category image using woocommerce_subcatgeory_thumbnail() ตามด้วยชื่อหมวดหมู่ในลิงก์ไปยังไฟล์เก็บถาวร

ขั้นตอนในการจัดรูปแบบรายการหมวดหมู่

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

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

 ฟังก์ชัน njengah_product_cats_css () {




/* ลงทะเบียนสไตล์ชีต */

wp_register_style( ' njengah _product_cats_css', plugins_url( 'css/style.css', __FILE__ ) );




/* จัดคิวสไตล์ชีต */

wp_enqueue_style( ' ขาย _product_cats_css' );




}




add_action ( 'wp_enqueue_scripts', ' njengah _product_cats_css' );

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

 ul.product-cats ลี {
รายการสไตล์: none;
ระยะขอบซ้าย: 0;
ระยะขอบล่าง: 4.236em;
จัดข้อความ: ศูนย์;
ตำแหน่ง: ญาติ;
}

ul.product-cats li img {
ระยะขอบ: 0 อัตโนมัติ;
}


หน้าจอ @media และ (min-width:768px) {

ul.product-cats {
ระยะขอบซ้าย: 0;
ชัดเจน: ทั้งสอง;
}

ul.product-cats ลี {
ความกว้าง: 29.4117647059%;
ลอย: ซ้าย;
ระยะขอบขวา: 5.8823529412%;
}

ul.product-cats li:nth-of-type (3) {
ระยะขอบขวา: 0;
}

}

นี่จะเป็นผลลัพธ์:

บทสรุป

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

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

บทความที่คล้ายกัน

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