Thủ Thuật, Flatsome, Wordpress

[Thủ thuật wordpress chuyên nghiệp] Hướng dẫn thêm nút xóa tài khoản cực kỳ đẹp và chất lượng

[Thủ thuật wordpress chuyên nghiệp] Hướng dẫn thêm nút xóa tài khoản cực kỳ đẹp và chất lượng

Hôm nay chothemewp xin hướng dẫn các bạn cách thêm nút xóa tài khoản cực kỳ đẹp và chất lượng nhé. Cách làm cực kỳ đơn giản

Bước 1. Thêm code hiển thị nút vào funtion.php của wordpress

z5042380637511 41268b88de81414b676a25573b1694ad

Khi thêm code dưới vào theme wordpress của bạn, thì nút trên sẽ xuất hiện như trên hình nhá.

add_action('woocommerce_cart_actions', 'add_clear_cart_button');
function add_clear_cart_button() {
    echo '<style>
        .custom-clear-cart-button {
            display: inline-block;
            padding: 10px 20px;
            background-color: #ff0000; /* Màu nền của nút */
            color: #ffffff; /* Màu chữ của nút */
            text-decoration: none;
            border-radius: 5px;
            border: none;
            font-size: 16px;
            transition: background-color 0.3s ease-in-out;
        }
        .custom-clear-cart-button:hover {
            background-color: #cc0000; /* Màu nền khi di chuột vào */
        }
    </style>';

    echo '<a class="custom-clear-cart-button" href="javascript:void(0);" onclick="confirmClearCart()">' . __('Xóa tất cả đơn hàng', 'your-text-domain') . '</a>';
}

Chothemewp xin giải thích một xíu để các bạn hiểu rõ hơn nhé:

Đoạn code này thêm một nút vào trang giỏ hàng của WooCommerce để xóa toàn bộ các mặt hàng khỏi giỏ hàng.

  1. add_action('woocommerce_cart_actions', 'add_clear_cart_button');: Đây là một hành động WordPress được gọi khi trang giỏ hàng của WooCommerce được tạo ra. Nó gắn một hàm tên là add_clear_cart_button vào một vị trí cụ thể trên trang giỏ hàng (woocommerce_cart_actions).
  2. function add_clear_cart_button() { ... }: Đây là hàm sẽ được gọi khi trang giỏ hàng được tạo ra. Nó tạo ra một đoạn mã HTML và CSS để hiển thị nút xóa giỏ hàng.
echo '<style>
        .custom-clear-cart-button {
            display: inline-block;
            padding: 10px 20px;
            background-color: #ff0000; /* Màu nền của nút */
            color: #ffffff; /* Màu chữ của nút */
            text-decoration: none;
            border-radius: 5px;
            border: none;
            font-size: 16px;
            transition: background-color 0.3s ease-in-out;
        }
        .custom-clear-cart-button:hover {
            background-color: #cc0000; /* Màu nền khi di chuột vào */
        }
      </style>';

Phần này chứa CSS để tạo ra nút “Xóa tất cả đơn hàng” trong giỏ hàng. Định dạng của nút được đặt trong class .custom-clear-cart-button

echo '<a class="custom-clear-cart-button" href="javascript:void(0);" onclick="confirmClearCart()">' . __('Xóa tất cả đơn hàng', 'your-text-domain') . '</a>';
    • Phần này tạo ra một thẻ <a> (liên kết) với class custom-clear-cart-button để tạo nút. Khi nhấp vào nút này, nó sẽ gọi hàm confirmClearCart() thông qua sự kiện onclick.
  2. confirmClearCart(): Đây là một hàm JavaScript mà bạn cần định nghĩa trong trang của mình để xác nhận việc xóa giỏ hàng trước khi thực hiện thao tác này.

Để hoàn chỉnh, bạn cần thêm một hàm JavaScript với tên confirmClearCart() để xác nhận hành động xóa giỏ hàng.

Bước 2. Thêm Poup hiển thị thông báo xác nhận và xử lý xóa đơn hàng trong giỏ hàng thành công

Các bạn chỉ cần coppy đoạn code sau bỏ vào funtion.php là xong nhé

add_action('wp_footer', 'add_confirm_clear_cart_script');
function add_confirm_clear_cart_script() {
    if (is_cart()) {
        ?>
        <script>
            function confirmClearCart() {
                Swal.fire({
                    title: 'Xác nhận xóa',
                    text: 'Bạn có chắc chắn muốn xóa tất cả đơn hàng khỏi giỏ hàng?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Đồng ý',
                    cancelButtonText: 'Hủy'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Sử dụng Ajax để xóa đơn hàng
                        jQuery.ajax({
                            url: '<?php echo admin_url('admin-ajax.php'); ?>',
                            type: 'POST',
                            data: {
                                'action': 'clear_cart_ajax' // Hành động xóa giỏ hàng
                            },
                            success: function(response) {
                                // Hiển thị thông báo thành công
                                Swal.fire({
                                    title: 'Thông báo',
                                    text: 'Xóa toàn bộ đơn hàng thành công. Đơn hàng bạn thêm vào giỏ hàng đã được xóa toàn bộ',
                                    icon: 'success'
                                });
                            }
                        });
                    }
                });
            }
        </script>
        <?php
    }
}

Chothemewp giải thích xíu về bước 2 này nhé

Đoạn mã này là một hành động WordPress, sử dụng add_action, được gọi khi footer của trang WordPress (wp_footer) được tạo ra. Nó kiểm tra xem trang hiện tại có phải là trang giỏ hàng (is_cart()) không, và nếu đúng, nó sẽ chèn một đoạn mã JavaScript vào footer của trang.

  1. add_action('wp_footer', 'add_confirm_clear_cart_script');: Đây là một hành động WordPress, được gắn vào sự kiện wp_footer, nghĩa là nó sẽ được thực thi khi phần footer của trang được render.
  2. function add_confirm_clear_cart_script() { ... }: Đây là hàm được gọi khi footer được tạo ra. Nó kiểm tra xem trang hiện tại có phải là trang giỏ hàng không (is_cart()).
  3. <script> ... </script>: Nếu trang hiện tại là trang giỏ hàng, đoạn mã JavaScript sẽ được chèn vào footer.
    • function confirmClearCart() { ... }: Đây là một hàm JavaScript được gọi khi nút xóa giỏ hàng được nhấn. Nó sử dụng thư viện SweetAlert2 (Swal.fire) để hiển thị một cửa sổ cảnh báo xác nhận xóa giỏ hàng.
    • Nếu người dùng nhấn “Đồng ý” (confirmButton), nó sẽ thực hiện một yêu cầu AJAX (jQuery.ajax) đến admin-ajax.php của WordPress với hành động là clear_cart_ajax.
    • Khi yêu cầu AJAX hoàn thành thành công, nó sẽ hiển thị một thông báo thành công bằng SweetAlert2.

Lưu ý rằng, để xử lý yêu cầu AJAX với hành động clear_cart_ajax, bạn cần phải thêm một chức năng xử lý AJAX trong WordPress với hành động clear_cart_ajax. Đoạn code JavaScript chỉ xác nhận xóa giỏ hàng và gửi yêu cầu xóa thông qua AJAX, nhưng phần xử lý xóa thực sự sẽ cần được thêm vào từ phía server.

Bước 3. Xử lý xóa tất cả đơn hàng khi yêu cầu Ajax

add_action('wp_ajax_clear_cart_ajax', 'clear_cart_ajax');
add_action('wp_ajax_nopriv_clear_cart_ajax', 'clear_cart_ajax');
function clear_cart_ajax() {
    if (isset($_POST['action']) && $_POST['action'] === 'clear_cart_ajax') {
        global $woocommerce;
        $woocommerce->cart->empty_cart();
        wp_die(); // Kết thúc yêu cầu Ajax mà không cần trả về bất kỳ dữ liệu nào
    }
}

Bỏ code trên vào funtion.php là oke nhá. Lưu ý, code trên là code mình không cho load lại trang sau khi xóa xong. Các bạn có nhu cầu như thế nào thì điều chỉnh theo ý của các bạn là được nhé.

Cảm ơn các bạn đã đọc bài của mình.

Nếu thầy khó hiểu quá, thì không cần hiểu hihi. Chỉ cần ccoppy toàn bộ code dưới đây bỏ vào file funtion.php của bạn là được nhé

add_action('woocommerce_cart_actions', 'add_clear_cart_button');
function add_clear_cart_button() {
    echo '<style>
        .custom-clear-cart-button {
            display: inline-block;
            padding: 10px 20px;
            background-color: #ff0000; /* Màu nền của nút */
            color: #ffffff; /* Màu chữ của nút */
            text-decoration: none;
            border-radius: 5px;
            border: none;
            font-size: 16px;
            transition: background-color 0.3s ease-in-out;
        }
        .custom-clear-cart-button:hover {
            background-color: #cc0000; /* Màu nền khi di chuột vào */
        }
    </style>';

    echo '<a class="custom-clear-cart-button" href="javascript:void(0);" onclick="confirmClearCart()">' . __('Xóa tất cả đơn hàng', 'your-text-domain') . '</a>';
}


add_action('wp_footer', 'add_confirm_clear_cart_script');
function add_confirm_clear_cart_script() {
    if (is_cart()) {
        ?>
        <script>
            function confirmClearCart() {
                Swal.fire({
                    title: 'Xác nhận xóa',
                    text: 'Bạn có chắc chắn muốn xóa tất cả đơn hàng khỏi giỏ hàng?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Đồng ý',
                    cancelButtonText: 'Hủy'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Sử dụng Ajax để xóa đơn hàng
                        jQuery.ajax({
                            url: '<?php echo admin_url('admin-ajax.php'); ?>',
                            type: 'POST',
                            data: {
                                'action': 'clear_cart_ajax' // Hành động xóa giỏ hàng
                            },
                            success: function(response) {
                                // Hiển thị thông báo thành công
                                Swal.fire({
                                    title: 'Thông báo',
                                    text: 'Xóa toàn bộ đơn hàng thành công. Đơn hàng bạn thêm vào giỏ hàng đã được xóa toàn bộ',
                                    icon: 'success'
                                });
                            }
                        });
                    }
                });
            }
        </script>
        <?php
    }
}
// Xử lý xóa tất cả đơn hàng khi yêu cầu Ajax
add_action('wp_ajax_clear_cart_ajax', 'clear_cart_ajax');
add_action('wp_ajax_nopriv_clear_cart_ajax', 'clear_cart_ajax');
function clear_cart_ajax() {
    if (isset($_POST['action']) && $_POST['action'] === 'clear_cart_ajax') {
        global $woocommerce;
        $woocommerce->cart->empty_cart();
        wp_die(); // Kết thúc yêu cầu Ajax mà không cần trả về bất kỳ dữ liệu nào
    }
}

Khám Phá Kho Theme WordPress Đa Dạng và Hấp Dẫn với Giá Cực Hấp Dẫn Tại chothemewp.com

Những website kiếm tiền online giúp bạn có thu nhập $1000/tháng

Mẫu web bán khóa học đỉnh cao với chuẩn SEO 7 từ ChoThemeWP

Ưu đãi lớn: Tận hưởng 40% và 35% giảm giá khi sở hữu Theme WordPress tại Chothemewp!

CHƯƠNG TRÌNH ĐẠI GIẢM GIÁ TẠI CHOTHEMEWP

Chương trình áp dụng đến hết ngày 04/12/2024

Giảm giá!
snapedit 1704034073510

Share code theme wordpress bất động sản giá rẻ 08

Mua theme: Giá gốc là: 900.000₫.Giá hiện tại là: 20.000₫. 97.8%
Giảm giá!
snapedit 1704034073510

Share code theme wordpress bất động sản giá rẻ 07

Mua theme: Giá gốc là: 900.000₫.Giá hiện tại là: 20.000₫. 97.8%
Combo Offer Tiết kiệm thêm 20.000₫
Giảm giá!
snapedit 1704034073510

Share code theme wordpress bất động sản giá rẻ 06

Mua theme: Giá gốc là: 900.000₫.Giá hiện tại là: 20.000₫. 97.8%
Giảm giá!
snapedit 1704034073510

Share code theme wordpress bất động sản giá rẻ 05

Mua theme: Giá gốc là: 900.000₫.Giá hiện tại là: 20.000₫. 97.8%
Tải thêm sản phẩm

Để lại một bình luận

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 *


0766734539
Tổng Đài Miễn Phí Cước Gọi
Yêu cầu tư vấn