This post is trending. 8.773 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 (Hoạt động tốt với Flatsome theme)

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. Ví dụ:

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ờ. Ví dụ

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

Thiết lập xong 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ển thị nhé:

Đưa Mô tả chi tiết sản phẩm lên trên


Mô tả sản phẩm thường được đặt dưới Mô tả ngắn, một số web bán hàng không cần Mô tả ngắn thì sao? đưa Mô tả chi tiết lên trên dùng đoạn code sau nhé

Đoạn code này của Tien Huynh WordPress Vietnam Team ❤

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 (23 Reviews)
Like
Like Love Haha Wow Sad Angry
15831

37 Bình luận

    1. Cho mình hỏi hiện tại trang chi tiết sản phẩm bị ẩn nút thêm vào giỏ hàng, giờ làm sao để nó hiện lên lại, cám ơn bạn.

      1. Nút Giỏ hàng bị ẩn có 2 nguyên nhân:
        1- SP chưa có giá (điền giá mới hiện nút)
        2- Lỗi hoặc xung đột Plugin nào đó với Woo
        Nếu dính lỗi 2, nên tắt từng Plugin đi rồi thử lại. Có gì gửi mình URL web mình xem giúp.
        Thân.

        1. Mình kiểm tra lại thì nguyên nhân là do theme đó ẩn nút giỏ hàng bằng CSS, chỉ cần tắt lệnh .product-main .cart{display:none} là xong, cám ơn SEO MAX nhiều nha 🙂

  1. a cho e hỏi chút

    1) Xóa /product/ Sản phẩm slug Woo giờ bắt buộc dùng plugin chứ k dùng code được nữa ạ?

    2) e muốn thay đổi thứ tự tab nội dung trong sản phẩm thì code như nào ạ? ví dụ cho tab review lên trước tab mô tả

    1. muốn xóa /product/ slug bạn có thể dùng code của Lê Văn Toản: https://bit.ly/2K6bwZx – trước mình có dùng, hoạt động khá ổn định. Hiện hay dùng https://bit.ly/2Evrrg3 – ổn định và chuẩn URL onpage cho /category/ slug luôn!

      Muốn thay đổi thứ tự Tab product detail: cái này phải sửa code nhé, không có cách ngắn gọn đâu.

  2. E hỏi chút ạ
    e thêm sp woocommerce viết tiêu đề sp thì dài nhưng trên trang hiển thị đc có 2 chữ
    làm thế nào để hiển thị tên sp dài ra chút ạ.

    1. tiêu đề hiển thị dài ngắn ở giao diện là do theme bạn sử dụng. Hoặc lỗi gì đó, hoặc lỗi do cài đặt,… bạn gửi xin link web mình xem qua nhé.

  3. Mình kiểm tra Product chưa cung cấp giá trị nhận dạng toàn cầu nào (ví dụ như gtin mpn isbn). Bạn có thể cho mình đoạn mã để bổ sung được không?

    1. isbn, mpn hoặc gtin8 là dữ liệu cấu trúc về xuất xứ và chứng chỉ sản phẩm theo quốc gia. Schema này cho web Thương mại điện tử lớn bán hàng toàn cầu như Alibaba, Amazon,… bạn không cần quan tâm nếu bạn bạn hàng tại VN.
      Google đề xuất, mình theo hay không không quan trọng. Nếu cần quá, bạn thuê code riêng phần này, đắt đấy.

  4. sao em thay đổi quick view thành xem nhanh nó báo lỗi như thế này ạ, anh khắc phục giúp em với
    Your PHP code changes were rolled back due to an error on line 126 of file wp-content/themes/flatsome-child/functions.php. Please fix and try saving again.

    syntax error, unexpected ‘View’’ (T_STRING), expecting ‘)’

    1. code đổi Quick view này vẫn hoạt động tốt với Flatsome Theme. Bạn kiểm tra lại xem thêm đúng chưa? dùng Child Theme cho chắc ăn nhé. Update Woo và Flatsome lên bản mới nhất xem? (nhớ backup)
      Cần gì email mình hỗ trợ seomax.net@gmail.com

  5. Bác cho em xin đoạn cod viền bo toàn bộ sản phẩm và tiêu đề với ạ
    Em có thêm đoạn cod này nhưng đoạn viền cách 2 sản phẩm sát nhau thì nó đang dính vào nhau trông rất to và xấu ( .type-product {
    border: 1px solid #000;
    box-sizing: border-box;
    } ) cảm ơn bác

  6. Cho hỏi ngoài lề chỗ này một chút. Mình muốn sắp xếp sản phẩm theo tiêu chí như sau: sản phẩm có giá thấp nhất trước tiên, những sp không có giá phải nằm sau cùng. Chưa biết điều chỉnh như thế nào có bạn nào giúp với ạ.

  7. Cám ơn anh đã chia sẻ!
    Anh cho em hỏi là em muốn chỉnh Decription của product của em đang là Heading 2, em muốn sửa lại thành heading 3, thì chỉnh code như thế nào?
    Anh chỉ giúp em nha

  8. Cho mình hỏi chút là sản phẩm ko có giá nút giỏ hàng sẽ ko hiển thị bây giờ mình muốn ko có giá nó vẫn hiển thị thì làm thế nào? Mình sử dụng theme Flatsome

  9. Cho mình hỏi làm tn để giảm cỡ chữ tiêu đề sản phẩm trong trang sp lại ạ. Để mặc định của nó to quá nhìn mất mỹ quan

    1. Sửa kích thước Tiêu đề sản phẩm bạn cần edit CSS, nếu theme có chỗ custom CSS thêm vào đoạn sau:
      .product .summary .product_title {
      font-size: 16px;
      }
      /* Thay 16px bằng số tùy bạn - kích cỡ chữ */

      Tùy theme bạn đang dùng nhé. Không phải theme nào cũng hàm này.
      Không có chỗ Custom thì thêm vào CSS Child theme nhé.

  10. Bạn cho mình hỏi làm thế nào để thay đổi màu giá sản phẩm khi hiển thị. Hiện trang của mình giá sản phẩm nó đang là màu đen mình muốn đổi sang màu đỏ cho nó nổi bật

    1. Sửa màu text Giá sản phẩm bạn cần edit CSS. Ah, web bạn Flatsome thì nhìn thanh head Admin có: Flatsome -> Advanced -> Custom CSS.
      Thêm vào phần ALL SCREENS đoạn CSS sau:

      span.amount {
      color: #ed1c24;
      }
      /* Thay #ed1c24 bằng mã màu khác tùy bạn */

      Tham khảo mã màu đỏ TẠI ĐÂY

  11. ad ơi cho e xin code lia chuột vào sản phẩm hiện ra bản thông tin tóm tắt không cần bấm vào quick view được không?

  12. Mình dùng đoạn code xóa tab đánh giá nhưng không được
    // Remove vote tab in product detail page
    add_filter( ‘woocommerce_product_tabs’, ‘wcs_woo_remove_reviews_tab’, 98 );

    function wcs_woo_remove_reviews_tab( $tabs ) {
    unset( $tabs[‘reviews’] ); // Remove the reviews tab

    return $tabs;
    }

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! Xin cảm ơn.