Cách sửa thẻ tiêu đề trong danh sách sản phẩm Flatsome

Có bạn nào từng được yêu cầu hay là audit onpage về phần heading cho title của product loop chưa?

Trước giờ mình làm phần nhiều là web dạng giới thiệu, nay có dịp làm lại vài trang ecom nên có 1 case như này.

Mặc định phần tên sản phẩm trên danh sách hoặc trong danh mục sản phẩm flatsome đang dùng thẻ <p>. Khi đó trong trang archive của sản phẩm sẽ chỉ còn thẻ heading của tên danh mục và 1 cái h4 của giỏ hàng.

Nếu bạn muốn đổi tiêu đề sản phẩm sang thẻ h3 thì làm theo cách sau:

Copy đoạn code này vào file function.php của child theme và xem thành quả

remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 ); 
add_action( 'woocommerce_shop_loop_item_title', 'fd_template_loop_product_title', 10 );

function fd_template_loop_product_title() {
echo '<h3 class="name product-title ' . esc_attr( apply_filters( 'woocommerce_product_loop_title_classes', 'woocommerce-loop-product__title' ) ) . '">'; 
woocommerce_template_loop_product_link_open(); 
echo get_the_title(); woocommerce_template_loop_product_link_close(); 
echo '</h3>';
}

Lưu ý: Đây là đoạn code từ theme Flatsome gốc. Mình chỉ mang ra và sửa thừ thẻ <p> sang thẻ <h3>

Còn nếu vì lý do nào đó bạn muốn các product trên trang chủ là h4 với shortcode products thì cần thêm 1 ít công đoạn nữa.

Có thời gian mình sẽ viết sang 1 bài mới