Chỉnh sửa trang chi tiết sản phẩm Woocommerce [hoàn chỉnh]

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

Ở bài này, Khánh sẽ hướng dẫn chỉnh sửa trang chi tiết sản phẩm Woocommerce chỉ với 1 plugin miễn phí.

Thiết kế trang sản phẩm sao cho đẹp mắt, đầy đủ thông tin, dễ dàng sử dụng là một cách tăng trải nghiệm khách hàng, từ đó tăng cơ hội họ nhấp vào nút “Đặt hàng”.

Nên bạn đừng bỏ qua bước thiết kế, tùy chỉnh lại trang sản phẩm.

Giờ thì chúng ta cùng bắt đầu nhé!

Cách chỉnh sửa trang chi tiết sản phẩm Woocommerce

Để chỉnh sửa trang này, bạn sẽ dùng plugin StoreCustomizer.

Bạn vào Dashboard >> Plugins >> Add New, gõ StoreCustomizer trên thanh tìm kiếm rồi cài đặt và kích hoạt.

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

Sau đó bạn lại vào Dashboard >> Appearance >> Customize, tìm tab StoreCustomizer, nhấp vào rồi tiếp tục nhấp vào tab WooCommerce Product Page.

tùy chỉnh giao diện trang chi tiết sản phẩm woocommerce

Lúc này nó sẽ hiện ra một cột menu tùy chỉnh trang sản phẩm.

Ở phần trên cùng là các tùy chọn:

tùy chỉnh giao diện sản phẩm woocommerce
  • Remove Product Breadcrumbs: xóa đường dẫn đến sản phẩm, tức là cái Khánh khoanh đỏ trong hình minh họa dưới đây.
đường dẫn sản phẩm
  • Remove Image Zoom: khi bạn di chuột đến ảnh sản phẩm thì nó thường tự động phóng to. Nếu bạn chọn tùy chọn này, nó sẽ bỏ tính năng tự động phóng to này.
  • Remove Image Lightbox: khi bạn nhấp vào hình ảnh thì nó sẽ hiện một cửa sổ nhỏ hiển thị kích thước thật của ảnh. Nếu bạn chọn tùy chọn này, nó sẽ bỏ tính năng này.
  • Remove Image Slider: bạn sẽ thấy nhiều sản phẩm bao gồm nhiều ảnh, khi di chuột đến thì nó sẽ tự động chạy từ hình này sang hình khác như slider. Nếu bạn chọn tùy chọn này, nó sẽ bỏ tính năng này.

Bạn di chuột xuống sẽ thấy thêm nhiều tùy chọn, bạn chú ý những tùy chọn cần thiết sau:

giới thiệu từng cài đặt
  • Remove Product Title: Bỏ tên sản phẩm.
  • Add a default Price Prefix: Thêm text ở phía trước giá sản phẩm. Ví dụ Khánh thêm từ “Chỉ” thì nó sẽ hiện thế này:
Thêm chữ trước giá
  • Add a default Price Suffix: Thêm text ở phía sau giá sản phẩm.
  • Edit Product Page Button: Đổi tên nút thêm giỏ hàng, ví dụ “Add to cart” thành “Thêm sản phẩm”.
  • Remove SKU: SKU là mã sản phẩm, thông thường nó không hiện ra trên trang sản phẩm nên bạn không cần quan tâm.
  • Remove Product Categories: Bỏ danh mục sản phẩm.
  • Remove Product Tags: Bỏ tag sản phẩm.
  • Show Amount Sold: Hiển thị số lượng sản phẩm đã bán.
  • Add button to ‘Continue Shopping: Thêm nút Continue Shopping. Tick vào tùy chọn này, bạn được sửa text và thêm đường link vào text.
  • Set ‘Add To Cart’ Increment values: Đặt số sản phẩm mà khách có thể đặt mua. Tính năng này thường dùng trong những dịp khuyến mãi chẳng hạn, sản phẩm sale mạnh nên quy định mỗi khách chỉ mua 1 cái.
  • Edit Stock Status Texts: Tick vào đây bạn sẽ thấy nó hiện ra các tùy chỉnh thay đổi text cho tình trạng đơn hàng. Nếu hết hàng (Out Of Stock) thì sẽ hiện ra text nào, còn hàng (In Stock) thì hiện ra text nào.
chỉnh text out of stock

Tiếp theo bạn di chuột xuống phần Product Page Tabs.

Thông thường WooCommerce mặc định có 3 tab là Description, Additional information và Reviews và để chúng cùng 1 hàng.

3 tab thông tin sản phẩm

Có 2 tùy chọn cho mỗi tab đó là Edit Tab Text (đổi tên) và Remove Tab (Xóa tab), còn dấu mũi tên xoay tròn ở đầu là về lại cài đặt mặc định.

2 tùy chọn của mỗi tab

3 tùy chọn bên dưới như Add Product Long Description after Tabs được dùng khi bạn xóa 1 tab và muốn chuyển xuống bên dưới, không nằm chung với 2 tab còn lại nữa.

tùy chỉnh vị trí của từng tab

Ví dụ bạn muốn chuyển tab Additional information xuống riêng thành một phần thì trước tiên bạn sẽ xóa Additional information Tab bằng nút Remove Tab, sau đó tick vào ô Add Product Additional infor after Tabs.

tùy chỉnh vị trí tab additonal information

Bạn di chuột xuống phần Related & Recommended Products, đây là nơi bạn tinh chỉnh phần đề xuất những sản phẩm.

tùy chỉnh tab đề xuất sản phẩm

Ở phần Product Recommendations (đề xuất sản phẩm) bạn sẽ thấy có 2 tab là Edit Title và Remove Section.

Edit Title dùng để đổi tên phần này, ví dụ bạn đổi thành “Có thể bạn sẽ thích…” hoặc “Nhiều khách hàng cũng mua kèm”.

Remove Section là để xóa phần này nếu như bạn thấy nó không cần thiết.

Trong Products Per Row, thanh kéo từ số 2 đến số 5 chỉ số hàng và Amount of products to show để chỉ số lượng sản phẩm trong mỗi hàng.

Trong phần Related Products (sản phẩm liên quan), bạn cũng tinh chỉnh tương tự Product Recommendations.

Bạn tiếp tục di chuột xuống phần cuối cùng là Design Elements.

Có 3 mục để bạn chỉnh phần thiết kế:

tùy chỉnh tab thiết kế
  • Customize Product Title: Tên sản phẩm
  • Customize Product Price: Giá sản phẩm
  • Customize Product Button Colors: Nút thêm sản phẩm vào giỏ hàng

Khi bạn tick chọn mục nào thì nó sẽ hiện ra Font size (cỡ chữ) và Font Color (màu chữ).

Sau khi cài đặt xong xuôi, bạn nhớ kéo chuột lên trên cùng để nhấp nút Publish.

nhấp nút Publish

Lời kết

Vậy là Khánh đã hướng dẫn xong cách chỉnh sửa trang chi tiết sản phẩm Woocommerce chỉ với 1 plugin đơn giản.

Nếu trong quá trình thao tác, bạn gặp trục trặc nào thì cứ để lại bình luận bên dưới, Khánh sẽ giải đáp giúp bạn.

Hẹn gặp bạn ở bài hướng dẫn tiếp theo.