• Home
  • WordPress
    • Thủ thuật WordPress
    • WordPress plugins
    • WordPress themes
    • Hosting và domain
  • Kiếm tiền
    • Google AdSense
    • Tiếp thị liên kết
    • Rút gọn link
  • Quà tặng
  • Khuyến mãi
  • Đánh giá
  • Dịch vụ
    • WordPress Hosting
    • Cài đặt WordPress
    • Quét mã độc website
    • Tối ưu WordPress
    • Mua theme Paradise
  • Thông báo
  • Liên hệ

WP Căn bản

Thủ thuật WordPress và kiếm tiền online

wordpress-theme-tot-nhat

Trang chủ » WordPress » Thủ thuật WordPress » Tải có điều kiện các file JS và CSS của plugin WooCommerce

Tải có điều kiện các file JS và CSS của plugin WooCommerce

14/02/2017 14/02/2017 Trung Hiếu 21 Bình luận

Mục lục bài viết

  1. Danh sách các file CSS và JS mặc định của WooCommerce
    1. JS của WooCommerce
    2. CSS của WooCommerce
  2. Tải có điều kiện các file JS và CSS của WooCommerce

Tải có điều kiện các file JS và CSS của plugin WooCommerce.

WooCommerce là một trong những plugin hỗ trợ xây dựng shop bán hàng online trên nền tảng WordPress phổ biến nhất và tốt nhất hiện nay. Theo mặc định, nếu blog/ website WordPress của bạn có cài đặt WooCommerce thì tất cả các trang đều sẽ tải file JS và CSS của plugin này. Điều đó vô tình khiến cho page-size cũng như lượng request của mỗi trang đều tăng lên đáng kể, làm blog/ website của bạn tải chậm hơn, khách hàng phải đợi lâu hơn và nguy cơ mất khách cũng tăng rõ rệt.

Tham khảo thêm:

  • Theme Paradise v4.2 chính thức ra mắt, hỗ trợ WooCommerce
  • Hướng dẫn sửa lỗi memory limit trong WooCommerce
  • Top 10 WooCommerce plugins và extensions miễn phí

Danh sách các file CSS và JS mặc định của WooCommerce

JS của WooCommerce

http://sitename.com/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart.min.js
http://sitename.com/wp-content/plugins/woocommerce/assets/js/jquery-blockui/jquery.blockUI.min.js
http://sitename.com/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js
http://sitename.com/wp-content/plugins/woocommerce/assets/js/jquery-cookie/jquery.cookie.min.js
http://sitename.com/wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js

view raw
woocommerce.js
hosted with ❤ by GitHub

CSS của WooCommerce

http://sitename.com/wp-content/plugins/woocommerce/assets/css/woocommerce-layout.css
http://sitename.com/wp-content/plugins/woocommerce/assets/css/woocommerce-smallscreen.css
http://sitename.com/wp-content/plugins/woocommerce/assets/css/woocommerce.css

view raw
woocommerce.css
hosted with ❤ by GitHub

Để nhìn thấy danh sách các file này, các bạn chỉ cần view source của site trên trình duyệt web hoặc sử dụng các công cụ kiểm tra tốc độ. Nhớ tắt plugin minify hay cache (nếu có) trước khi xem nhé.

Tải có điều kiện các file JS và CSS của WooCommerce

Tải có điều kiện các file JS và CSS của WooCommerce nghĩa là chỉ cho phép chúng tải trên những trang do WooCommerce tạo ra, chẳng hạn như Shop, Cart, Checkout, My Account… Không cho phép chúng tải trên các trang khác (không cần đến CSS và JS của WooCommerce) để tránh làm chậm trang.

Tất cả những gì các bạn cần làm là chèn đoạn code sau đây vào cuối file functions.php của theme (hoặc child theme) mà bạn đang sử dụng:

//* Conditional load WooCommerce's JS and CSS
function conditionally_load_woc_js_css(){
if( function_exists( 'is_woocommerce' ) ){
# Only load CSS and JS on Woocommerce pages
if(! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
## Dequeue scripts.
wp_dequeue_script('woocommerce');
wp_dequeue_script('wc-add-to-cart');
wp_dequeue_script('wc-cart-fragments');
## Dequeue styles.
wp_dequeue_style('woocommerce-general');
wp_dequeue_style('woocommerce-layout');
wp_dequeue_style('woocommerce-smallscreen');
}
}
}
add_action( 'wp_enqueue_scripts', 'conditionally_load_woc_js_css' );

view raw
functions.php
hosted with ❤ by GitHub

Lưu lại, xóa cache và minify của web (nếu có), xóa cache trình duyệt và xem kết quả. Chúc các bạn thành công!

Theme Paradise được phát triển bởi WP Căn bản đã mặc định được bổ sung thêm code này từ phiên bản 4.2.2 nên các bạn không cần phải thực hiện thao tác kể trên nữa. Demo chi tiết của giao diện, các bạn có thể xem tại đây:

Mọi thắc mắc và góp ý liên quan đến việc tải có điều kiện các file JS và CSS của plugin WooCommerce xin vui lòng gửi vào khung bình luận bên dưới để được giải đáp.

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)

5 / 5 ( 28 bình chọn )
  • Share on Facebook
  • Tweet on Twitter

Bài viết liên quan

Chuyên mục: Thủ thuật WordPress Thẻ: Tăng tốc WordPress/ WooCommerce

dich-vu-cai-dat-website-wordpress-mien-phi

Nói về Trung Hiếu

Một người con của xứ Nghệ, hiện đang sinh sống tại Hà Nội. Theo dõi tôi trên Facebook để cập nhật những tin tức mới nhất liên quan đến WordPress nhé.

Bài viết trước « Cấu hình HSTS cho blog/ website thông qua file .htaccess
Bài viết sau Sử dụng colored boxes, color buttons và highlight menu »

Reader Interactions

Bình luận

    Trả lời Hủy

    Lưu ý:
    > Không sử dụng từ khóa trong mục "Tên".
    > Hãy sử dụng tên thật và địa chỉ email chính xác.
    > Vui lòng bình luận bằng tiếng Việt có dấu.
    Mọi bình luận trái quy định sẽ bị gỡ bỏ link hoặc xóa bỏ hoàn toàn.

  1. Cường viết

    14/02/2017 lúc 13:25

    Bạn có đang phát triển import demo Shop Style, Blog Style và Magazine Style với 1 click không? Có vậy thì sẽ hoàn hảo và tiện lắm luôn!

    Trả lời
    • Trung Hiếu viết

      14/02/2017 lúc 13:38

      Để mình nghiên cứu. Sẽ bổ sung sớm. :D

      Trả lời
      • Cường viết

        14/02/2017 lúc 14:00

        Theme mình có thể hỗ trợ giao diện full width Layout luôn trong tương lai không? À còn thiếu Porforlio Style nữa?

        Trả lời
        • Trung Hiếu viết

          14/02/2017 lúc 14:02

          Full-width có hỗ trợ sẵn rồi mà bạn. Trong phần tùy chọn Layout của từng post/page đó. Portfolio thì để mình nghiên cứu đã. Đã có bản 4.2.4 fix lỗi Landing Page nhé. Bạn update xem sao. :P

          Trả lời
          • Cường viết

            14/02/2017 lúc 14:21

            Sẵn bạn nghiên cứu tích hợp tùy chỉnh Custom CSS trong customize theme luôn!! :D Mỗi lần update theme là mất hết chỉnh sửa trong style.css.

          • Trung Hiếu viết

            14/02/2017 lúc 14:34

            Cái này mình đang nghiên cứu. Tích hợp tính năng chọn màu rồi. Nhưng chỉ áp dụng được trên file style.css mà không áp được vào file style.min.css. Đang bí. :P Tạm thời bạn tùy biến CSS ở chỗ nào thì copy vào paste vào phần Additional CSS ấy. Update sẽ không bị mất. :P

  2. Luong Ha viết

    14/02/2017 lúc 21:34

    Lên giao diện 1 menu trên điện thoại trông sáng đẹp hẳn :D

    Trả lời
  3. Thái Tài viết

    15/02/2017 lúc 08:16

    Cái Landing Page nhìn chuyên nghiệp thật, dùng nó để chém nội dung chạy Ads cũng ngon.

    Trả lời
    • Trung Hiếu viết

      15/02/2017 lúc 08:46

      Quất 1 bộ ủng hộ mình đi bạn ơi. Hôm nay 15/02 là hạn cuối cùng của khuyến mãi rồi. Giá chỉ 450k – 500k – 600k tùy theo gói thôi. Sau hôm nay về giá gốc là 500k – 600k – 700k. :P

      Trả lời
  4. Thien viết

    20/02/2017 lúc 18:11

    Cảm ơn bạn nhé. Cần ngâm cứu thêm phần này

    Trả lời
  5. Thien viết

    20/02/2017 lúc 18:14

    Cảm ơn bạn nhé. Cần phải nghiên cứu thêm phần này để site chạy nhanh hơn

    Trả lời
  6. Huy Lâm viết

    20/02/2017 lúc 22:31

    có cách nào ngoại lệ một js hay css nào trong số đó không bạn?

    Trả lời
    • Trung Hiếu viết

      21/02/2017 lúc 08:04

      Bạn bỏ đi đoạn code tương ứng với file JS hoặc CSS đó là được mà. :P

      Trả lời
  7. Đạo tặc Comment viết

    12/03/2017 lúc 22:45

    Có thẻ điều kiện nào chỉ áp dụng cho các bài viết ở page 1 không ảnh nhỉ?

    Trả lời
    • Trung Hiếu viết

      13/03/2017 lúc 08:18

      Quả này chệu luôn. :D

      Trả lời
  8. Đức viết

    15/06/2019 lúc 22:45

    Em muốn xóa những file js này thì làm sao ạ?

    Trả lời
    • Trung Hiếu viết

      16/06/2019 lúc 07:50

      Bạn xóa đi thì WooCommerce hoạt động kiểu gì?

      Trả lời
      • Đức viết

        16/06/2019 lúc 21:23

        Xóa file css không cần thiết, js hover, slider hình ảnh cho nhẹ ạ! @@

        Trả lời
        • Trung Hiếu viết

          16/06/2019 lúc 21:24

          Cái đó là do theme hoặc plugin khác chèn vào chứ WooCommerce mặc định không có đâu bạn nhé.

          Trả lời
          • Đức viết

            16/06/2019 lúc 21:46

            Đường dẫn là “wp-content/plugins/woocommerce/assets/js/zoom/jquery.zoom.min.js” anh ạ?

          • Trung Hiếu viết

            16/06/2019 lúc 21:48

            Bạn thử dùng plugin Asset CleanUp: Page Speed Booster xem sao.

Sidebar chính

NHẬN BÀI VIẾT QUA EMAIL

Hãy đăng ký ngay để là người đầu tiên nhận được thông báo qua email mỗi khi chúng tôi có bài viết mới!

Đừng quên truy cập vào email của bạn để xác nhận việc đăng ký nhé!

Theo dõi qua mạng xã hội

Dịch vụ WordPress Hosting

dich-vu-wordpress-hosting-gia-re-tot-nhat

Bạn đang tìm gì?

  • WordPress căn bản
  • Bảo mật WordPress
  • Tăng tốc WordPress
  • Sửa lỗi WordPress
  • Thủ thuật Genesis
  • Thủ thuật SEO

Dịch vụ tối ưu WordPress miễn phí

dich-vu-toi-uu-website-wordpress-chat-luong-cao

Bài viết mới nhất

  • Hướng dẫn sử dụng LiteSpeed Memcached 17/01/2021
  • Hướng dẫn nén ảnh bằng plugin LiteSpeed Cache 08/01/2021
  • Hướng dẫn nâng cấp PHP 8 cho website WordPress 15/12/2020
  • Sửa lỗi không hiện hình ảnh và mô tả khi share link lên Zalo 11/11/2020
  • Hiển thị mô tả cho category và tag trong WordPress 05/11/2020
  • Cải tiến công cụ tìm kiếm mặc định của WordPress 31/10/2020

Dịch vụ quét mã độc miễn phí

quet-ma-doc-mien-phi-cho-website

Footer

Bình luận mới nhất

  • Nhật trong Hướng dẫn nén ảnh bằng plugin LiteSpeed Cache
  • Nồi Phở Sài Gòn trong Khắc phục lỗi email vào spam khi gửi mail từ hosting cPanel
  • Nga Pham trong Bật mí về các công nghệ mà WP Căn bản đang sử dụng
  • Trung Hiếu trong Hướng dẫn nén ảnh bằng plugin LiteSpeed Cache

Bình luận nhiều nhất (tháng)

  1. Doligo (7)
  2. Tuyen (7)
  3. Tien Coin (4)
  4. lê hải (3)
  5. Nguyễn Văn Long (3)
  6. Thành (3)

Thông tin hữu ích

  • Quy định sử dụng
  • Chính sách bảo mật
  • Bản quyền nội dung

Thống kê WP Căn bản

10 Chuyên mục - 978 Bài viết - 37216 Bình luận

Bản quyền © 2014 - 2020 · WP Căn bản · Sử dụng Paradise child theme và dịch vụ WordPress Hosting