Hướng dẫn tùy biến trang danh mục sản phẩm woocommerce

Tạo một template riêng cho danh mục sản phẩm trong WooCommerce là một cách tuyệt vời để tùy chỉnh giao diện hiển thị của danh mục sản phẩm theo ý muốn của bạn. Dưới đây là hướng dẫn hoàn chỉnh về cách tạo và sử dụng một template riêng cho danh mục sản phẩm.

Bước 1: Chuẩn bị template file

Tạo một thư mục con tên là “woocommerce” trong thư mục gốc của chủ đề của bạn nếu nó chưa tồn tại.

Trong thư mục “woocommerce”, tạo một file mới với tên theo dạng taxonomy-product_cat-{slug}.php. Điều này cho phép bạn tạo một template riêng cho danh mục sản phẩm dựa trên slug của danh mục. Ví dụ, nếu slug của danh mục sản phẩm là “my-category”, bạn có thể tạo một file tên là taxonomy-product_cat-my-category.php.

Cụ thể: Bạn cần tùy biến danh mục sản phẩm áo thun có slug là ao-thun  thì đặt tên file là taxonomy-product_cat-ao-thun.php

Bước 2: Tùy chỉnh template file

Mở file template bạn vừa tạo bằng trình soạn thảo mã (như Visual Studio Code hoặc Sublime Text).

Bên trong template file, bạn có thể tùy chỉnh giao diện và nội dung của trang danh mục sản phẩm theo ý muốn. Bạn có thể sử dụng các hàm và lệnh PHP để hiển thị sản phẩm, tiêu đề, mô tả, hình ảnh, và bất kỳ thông tin nào bạn muốn.

Ví dụ:

<?php
/**
* The Template for displaying product archives, including the main shop page which is a post type archive
*
* This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @package WooCommerce/Templates
* @version 3.4.0
* @flatsome-version 3.16.0
*/

defined( 'ABSPATH' ) || exit;

get_header();

// Nội dung cần hiển thị


get_footer( 'shop' );

Lưu lại file sau khi hoàn tất chỉnh sửa.

Với theme flatsome, bạn có thể dùng UX để làm trang danh mục sản phẩm, biến nó thành 1 landingpage chuyên nghiệp.

// Add Custom Shop Content if set

echo do_shortcode('[block id="ao-thun"]');

Bước 3: Sử dụng template cho danh mục sản phẩm

Đảm bảo rằng bạn đã tạo một danh mục sản phẩm trong WooCommerce và đã gán sản phẩm vào danh mục đó.

Điều hướng đến trang danh mục sản phẩm trong cửa hàng của bạn.

WordPress sẽ tự động sử dụng template riêng mà bạn vừa tạo để hiển thị danh mục sản phẩm đó.

Bằng cách tạo và tùy chỉnh một template riêng cho danh mục sản phẩm trong WooCommerce, bạn có thể điều khiển hoàn toàn cách danh mục sản phẩm được hiển thị trên trang web của bạn.