This post is popular. 90 Views

Woocommerce: Những đoạn code tùy biến hay 2019

Woocommerce là một trong những Plugin phổ biến nhất Wordpress, cho các web shop bán hàng online. Woo luôn đơn giản và đầy đủ tính năng, quan trọng nhất là Woo Miễn Phí. Muốn tùy biến nó thì ta phải làm thế nào?

woocommerce code

Woocommerce Plugin ra đời ngay sau khi WordPress bắt đầu càn quét thế giới Thiết kế web. Wooplugin hỗ trợ web bán hàng online hiệu quả nhất hiện nay, theo số liệu mới nhất 4/2019 thì hiện có trên 4 triệu website sử dụng Woocommerce – Một con số khổng lồ thể hiện vị thế gần như tuyệt đối của Woo.

Woocommerce miễn phí và đơn giản nhất cho ai cũng có thể sử dụng, do vậy nó sẽ có rất nhiều tính năng thừa cũng như những thiết kế không vừa ý nhiều người. Để tùy biến Woo theo mong muốn bạn cần biết code! nhưng đôi khi, bạn chỉ cần copypaste cũng có thể tùy biến được một số tùy chỉnh sau:

Cách tùy chỉnh function.php WordPress

Tùy chỉnh function.php trong WordPress khá đơn giản, bạn chỉ việc tìm file function.php của theme đang sử dụng và thêm code vào đó. Khuyến cáo: Nên sử dụng Child theme để tinh chỉnh nhé.

Bạn vào WP Admin -> Giao diện -> Sửa (giao diện) và tìm file function.php. Tùy WP theme sẽ có các vị trí file function khác nhau. Thêm code tùy chỉnh vào sau thẻ <?php, nên để dưới cuối cùng của file.

function.php
function.php trong WordPress

Những đoạn code tùy biến cho Woo

Để tùy biến Woocommerce cần thêm code vào file function.php như hướng dẫn trên. Những đoạn code dưới mình đã và đang dùng 100% hoạt động ổn định, đa số lượm nhặt từ nhiều nguồn, có đoạn tự chém.

Trước khi tùy biến, xin lưu ý: “backup web hoặc làm demo trên local host, ít nhất cũng lưu lại file function.php nguyên bản đã nhé. Đừng dại mà ném toẹt code ngay vào web chính!”

Khuyến cáo: Nên sử dụng Child theme


“Miễn phí” 0đ thành “Giá liên hệ”

Mặc định Woo khi sản phẩm  không điền giá (0đ) sẽ hiển thị: Miễn Phí, để thay chữ Miễn Phí thành Giá liên hệ thì theme code sau vào function.php

“Quick View” thành “Xem nhanh”

Tính năng Quick View của Woo rất hữu ích nhưng đa số theme lại bỏ qua việc dịch chữ này thành các ngôn ngữ, trong đó có tiếng Việt. Dịch chữ Quick view thành Xem nhanh hay gì gì tùy bạn

SKU thành Mã sản phẩm

Mã sản phẩm là tính năng không thể thiếu với web bán hàng, nhất là các web có tính năng Live Search thì Mã sản phẩm tối quan trọng, giúp khách hàng và người bán tìm kiếm dễ hơn. Ngặt nỗi, ít theme quan tâm dịch từ này, mặc định Woo để là SKU dịch thành Mã sản phẩm:

Hoặc (dùng 1 trong 2 đoạn code này đều dịch được chữ SKU)

Ẩn mã SKU đi cũng đơn giản, bạn thêm code sau

Hiển thị SKU ra ngoài trang Danh mục

Hiển thị Mã sản phẩm SKU ra ngoài page Danh mục sản phẩm, ngay bên dưới ảnh thumb sản phẩm giúp khách hàng thấy mã ngay khi view.

Có thể thay chữ Mã SP trên bằng bất kỳ từ gì bạn muốn.

Dịch Breadcrumb trong Giỏ hàng

Đây là phần thủ tục thôi, nó là đường dẫn Breadcrumb của trang Giỏ hàng:

SHOPPING CART -> CHECKOUT DETAILS -> ORDER COMPLETE

Đến như theme Flatsome phổ biến đến vậy mà cũng không thèm dịch phần này – thua! Code tùy biến dịch text đây:

Bỏ chữ SALE – Giảm giá

Với sản phẩm giảm giá, Woo treo trên đầu chữ SALE khá to. Tùy CSS mỗi theme nhưng đa phần khi dịch ra tiếng Việt thì chữ Giảm giá này khiến web xấu tệ! Trong trường hợp bạn muốn xóa chữ SALE này đi:

Hiện giá nhỏ nhất nhiều biến thể

Với sản phẩm có nhiều biến thể thì Woo để Giá nhìn rất khó chịu. VD như giá từ: 2.500.00đ – 3.990.000đ ?? Nếu bạn chỉ muốn hiển thị giá của biến thể có giá nhỏ nhất là 2.500.000đ thì code đây

Xóa Extensions trả phí Woo 3.6

Từ WooCommerce 3.6 thì có thêm các Extensions (addon gợi ý) có tính phí rất khó chịu. Đây là điều nhiều người không mong muốn – trong đó có mình. Có lẽ WordPress không còn trong sáng và Miễn phí như trước nữa!!!

WooCommerce 3.6 new addon
WooCommerce 3.6 có thêm các Extensions gợi ý có trả phí

Cách xóa bỏ Extensions trong WooCommerce 3.6 như sau:

Thay “Add to cart” thành “Thêm vào giỏ”

Add to cart là nút không thể thiếu trong Woo nhưng có những theme họ không hỗ trợ tiếng Việt, hoặc đơn giản, bạn muốn đổi chữ Thêm vào giỏ thành Mua ngay hay gì gì đó. Hãy thêm đoạn code này vào

Xóa bỏ nút Add to cart “Thêm vào giỏ”

Với một số web giới thiệu sản phẩm, bạn không muốn hiển thị nút Add to cart (Thêm vào giỏ)? bạn có thể loại bỏ nút này mà không ảnh hưởng tới gian hàng và các thao tác khác

Thay đổi số Sản phẩm trong Danh mục

Với những theme cũ hoặc các theme do Việt Nam làm với Visual Composer, việc thay đổi Số lượng sản phẩm trong trang Danh mục sản phẩm là rất phức tạp, họ không cho tùy chỉnh nhiều phần này.

Muốn hiển thị bao nhiêu sản phẩm trong 1 trang Danh mục, thay số 24 trên bằng số bất kỳ bạn muốn. Nếu muốn hiển thị toàn bộ sản phẩm trên 1 page thì ta thay 24 thành -1

Thêm text dưới Tiêu đề sản phẩm

Nếu bạn muốn thêm một đoạn text tùy chỉnh luôn xuất hiện bên dưới tiêu đề mọi sản phẩm, một câu Slogan hoặc Khuyến mại, tốt nhất,.. gì gì đó thì làm thế nào? code đây

Xóa chữ “Mô tả sản phẩm” trong mô tả

Trong phần Mô tả chi tiết của mỗi Sản phẩm, có dòng đầu tiên to đùng: Mô tả sản phẩm nhìn rất ngứa mắt. Bạn muốn xóa dòng này?

Xóa tab Đánh giá trong chi tiết sản phẩm

Tab đánh giá trong Chi tiết sản phẩm khá thú vị, nó hơi dài dòng nhưng thêm Dữ liệu có cấu trúc Schema cho mỗi Sản phẩm. Khi có đánh giá, bạn sẽ có sao và vote được Google hiển thị. Nếu thấy phần đánh giá này dài dòng, xóa nó đi cũng được:

Xóa /product/ và /product-category/

Việc rút ngắn URL đường dẫn tĩnh giúp web bạn chuẩn SEO hơn và URL nhìn ngắn gọn dễ nhìn, dễ nhớ. Nếu web bạn đã lâu năm và đang top, tốt nhất không nên chỉnh sửa URL làm gì, có sao kệ nó.

Tất cả trong 01 Plugin để rút ngắn URL: Premmerce WooCommerce Permalink Manager Pro.

Khuyến cáo: Không nên can thiệp Đường dẫn tĩnh nếu bạn không am hiểu về nó trong SEO.

Premmerce WooCommerce Permalink Manager Pro
Premmerce WooCommerce Permalink Manager Pro

Các tính năng chính của Plugin trên

1. Xóa /product/ Sản phẩm slug Woo

Xóa đường dẫn /san-pham/ hay /product/ slug trong URL Chi tiết sản phẩm. Thiết lập lại Đường dẫn tĩnh cho toàn bộ sản phẩm của Shop

VD:
URL cũ: domain.com/san-pham/dien-thoại-iphone-x-64gh
URL mới: domain.com/dien-thoại-iphone-x-64gh

2. Xóa /product-category/ Danh mục slug Woo

Xóa đường dẫn /product-category/ hay /danh-muc/ trong URL các Danh mục sản phẩm, rút ngắn URL nhất có thể cho Danh mục giúp SEO dễ hơn. Lưu ý khi sử dụng plugin này vì nó không dành cho tay gà mờ.

VD:
URL cũ: domain.com/danh-muc/dieu-hoa/dieu-hoa-panasonic
URL mới: domain.com/dieu-hoa-panasonic

Sau khi thiết lập Plugin, nhớ Update Đường dẫn tĩnh: WP Admin -> Cài đặt -> Đường dẫn tĩnh -> Lưu thay đổi

update permalinks
update permalinks

Xóa bỏ đường dẫn breadcrumb

Breadcrumb là đường dẫn tạo sitemap nội cho người dùng thấy, giúp điều hướng xem từ Danh mục đến Sản phẩm chi tiết và ngược lại. Đôi khi vì lý do nào đó mà bạn không thích nó, cần bỏ breadcrumb đi? Cá nhân mình khuyên không nên xóa 🙂

Sửa ký hiệu tiền tệ Đ sang VND

Woo hỗ trợ tiếng Việt khá tốt nhưng đơn vị tiền tệ thì không hiểu ông dịch thế nào hay để là đ, kiểu 200.000đ giờ muốn đổi thành 200.000VND thì làm thế nào?

Bạn có thể thay chữ VND trên bằng bất kỳ ký hiệu tiền tệ nào bạn muốn.

Thêm bớt số lượng sản phẩm liên quan

Trong mỗi page Chi tiết sản phẩm đều hiểu thị Sản phẩm liên quan. Bạn muốn nó tăng lên hay giảm đi theo ý mình? thay số 6 bằng số sản phẩm bạn muốn nó hiểu thị nhé:

Shortcode cho Woocommerce

Woocommerce hỗ trợ Shortcode rất tốt, thay vì code những đoạn loằng ngoằng phức tạp thì bạn có thể sử dụng các shortcode này để tạo các Page mới, hiển thị nội dung về các sản phẩm như mong muốn

Show sản phẩm mới nhất

Show sản phẩm nổi bật

Show sản phẩm theo ID

Show sản phẩm theo nhiều ID

Show full sản phẩm chi tiết ra page

Show sản phẩm đang giảm giá

Show sản phẩm bán chạy

Show sản phẩm theo danh mục

Kết luận

Các đoạn code tùy biến cho Woocommerce giúp website bạn linh động hơn, tạo các tùy chọn nâng cao cho người dùng giúp shop bán hàng tốt hơn. Nếu áp dụng đúng sẽ tăng hiệu suất hoạt động người dùng trên web rất nhiều, đôi khi đơn giản nhất là hiệu quả nhất đấy.

Nói chung còn nhiều code hay lắm, làm đến đâu mình sẽ update dần dần tới đó khi có thời gian. Các đoạn code này rất hữu ích nhưng các bạn cần cẩn trọng khi thêm vào web nhé.

— SEO Max
Biên soạn và tổng hợp

4.2/5 (5 Reviews)
Like
Like Love Haha Wow Sad Angry

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Nội dung hay

NHẬN TIN BÀI MỚI

NHẬN TIN BÀI MỚI

Thấy bác ghé web em cũng lâu lâu, bác có muốn

- Nhận bài viết và thông tin mới ?
- Nhận Theme & Plugin miễn phí?

Đăng ký ngay nhé! Em gửi qua email cho

Thành công! Vui lòng check email để xác nhận.