Thêm Sidebar Trang Sản Phẩm – Tự Học Thiết Kế Web: Bài 35

Trong bài hôm nay, chúng ta sẽ chỉnh sửa trang chi tiết sản phẩm và thêm sidebar cho trang chi tiết sản phẩm. Ở một số giao diện, trang sản phẩm thường có demo không chứa sidebar. Bạn đừng lo lắng bài hôm nay chúng ta chủ yếu thêm sidebar cho trang sản phẩm và dùng CSS tùy chỉnh lại trang này cho đẹp mắt.

Tìm hiểu template woocommerce trong giao diện

Khi đăng nhập vào CPanel, bạn hãy vào đường dẫn như sau để tìm đến template của các trang woocommerce. Quản lý tệp > Public_html > Website của bạn > Wp-content > themes > Giao diện của bạn (giao diện cha) > Woocommerce. Đây chính là thư mục chứa các tệp template của woocommerce trong giao diện.

Cách thêm sidebar cho trang chi tiết sản phẩm

Thư mục bố cục trang woocommerce trong giao diện (Click xem ảnh lớn)

Thông thường nhà thiết kế giao diện chỉ chứa một vài file đã được chỉnh sửa để phù hợp với demo bên trong thư mục này. Ngoài ra thư mục template gốc của woocommerce thì nằm ở vị trí khác, nên nếu trong giao diện thiếu file của woocommerce thì bạn có thể vào thư mục gốc copy qua.

Thư mục template gốc nằm ở đường dẫn: Quản lý tệp > Public_html > Website của bạn > Wp-content > Plugin > Woocommerce > Templates.

Cách thêm sidebar cho trang chi tiết sản phẩm

Thư mục template gốc trong plugin (Click xem ảnh lớn)

Cách thêm sidebar cho trang chi tiết sản phẩm

File chứa nội dung trang chi tiết sản phẩm

Trong thư mục template woocommerce của giao diện, ta sẽ tìm thấy 2 file có tên là:  single-product.php  content-single-product.php . Tất cả nội dung của trang chi tiết sản phẩm đều được code trong 2 file này. Nếu bạn vào giao diện > Thư mục Woocommerce mà không tìm thấy chúng, bạn cần vào Quản lý tệp > Public_html > Website của bạn > Wp-content > Plugin > Woocommerce > Templates tìm và copy sang Quản lý tệp > Public_html > Website của bạn > Wp-content > themes > Giao diện của bạn (giao diện cha) > Woocommerce.

Cách tạo sidebar cho trang chi tiết sản phẩm

2 file bên trong thư mục woocommerce (Click xem ảnh lớn)

Code add sidebar cho trang sản phẩm

Để thêm được sidebar cho trang này, bạn cần thêm 1 trong 2 code sau vào 1 trong 2 file trên. Thường là  content-single-product.php :

Code thứ 1:  <?php do_action( 'tokoo_sidebar', 'shop' );?>   Hãy thay đoạn tokoo_sidebar bằng biến của giao diện bạn dùng.

Mẹo: bạn có thể tìm chính xác đoạn code này trong file single.php theo đường dẫn sau: Quản lý tệp > Public_html > Website của bạn > Wp-content > themes > Giao diện của bạn (giao diện cha) > single.php nhớ thay chữ blog thành shop nhé.

Cách tạo sidebar cho trang chi tiết sản phẩm

Hình ảnh code hiển thị sidebar trang chi tiết sản phẩm (Click xem ảnh lớn)

Hoặc code thứ 2:  <?php get_sidebar('detail');?>  Đây là đoạn code thường dùng nhất. hãy ưu tiên dùng code này nếu không được hãy dùng code thứ 1.

Chỉnh sửa trang chi tiết sản phẩm

Sau khi xuất hiện sidebar, chắc chắn là giao diện sẽ không thể đẹp ngay được. Việc cần làm là bạn hãy dùng CSS để sửa lại cho đẹp. Đến bài chia sẽ này thì việc dùng CSS cơ bản bạn cũng đã nắm rồi, hãy thực hành nhiều để làm chủ được CSS nhé.

Tổng kết add sidebar vào trang sản phẩm

Chỉ cần 1 trong 2 đoạn code trên, thì bạn sẽ thêm sidebar vào trang chi tiết sản phẩm thành công. Sau đó việc còn lại phải dựa hoàn toàn vào CSS để sửa lại trang theo ý mình. Hãy xem video để biết vị trí thêm code không bị lỗi nhé.

Chúc bạn thành công!