Cách xóa Class đã thêm của thẻ li trong Woocommerce

Trong quá trình học wordpress để thiết kế website bạn quá quen thuộc với plugin Woocommerce cho việc tạo các trang web bán hàng.

Có một vài khó khăn cho các bạn mới bắt đầu học wordpress, bạn khó canh chỉnh chia cột vì một số class mặc định mà Woocommerce đã thêm vào như product type-product post-267 status-publish instock product_cat-do-choi-me-be has-post-thumbnail sale featured shipping-taxable purchasable product-type-simple

Tuy nhiên nhà phát triển đã cung cấp cho chúng ta một Hook để loại chúng khỏi code html của chúng ta thông qua add_filter woocommerce_post_class, bạn chỉ cần copy chúng vào file functions.php của theme và chúng sẽ có tác dụng ngay thôi mà.

1. Xóa các class mặc định ra khỏi thẻ li trong vòng loop sản phẩm

add_filter( 'woocommerce_post_class', 'wpshare247_remove_post_class', 21, 3 );
function wpshare247_remove_post_class( $classes ) {
    if ( 'product' == get_post_type() ) {
        //Xóa 3 class mặc định của thẻ li sản phẩm: product, last, first
        $classes = array_diff( $classes, array( 'product', 'last','first' ) );

        //Thêm class mới: 'col-12 col-md-3'
    $classes = array_merge(array('col-12 col-md-3'), $classes);
    }
    return $classes;
}

Ngoài việc xóa một số class mặc định của product, bạn cũng có thể thêm các lớp cho riêng mình tiện cho việc tùy chỉnh css nhé, trong đoạn code trên bạn chú ý đoạn thêm class mới $classes = array_merge(array('col-12 col-md-3'), $classes);

2. Xóa các class mặc định ra khỏi thẻ li trong vòng loop danh mục sản phẩm

Còn đối với loop cho danh mục bạn sử dụng đoạn code sau nhé, chúng ta sử dụng filter product_cat_class thay vì woocommerce_post_class như ở bước 1.

add_filter( 'product_cat_class', 'wpshare247_remove_category_class', 21, 3 );
function wpshare247_remove_category_class( $classes ) {
    if ( 'product' == get_post_type() ) {
        //Xóa các class mặc định của thẻ li sản phẩm: last, first 
        $classes = array_diff( $classes, array( 'last','first' ) ); 
        //Thêm class mới: 'col-12 col-md-3'
        $classes = array_merge(array('col-12 col-md-3'), $classes);
    }
    return $classes;
}

Giờ là lúc kiểm tra lại kết quả xem chúng đã khỏi thẻ li chưa nhé:

Như vậy bài viết đã giúp chúng ta dễ dạng loại bỏ hoặc thêm mới các class cho thẻ li trong sản phẩm khi dùng WordPress rồi nhé.