Hướng dẫn và chia sẻ code thêm nút xóa và tăng giảm số lượng sản phẩm trong trang thanh toán WooCommerce cho Flatsome

admin

11/01/2025

14 Phút đọc

10 Lượt xem

Đánh giá

Khi xây dựng website WooCommerce với theme Flatsome, một trong những yêu cầu phổ biến từ khách hàng là thêm các tính năng như nút xóa và tăng giảm số lượng sản phẩm trực tiếp trên trang thanh toán. Điều này không chỉ giúp người dùng dễ dàng tùy chỉnh giỏ hàng mà còn làm cho trải nghiệm mua sắm trở nên mượt mà hơn. Vậy làm sao để thêm những tính năng này một cách nhanh chóng và dễ dàng? Hãy cùng muathemewpgiare.com khám phá ngay bài viết này nhé!

Hướng dẫn và chia sẻ code thêm nút xóa và tăng giảm số lượng sản phẩm trong trang thanh toán WooCommerce cho Flatsome

Lợi Ích Của Việc Thêm Nút Xóa và Tăng Giảm Số Lượng Sản Phẩm

Để cải thiện trang thanh toán WooCommerce của bạn, việc tích hợp các nút chức năng như xóa sản phẩm và điều chỉnh số lượng sản phẩm trực tiếp sẽ giúp việc mua sắm của khách hàng trở nên tiện lợi hơn rất nhiều. Hãy thử tưởng tượng khi khách hàng có thể:

Xóa ngay sản phẩm không cần thiết mà không phải reload trang.
Thay đổi số lượng sản phẩm một cách nhanh chóng mà không cần rời khỏi trang thanh toán.
Giảm thiểu các bước thao tác, tiết kiệm thời gian cho khách hàng.

Với những lợi ích này, khách hàng của bạn sẽ có một trải nghiệm mua sắm dễ dàng và thuận tiện hơn.

Hướng dẫn và chia sẻ code thêm nút xóa và tăng giảm số lượng sản phẩm trong trang thanh toán WooCommerce cho Flatsome

Nếu bạn đang sử dụng theme Flatsome cho website WooCommerce của mình và muốn tăng cường trải nghiệm người dùng, đừng ngần ngại thêm nút xóa và tăng giảm số lượng sản phẩm ngay trên trang thanh toán. Hãy thử ngay hướng dẫn trên từ muathemewpgiare.com và xem sự thay đổi trong quá trình thanh toán của khách hàng.

Dưới đây là code hoàn chỉnh chỉ cần bỏ vào funtion.php là xong thôi nhé.

// Thêm các điều khiển sản phẩm vào trang thanh toán với class muathemewpgiare-tgsl
function muathemewpgiare_tgsl_product_controls_checkout($product_subtotal, $cart_item, $cart_item_key) {
    if (!is_checkout()) {
        return $product_subtotal;
    }

    $quantity = $cart_item['quantity'];
    $nonce = wp_create_nonce('woocommerce-cart');

    // HTML cho các điều khiển sản phẩm
    $controls_html = sprintf(
        '<div class="muathemewpgiare-tgsl-product-controls">
            <div class="muathemewpgiare-tgsl-total-price">%s</div>
            <div class="muathemewpgiare-tgsl-controls-wrapper">
                <div class="muathemewpgiare-tgsl-quantity-controls buttons_added">
                    <input type="button" value="-" class="muathemewpgiare-tgsl-minus button is-form" data-cart-key="%s">
                    <input type="number" class="muathemewpgiare-tgsl-quantity-input" value="%s" min="1" step="1" data-cart-key="%s">
                    <input type="button" value="+" class="muathemewpgiare-tgsl-plus button is-form" data-cart-key="%s">
                </div>
                <a href="%s" class="muathemewpgiare-tgsl-remove-product remove" aria-label="%s" data-product_id="%s">×</a>
            </div>
        </div>',
        $product_subtotal,
        esc_attr($cart_item_key),
        esc_html($quantity),
        esc_attr($cart_item_key),
        esc_attr($cart_item_key),
        esc_url(wc_get_cart_remove_url($cart_item_key)),
        esc_html__('Xóa sản phẩm này', 'flatsome'),
        esc_attr($cart_item['product_id'])
    );

    // CSS và JavaScript
    $style = '
        <style>
            .muathemewpgiare-tgsl-product-controls {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
            .muathemewpgiare-tgsl-total-price {
                margin-bottom: 5px;
            }
            .muathemewpgiare-tgsl-controls-wrapper {
                display: flex;
                gap: 10px;
                align-items: center;
            }
            .muathemewpgiare-tgsl-quantity-controls {
                display: inline-flex;
                align-items: center;
                border: 1px solid #ddd;
                border-radius: 3px;
                overflow-x: hidden;
            }
            .muathemewpgiare-tgsl-quantity-controls .button.is-form {
                border-radius: 0;
                background-color: #f9f9f9;
                border: none;
                height: 25px;
                width: 25px;
                padding: 0;
                margin: 0;
                font-size: 14px;
            }
            .muathemewpgiare-tgsl-quantity-controls .muathemewpgiare-tgsl-quantity-input {
                padding: 2px;
				width: 35px;
				text-align: center;
				border: none;
				background: #fff;
				height: 20px;
				line-height: 25px;
				display: inline-block;
                -moz-appearance: textfield;
                box-shadow: none;
            }
            input.muathemewpgiare-tgsl-minus.button.is-form {
                width: 20px;
            }
            input.muathemewpgiare-tgsl-plus.button.is-form {
                width: 20px;
            }
            .muathemewpgiare-tgsl-remove-product {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 25px;
                height: 25px;
                color: #ccc !important;
                font-size: 20px !important;
                font-weight: bold;
                text-decoration: none;
                border: 1px solid #ddd;
                border-radius: 3px;
                transition: all 0.2s;
            }
            .muathemewpgiare-tgsl-remove-product:hover {
                color: #334862 !important;
                background-color: #f9f9f9;
            }
            .checkout-loading-overlay-tgsl {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(255, 255, 255, 0.8);
                z-index: 9999;
                justify-content: center;
                align-items: center;
            }
            .checkout-loading-overlay-tgsl.active {
                display: flex;
            }
            .checkout-loading-spinner-tgsl {
                width: 50px;
                height: 50px;
                border: 4px solid #f3f3f3;
                border-top: 4px solid #334862;
                border-radius: 50%;
                animation: spin 1s linear infinite;
            }
            @keyframes spin {
                to { transform: rotate(360deg); }
            }
            @media (max-width: 849px) {
                .muathemewpgiare-tgsl-quantity-controls .button.is-form,
                .muathemewpgiare-tgsl-remove-product {
                    height: 30px;
                    width: 30px;
                }
            }
        </style>
    ';

    $script = '
        <script>
            jQuery(document).ready(function($) {
                var ajaxUrl = "' . admin_url('admin-ajax.php') . '";
                var nonce = "' . $nonce . '";
                var isUpdating = false;

                if (!$(".checkout-loading-overlay-tgsl").length) {
                    $("body").append(\'<div class="checkout-loading-overlay-tgsl"><div class="checkout-loading-spinner-tgsl"></div></div>\');
                }

                function showLoading() {
                    $(".checkout-loading-overlay-tgsl").addClass("active");
                }

                function hideLoading() {
                    $(".checkout-loading-overlay-tgsl").removeClass("active");
                }

                function updateQuantity(cartKey, newQuantity, element) {
                    if (isUpdating) return;

                    var controls = element.closest(".muathemewpgiare-tgsl-quantity-controls");
                    var quantityInput = controls.find(".muathemewpgiare-tgsl-quantity-input");

                    if (newQuantity < 1) {
                        newQuantity = 1;
                        quantityInput.val(1);
                        return;
                    }

                    isUpdating = true;
                    showLoading();
                    controls.addClass("loading");

                    $.ajax({
                        url: ajaxUrl,
                        type: "POST",
                        data: {
                            action: "muathemewpgiare_update_quantity",
                            cart_key: cartKey,
                            quantity: newQuantity,
                            security: nonce
                        },
                        success: function(response) {
                            if (response.success) {
                                quantityInput.val(newQuantity);
                                $("body").trigger("update_checkout");

                                var totalQuantity = 0;
                                $(".muathemewpgiare-tgsl-quantity-input").each(function() {
                                    totalQuantity += parseInt($(this).val());
                                });

                                $(".icon-shopping-cart").attr("data-icon-label", totalQuantity);
                            } else {
                                alert("Không thể cập nhật số lượng. Vui lòng thử lại.");
                                quantityInput.val(newQuantity - 1);
                            }
                        },
                        error: function() {
                            alert("Có lỗi xảy ra. Vui lòng thử lại.");
                            quantityInput.val(newQuantity - 1);
                        },
                        complete: function() {
                            controls.removeClass("loading");
                            hideLoading();
                            isUpdating = false;
                        }
                    });
                }

                $(document).on("input", ".muathemewpgiare-tgsl-quantity-input", function() {
                    var $this = $(this);
                    var cartKey = $this.data("cart-key");
                    var newQuantity = parseInt($this.val());

                    if (isNaN(newQuantity) || newQuantity < 1) return;

                    updateQuantity(cartKey, newQuantity, $this);
                });

                $(document).on("click", ".muathemewpgiare-tgsl-quantity-controls .muathemewpgiare-tgsl-minus", function() {
                    if (isUpdating) return;

                    var cartKey = $(this).data("cart-key");
                    var quantityInput = $(this).siblings(".muathemewpgiare-tgsl-quantity-input");
                    var currentQty = parseInt(quantityInput.val());

                    if (currentQty > 1) {
                        updateQuantity(cartKey, currentQty - 1, $(this));
                    }
                });

                $(document).on("click", ".muathemewpgiare-tgsl-quantity-controls .muathemewpgiare-tgsl-plus", function() {
                    if (isUpdating) return;

                    var cartKey = $(this).data("cart-key");
                    var quantityInput = $(this).siblings(".muathemewpgiare-tgsl-quantity-input");
                    var currentQty = parseInt(quantityInput.val());

                    updateQuantity(cartKey, currentQty + 1, $(this));
                });

                $(document).on("click", ".muathemewpgiare-tgsl-remove-product", function(e) {
                    e.preventDefault();
                    if (isUpdating) return;

                    var link = $(this).attr("href");
                    var $this = $(this);
                    var $productRow = $this.closest("tr");

                    isUpdating = true;
                    showLoading();

                    $.ajax({
                        url: link,
                        type: "GET",
                        success: function() {
                            $productRow.fadeOut(300, function() {
                                $(this).remove();
                                $("body").trigger("update_checkout");

                                var totalQuantity = 0;
                                $(".muathemewpgiare-tgsl-quantity-input").each(function() {
                                    totalQuantity += parseInt($(this).val());
                                });

                                $(".icon-shopping-cart").attr("data-icon-label", totalQuantity);
                            });
                            hideLoading();
                            isUpdating = false;
                        },
                        error: function() {
                            alert("Có lỗi xảy ra. Vui lòng thử lại.");
                            hideLoading();
                            isUpdating = false;
                        }
                    });
                });
            });
        </script>
    ';

    if (!wp_script_is('muathemewpgiare-tgsl-product-controls', 'enqueued')) {
        add_action('wp_footer', function() use ($style, $script) {
            echo $style . $script;
        });
        wp_register_script('muathemewpgiare-tgsl-product-controls', null);
    }

    return $controls_html;
}

// Xử lý Ajax cho cập nhật số lượng
function handle_muathemewpgiare_tgsl_quantity_update() {
    check_ajax_referer('woocommerce-cart', 'security');

    $cart_key = sanitize_text_field($_POST['cart_key']);
    $quantity = intval($_POST['quantity']);
    $success = false;

    if ($cart_key && $quantity > 0) {
        $success = WC()->cart->set_quantity($cart_key, $quantity);
        WC()->cart->calculate_totals();
    }

    wp_send_json(array('success' => $success));
}

// Đăng ký Ajax actions
add_action('wp_ajax_muathemewpgiare_update_quantity', 'handle_muathemewpgiare_tgsl_quantity_update');
add_action('wp_ajax_nopriv_muathemewpgiare_update_quantity', 'handle_muathemewpgiare_tgsl_quantity_update');
add_filter('woocommerce_cart_item_subtotal', 'muathemewpgiare_tgsl_product_controls_checkout', 10, 3);

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

// Thêm các điều khiển sản phẩm vào trang thanh toán với class muathemewpgiare-tgsl

function muathemewpgiare_tgsl_product_controls_checkout($product_subtotal, $cart_item, $cart_item_key) {

if (!is_checkout()) {

return $product_subtotal;

}

$quantity = $cart_item['quantity'];

$nonce = wp_create_nonce('woocommerce-cart');

// HTML cho các điều khiển sản phẩm

$controls_html = sprintf(

'<div class="muathemewpgiare-tgsl-product-controls">

</div>

</div>

</div>',

$product_subtotal,

esc_attr($cart_item_key),

esc_html($quantity),

esc_attr($cart_item_key),

esc_url(wc_get_cart_remove_url($cart_item_key)),

esc_html__('Xóa sản phẩm này', 'flatsome'),

esc_attr($cart_item['product_id'])

);

// CSS và JavaScript

$style = '

<style>

.muathemewpgiare-tgsl-product-controls {

display: flex;

flex-direction: column;

gap: 10px;

}

.muathemewpgiare-tgsl-total-price {

margin-bottom: 5px;

}

.muathemewpgiare-tgsl-controls-wrapper {

display: flex;

gap: 10px;

align-items: center;

}

.muathemewpgiare-tgsl-quantity-controls {

display: inline-flex;

align-items: center;

border: 1px solid #ddd;

border-radius: 3px;

overflow-x: hidden;

}

.muathemewpgiare-tgsl-quantity-controls .button.is-form {

border-radius: 0;

background-color: #f9f9f9;

border: none;

height: 25px;

width: 25px;

padding: 0;

margin: 0;

font-size: 14px;

}

.muathemewpgiare-tgsl-quantity-controls .muathemewpgiare-tgsl-quantity-input {

padding: 2px;

width: 35px;

text-align: center;

border: none;

background: #fff;

height: 20px;

line-height: 25px;

display: inline-block;

-moz-appearance: textfield;

box-shadow: none;

}

input.muathemewpgiare-tgsl-minus.button.is-form {

width: 20px;

}

input.muathemewpgiare-tgsl-plus.button.is-form {

width: 20px;

}

.muathemewpgiare-tgsl-remove-product {

display: flex;

align-items: center;

justify-content: center;

width: 25px;

height: 25px;

color: #ccc !important;

font-size: 20px !important;

font-weight: bold;

text-decoration: none;

border: 1px solid #ddd;

border-radius: 3px;

transition: all 0.2s;

}

.muathemewpgiare-tgsl-remove-product:hover {

color: #334862 !important;

background-color: #f9f9f9;

}

.checkout-loading-overlay-tgsl {

display: none;

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: rgba(255, 255, 255, 0.8);

z-index: 9999;

justify-content: center;

align-items: center;

}

.checkout-loading-overlay-tgsl.active {

display: flex;

}

.checkout-loading-spinner-tgsl {

width: 50px;

height: 50px;

border: 4px solid #f3f3f3;

border-top: 4px solid #334862;

border-radius: 50%;

animation: spin 1s linear infinite;

}

@keyframes spin {

to { transform: rotate(360deg); }

}

@media (max-width: 849px) {

.muathemewpgiare-tgsl-quantity-controls .button.is-form,

.muathemewpgiare-tgsl-remove-product {

height: 30px;

width: 30px;

}

</style>

$script = '

jQuery(document).ready(function($) {

var ajaxUrl = "' . admin_url('admin-ajax.php') . '";

var nonce = "' . $nonce . '";

var isUpdating = false;

if (!$(".checkout-loading-overlay-tgsl").length) {

$("body").append(\'<div class="checkout-loading-overlay-tgsl"><div class="checkout-loading-spinner-tgsl"></div></div>\');

}

function showLoading() {

$(".checkout-loading-overlay-tgsl").addClass("active");

}

function hideLoading() {

$(".checkout-loading-overlay-tgsl").removeClass("active");

}

function updateQuantity(cartKey, newQuantity, element) {

if (isUpdating) return;

var controls = element.closest(".muathemewpgiare-tgsl-quantity-controls");

var quantityInput = controls.find(".muathemewpgiare-tgsl-quantity-input");

if (newQuantity < 1) {

newQuantity = 1;

quantityInput.val(1);

return;

}

isUpdating = true;

showLoading();

controls.addClass("loading");

$.ajax({

url: ajaxUrl,

type: "POST",

data: {

action: "muathemewpgiare_update_quantity",

cart_key: cartKey,

quantity: newQuantity,

security: nonce

success: function(response) {

if (response.success) {

quantityInput.val(newQuantity);

$("body").trigger("update_checkout");

var totalQuantity = 0;

$(".muathemewpgiare-tgsl-quantity-input").each(function() {

totalQuantity += parseInt($(this).val());

});

$(".icon-shopping-cart").attr("data-icon-label", totalQuantity);

} else {

alert("Không thể cập nhật số lượng. Vui lòng thử lại.");

quantityInput.val(newQuantity - 1);

}

error: function() {

alert("Có lỗi xảy ra. Vui lòng thử lại.");

quantityInput.val(newQuantity - 1);

complete: function() {

controls.removeClass("loading");

hideLoading();

isUpdating = false;

}

});

}

$(document).on("input", ".muathemewpgiare-tgsl-quantity-input", function() {

var $this = $(this);

var cartKey = $this.data("cart-key");

var newQuantity = parseInt($this.val());

if (isNaN(newQuantity) || newQuantity < 1) return;

updateQuantity(cartKey, newQuantity, $this);

});

$(document).on("click", ".muathemewpgiare-tgsl-quantity-controls .muathemewpgiare-tgsl-minus", function() {

if (isUpdating) return;

var cartKey = $(this).data("cart-key");

var quantityInput = $(this).siblings(".muathemewpgiare-tgsl-quantity-input");

var currentQty = parseInt(quantityInput.val());

if (currentQty > 1) {

updateQuantity(cartKey, currentQty - 1, $(this));

}

});

$(document).on("click", ".muathemewpgiare-tgsl-quantity-controls .muathemewpgiare-tgsl-plus", function() {

if (isUpdating) return;

var cartKey = $(this).data("cart-key");

var quantityInput = $(this).siblings(".muathemewpgiare-tgsl-quantity-input");

var currentQty = parseInt(quantityInput.val());

updateQuantity(cartKey, currentQty + 1, $(this));

});

$(document).on("click", ".muathemewpgiare-tgsl-remove-product", function(e) {

e.preventDefault();

if (isUpdating) return;

var link = $(this).attr("href");

var $this = $(this);

var $productRow = $this.closest("tr");

isUpdating = true;

showLoading();

$.ajax({

url: link,

type: "GET",

success: function() {

$productRow.fadeOut(300, function() {

$(this).remove();

$("body").trigger("update_checkout");

var totalQuantity = 0;

$(".muathemewpgiare-tgsl-quantity-input").each(function() {

totalQuantity += parseInt($(this).val());

});

$(".icon-shopping-cart").attr("data-icon-label", totalQuantity);

});

hideLoading();

isUpdating = false;

error: function() {

alert("Có lỗi xảy ra. Vui lòng thử lại.");

hideLoading();

isUpdating = false;

}

});

</script>

if (!wp_script_is('muathemewpgiare-tgsl-product-controls', 'enqueued')) {

add_action('wp_footer', function() use ($style, $script) {

echo $style . $script;

});

wp_register_script('muathemewpgiare-tgsl-product-controls', null);

}

return $controls_html;

}

// Xử lý Ajax cho cập nhật số lượng

function handle_muathemewpgiare_tgsl_quantity_update() {

check_ajax_referer('woocommerce-cart', 'security');

$cart_key = sanitize_text_field($_POST['cart_key']);

$quantity = intval($_POST['quantity']);

$success = false;

if ($cart_key && $quantity > 0) {

$success = WC()->cart->set_quantity($cart_key, $quantity);

WC()->cart->calculate_totals();

}

wp_send_json(array('success' => $success));

}

// Đăng ký Ajax actions

add_action('wp_ajax_muathemewpgiare_update_quantity', 'handle_muathemewpgiare_tgsl_quantity_update');

add_action('wp_ajax_nopriv_muathemewpgiare_update_quantity', 'handle_muathemewpgiare_tgsl_quantity_update');

add_filter('woocommerce_cart_item_subtotal', 'muathemewpgiare_tgsl_product_controls_checkout', 10, 3);

Cải tiến một xíu css cho phù hợp hơn, lưu ý các bạn có thể tự điều chỉnh lại cho phù hợp với cấu trúc website của các bạn nhé.

Cải tiến Css Vesion 1

Để đạt được một giao diện đẹp hơn, chuyên nghiệp hơn và “xịn” hơn, chúng ta có thể nâng cao thiết kế và cải thiện các yếu tố UX/UI. Dưới đây là một số gợi ý để tối ưu hóa giao diện và làm cho nó trở nên thanh lịch, hiện đại và phù hợp với yêu cầu của bạn:

Các cải tiến quan trọng:

Sử dụng Bảng màu hiện đại: Chúng ta có thể chọn màu sắc nhẹ nhàng, tinh tế và phù hợp với thương hiệu, kết hợp với hiệu ứng hover và focus.
Chọn font chữ chuyên nghiệp: Sử dụng các font chữ hiện đại và dễ đọc để tăng tính chuyên nghiệp.
Hiệu ứng chuyển động mượt mà hơn: Các hiệu ứng chuyển động (animation) cần được áp dụng một cách tinh tế, giúp người dùng cảm thấy thích thú mà không bị làm phiền.
Khoảng cách hợp lý và canh chỉnh: Tạo ra các không gian trắng (white space) hợp lý để các phần tử không bị chen chúc, giúp giao diện dễ nhìn và dễ sử dụng hơn.

Dưới đây là một phiên bản CSS cải tiến với phong cách hiện đại hơn:

/* Container chính */
.muathemewpgiare-tgsl-product-controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.muathemewpgiare-tgsl-product-controls:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Phần giá của sản phẩm */
.muathemewpgiare-tgsl-total-price {
    font-size: 20px;
    color: #1f2937;
    font-weight: 600;
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

.muathemewpgiare-tgsl-total-price:hover {
    color: #334862;
}

/* Wrapper điều khiển */
.muathemewpgiare-tgsl-controls-wrapper {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
}

/* Điều khiển số lượng (buttons) */
.muathemewpgiare-tgsl-quantity-controls {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f7f7f7;
    transition: all 0.3s ease;
}

.muathemewpgiare-tgsl-quantity-controls:hover {
    border-color: #334862;
}

/* Các nút (minus, plus) */
.muathemewpgiare-tgsl-quantity-controls .button.is-form {
    background-color: #f2f2f2;
    border: none;
    height: 40px;
    width: 40px;
    font-size: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.muathemewpgiare-tgsl-quantity-controls .button.is-form:hover {
    background-color: #e0e0e0;
    transform: scale(1.1);
}

/* Input nhập số lượng */
.muathemewpgiare-tgsl-quantity-controls .muathemewpgiare-tgsl-quantity-input {
    width: 60px;
    text-align: center;
    height: 40px;
    font-size: 18px;
    padding: 0 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.muathemewpgiare-tgsl-quantity-controls .muathemewpgiare-tgsl-quantity-input:focus {
    border-color: #334862;
    box-shadow: 0 0 12px rgba(52, 86, 98, 0.3);
}

/* Nút xóa sản phẩm */
.muathemewpgiare-tgsl-remove-product {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    color: #fff;
    background-color: #e74c3c;
    font-size: 22px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.muathemewpgiare-tgsl-remove-product:hover {
    background-color: #c0392b;
    transform: scale(1.1);
}

/* Overlay loading khi xử lý */
.checkout-loading-overlay-tgsl {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
}

.checkout-loading-overlay-tgsl.active {
    display: flex;
    opacity: 1;
}

/* Spinner loading */
.checkout-loading-spinner-tgsl {
    width: 60px;
    height: 60px;
    border: 6px solid #f3f3f3;
    border-top: 6px solid #2980b9;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Animation cho spinner */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive cho các thiết bị di động */
@media (max-width: 849px) {
    .muathemewpgiare-tgsl-quantity-controls .button.is-form,
    .muathemewpgiare-tgsl-remove-product {
        height: 32px;
        width: 32px;
        font-size: 18px;
    }

    .muathemewpgiare-tgsl-quantity-controls .muathemewpgiare-tgiare-tgsl-quantity-input {
        width: 50px;
        font-size: 16px;
    }

    .muathemewpgiare-tgsl-product-controls {
        gap: 15px;
        padding: 15px;
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

/* Container chính */

.muathemewpgiare-tgsl-product-controls {

display: flex;

flex-direction: column;

gap: 20px;

background-color: #fff;

border: 1px solid #e3e3e3;

border-radius: 12px;

padding: 20px;

box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

transition: all 0.3s ease;

}

.muathemewpgiare-tgsl-product-controls:hover {

box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);

}

/* Phần giá của sản phẩm */

.muathemewpgiare-tgsl-total-price {

font-size: 20px;

color: #1f2937;

font-weight: 600;

margin-bottom: 12px;

transition: color 0.3s ease;

}

.muathemewpgiare-tgsl-total-price:hover {

color: #334862;

}

/* Wrapper điều khiển */

.muathemewpgiare-tgsl-controls-wrapper {

display: flex;

gap: 20px;

align-items: center;

justify-content: space-between;

}

/* Điều khiển số lượng (buttons) */

.muathemewpgiare-tgsl-quantity-controls {

display: inline-flex;

align-items: center;

border: 1px solid #ddd;

border-radius: 8px;

overflow: hidden;

background-color: #f7f7f7;

transition: all 0.3s ease;

}

.muathemewpgiare-tgsl-quantity-controls:hover {

border-color: #334862;

}

/* Các nút (minus, plus) */

.muathemewpgiare-tgsl-quantity-controls .button.is-form {

background-color: #f2f2f2;

border: none;

height: 40px;

width: 40px;

font-size: 22px;

display: flex;

justify-content: center;

align-items: center;

cursor: pointer;

transition: background-color 0.3s ease, transform 0.2s ease;

}

.muathemewpgiare-tgsl-quantity-controls .button.is-form:hover {

background-color: #e0e0e0;

transform: scale(1.1);

}

/* Input nhập số lượng */

.muathemewpgiare-tgsl-quantity-controls .muathemewpgiare-tgsl-quantity-input {

width: 60px;

text-align: center;

height: 40px;

font-size: 18px;

padding: 0 12px;

border: 1px solid #ddd;

border-radius: 8px;

background-color: #fff;

box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);

transition: border-color 0.3s ease, box-shadow 0.3s ease;

}

.muathemewpgiare-tgsl-quantity-controls .muathemewpgiare-tgsl-quantity-input:focus {

border-color: #334862;

box-shadow: 0 0 12px rgba(52, 86, 98, 0.3);

}

/* Nút xóa sản phẩm */

.muathemewpgiare-tgsl-remove-product {

display: flex;

align-items: center;

justify-content: center;

width: 35px;

height: 35px;

color: #fff;

background-color: #e74c3c;

font-size: 22px;

font-weight: 600;

text-decoration: none;

border-radius: 50%;

cursor: pointer;

transition: all 0.3s ease;

}

.muathemewpgiare-tgsl-remove-product:hover {

background-color: #c0392b;

transform: scale(1.1);

}

/* Overlay loading khi xử lý */

.checkout-loading-overlay-tgsl {

display: none;

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: rgba(255, 255, 255, 0.8);

z-index: 9999;

justify-content: center;

align-items: center;

transition: opacity 0.3s ease;

}

.checkout-loading-overlay-tgsl.active {

display: flex;

opacity: 1;

}

/* Spinner loading */

.checkout-loading-spinner-tgsl {

width: 60px;

height: 60px;

border: 6px solid #f3f3f3;

border-top: 6px solid #2980b9;

border-radius: 50%;

animation: spin 1s linear infinite;

}

/* Animation cho spinner */

@keyframes spin {

to {

transform: rotate(360deg);

}

/* Responsive cho các thiết bị di động */

@media (max-width: 849px) {

.muathemewpgiare-tgsl-quantity-controls .button.is-form,

.muathemewpgiare-tgsl-remove-product {

height: 32px;

width: 32px;

font-size: 18px;

}

.muathemewpgiare-tgsl-quantity-controls .muathemewpgiare-tgiare-tgsl-quantity-input {

width: 50px;

font-size: 16px;

}

.muathemewpgiare-tgsl-product-controls {

gap: 15px;

padding: 15px;

}

Những điểm nâng cao:

Tạo sự tương phản mạnh mẽ: Sử dụng các màu sắc nổi bật như màu đỏ cho nút xóa và màu xanh lam cho spinner, tạo cảm giác nổi bật nhưng vẫn tinh tế.
Hiệu ứng nút mượt mà: Các nút có hiệu ứng hover và chuyển động (scale) giúp giao diện trở nên sống động hơn, tạo cảm giác thân thiện và chuyên nghiệp.
Chuyển động (Animation): Chúng ta đã thêm hiệu ứng chuyển động khi người dùng di chuột qua các nút, khiến chúng trở nên dễ tiếp cận và dễ sử dụng hơn.
Nút và input được làm tròn và bóng mượt: Điều này tạo ra cảm giác hiện đại và dễ nhìn hơn.
Phong cách tối giản nhưng tinh tế: Bố cục thoáng đãng, màu sắc nhẹ nhàng nhưng vẫn tạo được sự chú ý, không làm người dùng bị mất tập trung.

Kết quả:

Giao diện mượt mà: Các nút điều khiển có hiệu ứng hover, input có bóng mờ, và các phần tử có chuyển động nhẹ giúp giao diện trở nên sống động.
Chuyên nghiệp hơn: Sử dụng màu sắc phù hợp và các hiệu ứng tinh tế giúp giao diện trở nên hiện đại và dễ sử dụng.
Phù hợp trên mọi thiết bị: Đảm bảo giao diện đẹp trên cả desktop và mobile nhờ tính năng responsive.

Với các thay đổi này, giao diện của bạn sẽ trở nên hiện đại, mượt mà và dễ dàng thu hút người dùng.

Cải tiến Css Vesion 2

Để cải thiện thiết kế và trải nghiệm người dùng trong giao diện thay đổi số lượng và xóa sản phẩm trong giỏ hàng, chúng ta có thể tối ưu hóa CSS và hiệu ứng. Dưới đây là các đề xuất thay đổi CSS để làm cho các điều khiển trông đẹp hơn và có hiệu ứng tải trang mượt mà hơn.

Các thay đổi:

Tăng cường thẩm mỹ cho các nút điều khiển: Sử dụng màu sắc và bóng đổ nhẹ cho các nút.
Cải tiến hiệu ứng loading: Đảm bảo rằng khi thay đổi số lượng hoặc xóa sản phẩm, người dùng sẽ thấy một hiệu ứng loading mượt mà.
Cải thiện bố cục và kích thước: Thêm các khoảng cách hợp lý và cải thiện tính tương thích với các thiết bị di động.

Dưới đây là mã CSS đã được cải tiến:

/* Phần tử bao quanh toàn bộ điều khiển sản phẩm */
.muathemewpgiare-tgsl-product-controls {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
    transition: box-shadow 0.3s ease;
}

.muathemewpgiare-tgsl-product-controls:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* Phần giá sản phẩm */
.muathemewpgiare-tgsl-total-price {
    font-size: 24px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 12px;
    text-transform: uppercase;
}

/* Đổi màu khi hover */
.muathemewpgiare-tgsl-total-price:hover {
    color: #2980b9;
}

/* Wrapper của các nút điều khiển */
.muathemewpgiare-tgsl-controls-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

/* Điều khiển số lượng */
.muathemewpgiare-tgsl-quantity-controls {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* Hiệu ứng hover cho quantity controls */
.muathemewpgiare-tgsl-quantity-controls:hover {
    border-color: #2980b9;
}

/* Nút giảm và tăng */
.muathemewpgiare-tgsl-quantity-controls .button.is-form {
    width: 40px;
    height: 40px;
    background-color: #ecf0f1;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #7f8c8d;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Nút tăng giảm hover */
.muathemewpgiare-tgsl-quantity-controls .button.is-form:hover {
    background-color: #bdc3c7;
    transform: scale(1.1);
}

/* Input số lượng */
.muathemewpgiare-tgsl-quantity-controls .muathemewpgiare-tgsl-quantity-input {
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 18px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    color: #34495e;
    padding: 0 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.muathemewpgiare-tgsl-quantity-controls .muathemewpgiare-tgsl-quantity-input:focus {
    border-color: #2980b9;
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.3);
}

/* Nút xóa sản phẩm */
.muathemewpgiare-tgsl-remove-product {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    background-color: #e74c3c;
    color: white;
    font-size: 20px;
    font-weight: bold;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.muathemewpgiare-tgsl-remove-product:hover {
    background-color: #c0392b;
    transform: scale(1.1);
}

/* Overlay loading */
.checkout-loading-overlay-tgsl {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.checkout-loading-overlay-tgsl.active {
    display: flex;
    opacity: 1;
}

/* Spinner */
.checkout-loading-spinner-tgsl {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Animation spinner */
@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

/* Responsive (mobile view) */
@media (max-width: 849px) {
    .muathemewpgiare-tgsl-product-controls {
        padding: 15px;
    }

    .muathemewpgiare-tgsl-total-price {
        font-size: 20px;
    }

    .muathemewpgiare-tgsl-quantity-controls .button.is-form {
        width: 35px;
        height: 35px;
        font-size: 18px;
    }

    .muathemewpgiare-tgsl-quantity-controls .muathemewpgiare-tgsl-quantity-input {
        width: 45px;
        font-size: 16px;
    }

    .muathemewpgiare-tgsl-remove-product {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

/* Phần tử bao quanh toàn bộ điều khiển sản phẩm */

.muathemewpgiare-tgsl-product-controls {

background-color: #f9f9f9;

padding: 20px;

border-radius: 10px;

box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);

margin-bottom: 20px;

transition: box-shadow 0.3s ease;

}

.muathemewpgiare-tgsl-product-controls:hover {

box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);

}

/* Phần giá sản phẩm */

.muathemewpgiare-tgsl-total-price {

font-size: 24px;

font-weight: 600;

color: #2c3e50;

margin-bottom: 12px;

text-transform: uppercase;

}

/* Đổi màu khi hover */

.muathemewpgiare-tgsl-total-price:hover {

color: #2980b9;

}

/* Wrapper của các nút điều khiển */

.muathemewpgiare-tgsl-controls-wrapper {

display: flex;

justify-content: space-between;

align-items: center;

gap: 15px;

}

/* Điều khiển số lượng */

.muathemewpgiare-tgsl-quantity-controls {

display: flex;

align-items: center;

border: 1px solid #ddd;

border-radius: 8px;

background-color: #ffffff;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

transition: all 0.3s ease;

}

/* Hiệu ứng hover cho quantity controls */

.muathemewpgiare-tgsl-quantity-controls:hover {

border-color: #2980b9;

}

/* Nút giảm và tăng */

.muathemewpgiare-tgsl-quantity-controls .button.is-form {

width: 40px;

height: 40px;

background-color: #ecf0f1;

border: none;

display: flex;

justify-content: center;

align-items: center;

font-size: 20px;

color: #7f8c8d;

cursor: pointer;

transition: background-color 0.3s ease, transform 0.3s ease;

}

/* Nút tăng giảm hover */

.muathemewpgiare-tgsl-quantity-controls .button.is-form:hover {

background-color: #bdc3c7;

transform: scale(1.1);

}

/* Input số lượng */

.muathemewpgiare-tgsl-quantity-controls .muathemewpgiare-tgsl-quantity-input {

width: 50px;

height: 40px;

text-align: center;

font-size: 18px;

border: 1px solid #ddd;

border-radius: 8px;

background-color: #fff;

color: #34495e;

padding: 0 8px;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

transition: border-color 0.3s ease, box-shadow 0.3s ease;

}

.muathemewpgiare-tgsl-quantity-controls .muathemewpgiare-tgsl-quantity-input:focus {

border-color: #2980b9;

box-shadow: 0 0 10px rgba(52, 152, 219, 0.3);

}

/* Nút xóa sản phẩm */

.muathemewpgiare-tgsl-remove-product {

display: flex;

justify-content: center;

align-items: center;

width: 36px;

height: 36px;

background-color: #e74c3c;

color: white;

font-size: 20px;

font-weight: bold;

border-radius: 50%;

cursor: pointer;

transition: background-color 0.3s ease, transform 0.3s ease;

}

.muathemewpgiare-tgsl-remove-product:hover {

background-color: #c0392b;

transform: scale(1.1);

}

/* Overlay loading */

.checkout-loading-overlay-tgsl {

display: none;

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

background-color: rgba(255, 255, 255, 0.9);

z-index: 9999;

justify-content: center;

align-items: center;

opacity: 0;

transition: opacity 0.3s ease;

}

.checkout-loading-overlay-tgsl.active {

display: flex;

opacity: 1;

}

/* Spinner */

.checkout-loading-spinner-tgsl {

width: 50px;

height: 50px;

border: 5px solid #f3f3f3;

border-top: 5px solid #3498db;

border-radius: 50%;

animation: spin 1s linear infinite;

}

/* Animation spinner */

@keyframes spin {

100% {

transform: rotate(360deg);

}

/* Responsive (mobile view) */

@media (max-width: 849px) {

.muathemewpgiare-tgsl-product-controls {

padding: 15px;

}

.muathemewpgiare-tgsl-total-price {

font-size: 20px;

}

.muathemewpgiare-tgsl-quantity-controls .button.is-form {

width: 35px;

height: 35px;

font-size: 18px;

}

.muathemewpgiare-tgsl-quantity-controls .muathemewpgiare-tgsl-quantity-input {

width: 45px;

font-size: 16px;

}

.muathemewpgiare-tgsl-remove-product {

width: 32px;

height: 32px;

font-size: 18px;

}

Những điểm cải tiến trong phiên bản này:

Phong cách tối giản, hiện đại: Sử dụng nền sáng và đường viền mảnh, các phần tử được làm tròn để mang lại cảm giác nhẹ nhàng và tinh tế.
Hiệu ứng nút và input: Các nút và ô input được làm to và có hiệu ứng hover (phóng to, đổi màu) để tạo sự sinh động, giúp người dùng dễ dàng nhận diện và tương tác.
Hiệu ứng động nhẹ nhàng: Các nút có hiệu ứng thay đổi màu sắc và chuyển động nhỏ khi hover, giúp người dùng cảm thấy tương tác mượt mà hơn.
Màu sắc nhã nhặn, dễ nhìn: Sử dụng bảng màu nhẹ nhàng với các màu sắc dễ nhìn, không quá chói nhưng vẫn đủ nổi bật khi cần thiết.
Thiết kế responsive: Đảm bảo giao diện hiển thị tốt trên cả thiết bị di động và desktop, với các kích thước điều khiển được tự động điều chỉnh khi màn hình nhỏ hơn.
Overlay loading mượt mà: Hiệu ứng overlay khi xử lý công việc giúp người dùng thấy rõ tiến trình, đồng thời giữ cho trang web không bị gián đoạn.

Tóm tắt:

Với thiết kế này, bạn có một giao diện rất hiện đại, thanh lịch, và dễ sử dụng. Các phần tử được bố trí khoa học với khoảng cách hợp lý, mang lại một cảm giác dễ chịu khi sử dụng. Các hiệu ứng chuyển động nhẹ nhàng khiến trang web trở nên thú vị nhưng không gây khó chịu.

Bạn có thể tự cài đặt hoặc chia sẻ bài viết này với bạn bè. Nếu có bất kỳ câu hỏi nào, đừng ngần ngại liên hệ với chúng tôi!

Xem thêm: