Hiển thị nút 'Thêm vào giỏ hàng' khi di chuột qua hình ảnh trong WooCommerce trên Astra

Thủ thuật WordPress
1

Bạn có muốn hiển thị nhanh nút “Thêm vào giỏ hàng” khi di chuột qua hình ảnh sản phẩm WooCommerce trong khi sử dụng chủ đề Astra không? Thay đổi nhỏ này có thể làm cho cửa hàng WooCommerce của bạn thân thiện hơn với người dùng bằng cách cho phép dễ dàng thực hiện hành động “thêm vào thẻ”.

Xem trước: Nút Thêm vào Thẻ khi di chuột

Yêu cầu tối thiểu:

  1. Chủ đề Astra
  2. Tiện ích bổ sung Astra Pro
  3. WooCommerce

Bật nút xem nhanh

Chuyển đến trang Giao diện → Tùy chỉnh và sau đó nhấp vào bảng WooCommerce → Danh mục sản phẩm . Cuộn xuống phần Xem nhanh , chọn tùy chọn “Trên hình ảnh” từ hộp thả xuống và sau đó nhấp vào nút xuất bản.

Hiển thị ‘Nút Thêm vào giỏ hàng’

Theo mặc định, nút Thêm vào giỏ hàng hiển thị bên dưới giá sản phẩm. Vào phần Customize Theme → WooCommerce → Product Catalog → Shop Product Structure và tắt tùy chọn Add To Cart .

Bây giờ chúng ta sẽ thêm vị trí nút “Trên hình ảnh”. Trong Bảng điều khiển WordPress, hãy truy cập trang Trình chỉnh sửa chủ đề (Giao diện → Trình chỉnh sửa chủ đề) và mở tệp functions.php của chủ đề con Astra của bạn. Thêm mã PHP sau vào cuối.

add_action( 'after_setup_theme', function(){
	add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 7 );
});

CSS

Mở tệp style.css của chủ đề con Astra hoặc chuyển đến phần Giao diện → CSS bổ sung và thêm mã CSS sau.

.astra-shop-thumbnail-wrap > a.add_to_cart_button {
	position: absolute;
	opacity: 0;
	bottom: 0;
	left: 0;
	width: 50%;
	text-align: center;
	min-height: 2em;
	background: rgba(0,0,0,.7);
	border-radius: 0;
	color: #fff;
	font-weight: 400;
	padding: 5px 10px 2px;
	margin: 0!important;
}
.astra-shop-thumbnail-wrap:hover > a.add_to_cart_button {
	opacity: 1;
}
.astra-shop-thumbnail-wrap > a.add_to_cart_button:hover {
	background-color: #000;
}
.astra-shop-thumbnail-wrap .ast-quick-view-text {
	left: auto;
	right: 0;
	width: 50%;
}
.astra-shop-thumbnail-wrap a.added_to_cart {
	display: none!important;
}
@media only screen and (max-width: 921px) {
	.astra-shop-thumbnail-wrap > a.add_to_cart_button,
	.astra-shop-thumbnail-wrap .ast-quick-view-text {
		width: 100%;
	}
	.astra-shop-thumbnail-wrap > a.add_to_cart_button {
		bottom: 28px;
	}
}