Plugins

Plugin chỉnh sửa sản phẩm + bài viết + trang ở frontend

Posted on by Flatsomelite
plugin chinh sua san pham bai viet trang o frontend

Plugin chỉnh sửa sản phẩm + bài viết + trang ở frontend siêu nhẹ

 Các chức năng có thể bật tắt dung lượng siêu nhẹ: 

1. Edit Product Price Frontend (1.5kb)

2. Frontend Image Edit for WooCommerce (9kb)

3. Short Description Editor (6kb) 

4. Edit Post Frontend (28kb)

Thay vì phải vào backend để chỉnh sửa nặng nề giờ đây bạn có thể chỉnh sửa bài viết trực tiếp ngoài frontend. 

Plugin chỉnh sửa sản phẩm + bài viết + trang ở frontend

1. Edit Product Price Frontend (1.5kb)

Edit Product Price Frontend giúp cho quản trị viên chỉnh sửa giá sản phẩm trực tiếp trên frontend. Bạn chỉ cần nhập giá và nhấn enter. Thay vì phải vào trang chỉnh sửa sản phẩm nặng nề plugin giúp bạn sửa giá ngay trên trang chi tiết sản phẩm:
Plugin chỉnh sửa sản phẩm + bài viết + trang ở frontend

  • Chỉ hiển thị cho admin

  • Chỉ xuất hiện trên trang sản phẩm

  • Giao diện hiển thị gồm:

    • Sản phẩm đơn giản: có input chỉnh giá gốc và giá khuyến mãi.

    • Sản phẩm biến thể: bảng chứa từng biến thể kèm chỉnh sửa giá riêng.

Ưu điểm

  • ✅ Giao diện đơn giản, dễ dùng

  • ✅ Không phụ thuộc jQuery

  • ✅ Phản hồi AJAX nhanh

  • ✅ Xử lý tốt cả sản phẩm đơn và biến thể

  • ✅ Không làm ảnh hưởng người dùng bình thường

2. Frontend Image Edit for WooCommerce (9kb)

Frontend Image Edit for WooCommerce cho phép quản trị viên chỉnh sửa hình đại diện và hình thu nhỏ của sản phẩm trực tiếp từ frontend trên trang sản phẩm. 
Plugin chỉnh sửa sản phẩm + bài viết + trang ở frontend

Chức năng chọn ảnh đại diện & ảnh thu nhỏ: 

  • Ảnh đại diện: chỉ chọn 1 ảnh.

  • Ảnh thu nhỏ: chọn tối đa 4 ảnh.

  • Có giới hạn kích thước, xử lý khi chọn quá số lượng.

 Ưu điểm

  • ✅ Thao tác nhanh chóng, không cần vào trang admin sản phẩm.

  • ✅ Không dùng jQuery — viết bằng vanilla JavaScript thuần.

  • ✅ Trực quan — phân tab rõ ràng, có feedback AJAX.

  • ✅ Tải ảnh trực tiếp bằng base64: không cần thêm upload handler riêng.

  • ✅ Cập nhật DOM ngay sau khi chọn ảnh: không cần reload.

3. Short Description Editor (6kb)

Short Description Editor (Frontend) cho phép chỉnh sửa mô tả ngắn sản phẩm ngay trên trang frontend sản phẩm WooCommerce.
Plugin chỉnh sửa sản phẩm + bài viết + trang ở frontend

  • Chỉ hiện với user có quyền edit_posts (thường là admin/editor).

  • Mặc định sẽ hiện nội dung mô tả ngắn như bình thường.

  • Có nút ✏️ để mở trình chỉnh sửa dạng WYSIWYG đơn giản, với các công cụ:

  1. In đậm (<strong>)
  2. In nghiêng (<em>)
  3. Gạch chân (<u>)
  4. Danh sách không thứ tự (<ul><li>)

Ưu điểm

  • Gọn nhẹ: Không dùng thư viện lớn như TinyMCE.

  • Không phụ thuộc jQuery.

  • UX mượt mà: Chuyển đổi giữa chế độ xem và chỉnh sửa dễ dàng.

  • Bảo mật tốt:

    • Lọc HTML với wp_kses

    • Xác minh quyền edit_posts

  • Hiệu quả thực tế cao: Dùng tốt cho quản trị nội dung nhanh (editor, admin sản phẩm).

4. Edit Post Frontend (28kb)

Edit Post Frontend cho phép quản trị viên chỉnh sửa nội dung bài viết ngay từ frontend (trang chi tiết sản phẩm + bài viết + trang) với trình soạn thảo Vanilla. Bạn khó có thể tìm được công cụ soạn thảo rất nhiều tính năng mà nhẹ như vậy.
Plugin chỉnh sửa sản phẩm + bài viết + trang ở frontend

Chỉnh sửa bài viết từ frontend

  • Hiển thị nút ✏️ trên mỗi bài viết nếu người dùng có quyền manage_options.

  • Mở ra trình chỉnh sửa dạng popup có thể kéo thả co giãn khung soạn thảo theo ý muốn chứa:

    • Ô tiêu đề

    • Trình soạn thảo nội dung (<textarea> sử dụng Trumbowyg)

    • Nút: 🖼️ Chèn ảnh, 📚 Thư viện, 🔄 Replace, 💾 Cập nhật, ✖️ Đóng.

  • Trình soạn thảo Vanilla

    • Dễ dùng, nhẹ, không cần jQuery.

    • Hỗ trợ nhiều công cụ: [“viewHTML”],[“undo”,”redo”],[“bold”,”italic”,”underline”,”strikethrough”],[“link”,”unlink”],[“p”,”h2″,”h3″,”h4″],[“orderedList”,”unorderedList”],[“superscript”,”subscript”],[“textAlign”],[“lineHeight”],[“toggleCase”],[“horizontalRule”,”removeformat”],[“fontSize”],[“heading”],[“foreColor”],[“backColor”],[“insertIframe”],[“insertCode”],[“table”],[“tableColor”],[“quote”],[“findReplace”],[“wordCount”],[“insertDateTime”]

      • Định dạng chữ (bold, italic, underline…)

      • Heading, danh sách, chèn ảnh/iframe, căn lề, đổi màu…

      • Tìm & thay thế (replace)

      • Thống kê từ (word count), fullscreen…

  • ƯU ĐIỂM

    • Giao diện nhẹ nhàng (Vanilla không cần jQuery).

    • Chèn ảnh trực tiếp hoặc chọn từ thư viện rất tiện lợi.

    • Không reload trang khi chỉnh sửa, chỉ reload sau khi lưu.

    • Bảo toàn HTML có style/class, giữ lại đúng định dạng.

    • Hạn chế tối đa phụ thuộc ngoài → hoạt động mượt, không nặng trang.

  • Lưu ý: Edit Post Frontend chỉ dùng cho các trang đơn giản ko nên dùng cho trang chủ, trang chính…
Flatsomelite