มี Plugin ไหนทำปุ่ม Grid / List สำหรับ Woocommerce ได้บ้างครับ

ผมไม่แน่ใจว่าในตอนนี้จะมี Plugin ที่แสดงผลได้แบบในตัวอย่างหรือเปล่า อาจจะต้องแยกเป็น 2 กรณี

1. ตรงปุ่มเปลี่ยน List/Grid ผมเขียน CSS + jQuery + Cookie เอง ถ้าเปลี่ยน Class ให้เปลี่ยนรูป + AddClass/RemoveClass ปกติ ลองศึกษาดูนะครับ https://www.w3schools.com/jquery/html_addclass.asp
2. แสดงผล Category ตรงนี้จะเป็น Custom page ที่เขียนขึ้นด้วยโค๊ดเพื่อให้แสดงผลแบบที่เห็นนะครับ (ผมเขียนเอง)

โค๊ดจะประมาณนี้ครับ

<?php
$product_cat_id = get_queried_object();
$parent_id = $product_cat_id->term_id;
$termchildrens = get_terms(‘product_cat’, array(‘parent’ => $parent_id));

$s_slider = ‘s-grid -m2 -d4’;
?>

<div class=”category-items <?php echo $s_slider; ?>”>
<?php
foreach($termchildrens as $termchildren) {

if($termchildren && $termchildren->term_id != 15){
$thumbnail_id = get_woocommerce_term_meta( $termchildren->term_id, ‘thumbnail_id’, true );
if($thumbnail_id){
$image = wp_get_attachment_url( $thumbnail_id );
}else{
$image = ‘/wp-content/uploads/woocommerce-placeholder.png’;
}
echo ‘<div class=”‘ . $slider . ‘ category-item cat-‘.$termchildren->term_id.'”>’;
echo ‘<a href=”‘ . get_category_link( $termchildren->term_id ) . ‘” title=”‘ . sprintf( __( “View all posts in %s” ), $termchildren->name ) . ‘” ‘ . ‘>’;
echo “<img src='{$image}’ alt=” width=’300′ height=’100′ />”;
echo ‘<h2>’ . $termchildren->name.'</h2>’;
echo ‘</a>’;
echo ‘</div>’;
}
}
?>
</div>

ที่เหลือก็จัด CSS ตามต้องการครับ

แปลว่าน่าจะ $product_cat_id = get_queried_object();  เก็บค่าตัวแปรนี้ไม่มานะครับ อาจต้องมีโค้ด้านบนก่อนหน้านี้อีกสักหน่อย

แต่จริงๆ ตัวนี้น่าจะเป็นแค่ loop ที่จะใช้ดึงสินค้าที่เราต้องการมาแสดงเท่านั้นนะครับ ขึ้นอยู่กับว่าเราอยากดึงสินค้าอะไรมาแสดงนะครับ

โค้ดที่จะให้ทำงานส่วนนี้จริงๆ คิดว่าน่าจะเป็นส่วน jQuery กับ Css มากกว่านะครับ

ถ้าไม่อยากแก้โค้ดเยอะอาจลองดู plugin แนวนี้จะพอตอบโจทย์ไหมนะครับ

• https://wordpress.org/plugins/gridlist-view-for-woocommerce/

ตัวอย่าง

• https://woocommerce-terms-popup.berocket.com/

ส่วนนี้เขียนโค้ดเองเหมือนกันครับ

แต่ถ้าเป็น plugin ตัว mega menu อาจทำได้ใกล้เคียงอยู่นะครับ อาจต้อง css สักหน่อย