Chia sẻ code CSS làm đẹp nút xóa sản phẩm WooCommerce

Trong quá trình sử dụng WooCommerce, nút xóa sản phẩm trong giỏ hàng tuy chỉ là một chi tiết nhỏ nhưng lại ảnh hưởng khá nhiều đến trải nghiệm người dùng và tính thẩm mỹ của website. Mặc định, nút xóa của WooCommerce khá đơn giản, thậm chí hơi thô và chưa thật sự hài hòa với nhiều giao diện theme hiện nay.

Vì vậy, trong bài viết này, mình sẽ chia sẻ code CSS giúp làm đẹp nút xóa sản phẩm WooCommerce theo phong cách gọn gàng, hiện đại và dễ nhìn hơn — không cần cài plugin, chỉ cần vài dòng CSS là có thể áp dụng ngay cho mọi website bán hàng.

Hướng dẫn làm đẹp nút xóa sản phẩm WooCommerce

Nút xóa sản phẩm trong WooCommerce tuy nhỏ nhưng lại ảnh hưởng trực tiếp đến trải nghiệm người dùng và độ chuyên nghiệp của giao diện giỏ hàng. Mặc định, nút xóa khá đơn giản, chưa đồng bộ với nhiều theme và dễ gây rối mắt. Bạn xem đoạn code ở dưới nha.

Copy và dán đoạn code này vào chỗ nào chứa CSS là được nha. Muốn chắc chắn nên vào trực tiếp File Style.css

.woocommerce a.remove,
.woocommerce-mini-cart a.remove {
    width: 36px;
    height: 37px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 6px;
    font-size: 0;
    cursor: pointer;
    color: #193d37 !important;
    transition: background .25s ease, transform .2s ease;
}

/* Tắt icon X mặc định */
.woocommerce a.remove::after {
    content: "";
}

/* ===== THÂN THÙNG (SVG) ===== */
.woocommerce a.remove::before,
.woocommerce-mini-cart a.remove::before {
    content: "";
    width: 18px;
    height: 18px;
    background-color: currentColor;
    position: absolute;
    bottom: 8px;

    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.8 6H21.2L20.4 22.8C20.3 23.1 19.5 24 18.7 24H5.3C4.5 24 3.7 23.1 3.6 22.8L2.8 6ZM11 9.6V20.4H13V9.6H11ZM7.6 9.6V20.4H9.6V9.6H7.6ZM14.4 9.6V20.4H16.4V9.6H14.4Z'/%3E%3C/svg%3E")
        no-repeat center / contain;

            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.8 6H21.2L20.4 22.8C20.3 23.1 19.5 24 18.7 24H5.3C4.5 24 3.7 23.1 3.6 22.8L2.8 6ZM11 9.6V20.4H13V9.6H11ZM7.6 9.6V20.4H9.6V9.6H7.6ZM14.4 9.6V20.4H16.4V9.6H14.4Z'/%3E%3C/svg%3E")
        no-repeat center / contain;
}

/* ===== NẮP THÙNG ===== */
.woocommerce a.remove::after,
.woocommerce-mini-cart a.remove::after {
    content: "";
    width: 20px;
    height: 4px;
    background: currentColor;
    position: absolute;
    top: 7px;
    border-radius: 2px;
    transform-origin: left center;
    transition: transform .3s ease, top .3s ease;
}

/* Hover – mở nắp */
.woocommerce a.remove:hover,
.woocommerce-mini-cart a.remove:hover {
    background: #ffeaea;
}

.woocommerce a.remove:hover::after,
.woocommerce-mini-cart a.remove:hover::after {
    transform: rotate(-45deg);
    top: 4px;
}

/* Click */
.woocommerce a.remove:active {
    transform: scale(.92);
}

Kết luận

Việc làm đẹp nút xóa sản phẩm WooCommerce là một tinh chỉnh nhỏ nhưng mang lại hiệu quả lớn về thẩm mỹ và trải nghiệm người dùng. Chỉ với vài dòng CSS, bạn đã có thể biến nút xóa mặc định trở nên gọn gàng, trực quan và phù hợp hơn với giao diện website, mà không cần cài thêm plugin.

Hy vọng những hướng dẫn trong bài viết sẽ giúp bạn tối ưu giỏ hàng WooCommerce chuyên nghiệp hơn và nâng cao cảm giác sử dụng cho khách hàng.