• Trang chủ
  • Windows
  • Mac OS
  • Điện thoại
  • Game hay
  • Thủ thuật
  • Website
  • Hướng dẫn
  • Tài liệu
Thursday, 1 May, 2025
Chia sẻ thủ thuật IT, tải phần mềm miễn phí
No Result
View All Result
  • Trang chủ
  • Windows
  • Mac OS
  • Điện thoại
  • Game hay
  • Thủ thuật
  • Website
  • Hướng dẫn
  • Tài liệu
  • Trang chủ
  • Windows
  • Mac OS
  • Điện thoại
  • Game hay
  • Thủ thuật
  • Website
  • Hướng dẫn
  • Tài liệu
No Result
View All Result
Chia sẻ thủ thuật IT, tải phần mềm miễn phí
No Result
View All Result
Home Hướng dẫn

Share Add to Cart button code on product detail page for Woocommerce

Chia sẻ mã nút Thêm vào giỏ hàng trên trang chi tiết sản phẩm dành cho Woocommerce

Harris by Harris
18/08/2023
in Hướng dẫn
Reading Time: 2 mins read
1
huanvmdotcom add to cart button
7
SHARES
21
VIEWS
Share to FacebookShare to TwitterPin on Pinterest

Share code Add To Cart button for Woocommerce

New Add To Cart Button
New Add To Cart Button

This is simple script to change the current Add To Cart button to new style as picture above

Please add this snippet below to your functions.php file into your theme. Or you can install Code Snippets plugin then add new one and paste snippet below.

1
2
3
4
5
6
7
8
9
add_action('woocommerce_before_add_to_cart_quantity', 'hvm_add_to_cart_quantity_wrapper_open', 2);
add_action('woocommerce_after_add_to_cart_button', 'hvm_add_to_cart_quantity_wrapper_close', 94);
function hvm_add_to_cart_quantity_wrapper_open() {
    echo '<div class="hvm_wrapper_add_to_cart_quantity">';
}
function hvm_add_to_cart_quantity_wrapper_close() {
    echo '</div>';
}

Then add CSS to style.css or Custom CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
.product-quick-view-container .input-text.qty, .single-product .product-summary .input-text.qty {
    box-shadow: none !important;
    -webkit-appearance: none !important;
    -webkit-box-shadow: none !important;
    max-width: 100% !important;
    -moz-appearance: textfield;
    padding-right: 38px !important;
    padding-left: 12px !important;
    width: 82px !important;
    background-color: #fff !important;
    border: 1px solid #e6e6e6 !important;
    height: 100% !important;
    line-height: normal;
    text-align: center;
    font-size: 1em;
    appearance: none;
    border-radius: 0;
    min-height:66px;
    color: #333;
}
.product-quick-view-container .quantity, .single-product .product-summary .quantity {
    margin-bottom: 0;
    position: relative;
    border-color: #e6e6e6;
    margin-right: 12px;
    height: 66px;
}
body .product-info .quantity .minus, body .product-info .quantity .plus{
    text-align: center;
    position: absolute!important;
    width: 25px;
    height: 33px!important;
    min-height: 33px!important;
    height: 33px;
    padding: 0!important;
    right: 0;
    border: 1px solid #e6e6e6!important;
    background: #f8f8f8;
    border-left: 1px solid #e6e6e6 !important;
    line-height: 33px;
    margin-right: 0;
}
body .product-info .quantity .minus{
    bottom: 0;
}
.text-center .quantity, .quantity{
    opacity: 1;
    display: inline-block;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-right: 1em;
    white-space: nowrap;
    vertical-align: top;
}
.hvm_wrapper_add_to_cart_quantity{
    display: flex;
    
}
.hvm_wrapper_add_to_cart_quantity .single_add_to_cart_button{
flex:1;
}
.product-quick-view-container .single_add_to_cart_button, .single-product .single_add_to_cart_button{
    height: 66px;
    margin-bottom: 0;
    border-radius: 3px;
    white-space: nowrap;
    padding: 20px 0;
    display: block;
    width: 100%;
    font-size: 1.2857rem;
    font-weight: 700;
    line-height: 24px!important;
    box-shadow: 0 4px 6px -2px rgb(35 67 92 / 32%);
    border: 1px solid rgba(0,0,0,.16)!important;
}

Done!

Digiprove sealCopyright protected by Digiprove © 2023
Rate this post
Chào ! Bạn thấy nội dung này thế nào?
Hữu ích 308Tạm được 314
Tags: add to cart button
Previous Post

Share Buy Now button code on product detail page for Woocommerce

Next Post

Add text From before price for Woocommerce

Harris

Harris

Thích du lịch, khám phá và thích vọc vạch

Next Post
Add text From before price for Woocommerce

Add text From before price for Woocommerce

Đăng ký
Đăng nhập bằng
Tôi đồng ý tạo tài khoản
Khi bạn đăng nhập lần đầu tiên thông qua nút Đăng nhập xã hội, chúng tôi thu thập thông tin hồ sơ công khai tài khoản của bạn do nhà cung cấp tài khoản mạng xã hội chia sẻ, dựa trên cài đặt quyền riêng tư của bạn. Chúng tôi cũng lưu địa chỉ email của bạn để tự động tạo tài khoản cho bạn trên trang web của chúng tôi. Khi tài khoản của bạn được tạo, bạn sẽ đăng nhập vào tài khoản này.
Không đồng ýĐồng ý
Nhận thông báo cho
guest
Đăng nhập bằng
Tôi đồng ý tạo tài khoản
Khi bạn đăng nhập lần đầu tiên thông qua nút Đăng nhập xã hội, chúng tôi thu thập thông tin hồ sơ công khai tài khoản của bạn do nhà cung cấp tài khoản mạng xã hội chia sẻ, dựa trên cài đặt quyền riêng tư của bạn. Chúng tôi cũng lưu địa chỉ email của bạn để tự động tạo tài khoản cho bạn trên trang web của chúng tôi. Khi tài khoản của bạn được tạo, bạn sẽ đăng nhập vào tài khoản này.
Không đồng ýĐồng ý
guest
1 Bình luận
Phản hồi nội tuyến
Xem tất cả bình luận
AI Vision
AI Vision
03/02/2024 13:31

I was recommended this website by my cousin. I am not sure whether this post is written by him as nobody else know such detailed about my difficulty. You are wonderful! Thanks!

0
Phản hồi
wpdiscuz   wpDiscuz

KHUYÊN DÙNG

Thay đổi khoảng giá WooCommerce thành 1 giá sau khi lựa chọn biến thể

Thay đổi khoảng giá WooCommerce thành 1 giá sau khi lựa chọn biến thể

22/03/2022
114
Tạo file Feed sản phẩm Woocommerce theo chuẩn Google Shopping

Tạo file Feed sản phẩm Woocommerce theo chuẩn Google Shopping

05/03/2022
335

ĐANG THỊNH HÀNH

Download Wondershare Filmora X 10.7.8.12 (Full + Repack)

Download Wondershare Filmora X 10.7.8.12 (Full + Repack)

14/08/2023
12.9k
Steinberg – Cubase Pro 12.0.0.205 x64

Steinberg – Cubase Pro 12.0.0.205 x64

24/03/2022
3.2k
Download Cubase 10 Pro All in One – Hướng dẫn cài đặt chi tiết

Download Cubase 10 Pro All in One – Hướng dẫn cài đặt chi tiết

15/09/2023
3.5k
Chia sẻ code nút liên hệ hiển thị bên trái

Chia sẻ code nút liên hệ hiển thị bên trái

30/08/2023
47
Mẫu contact form 7 đơn giản và đẹp

Mẫu contact form 7 đơn giản và đẹp

26/05/2023
575

GIỚI THIỆU

Chia sẻ thủ thuật IT, tải phần mềm miễn phí

Xin chào! Mình là Mạnh Huấn, website này mình xây dựng nhằm mục đích chia sẻ miễn phí các kiến thức, thủ thuật máy tính, làm web WordPress, SEO, MMO, các phần mềm hay... mà mình biết cho tất cả mọi người. Cảm ơn các bạn đã ghé qua, nếu thấy bài viết hay, hãy chia sẻ để ủng hộ tinh thần cho mình nhé!

Theo dõi mình tại đây:

BÀI VIẾT GẦN ĐÂY

Hướng dẫn cài đặt ZeroSSL trên DirectAdmin

Hướng dẫn cài đặt ZeroSSL trên DirectAdmin

12/10/2023
Set all products instock without edit manual in Woocommerce

Set all products instock without edit manual in Woocommerce

18/08/2023
Rearrange WooCommerce checkout page data fields

Rearrange WooCommerce checkout page data fields

18/08/2023

HV MEDIA ON FACEBOOK

  • Giới thiệu
  • Chính sách bảo mật
  • Bản quyền
  • Liên hệ
  • Quảng cáo
  • Gửi yêu cầu
  • Báo link hỏng

© 2020 HV Media - Chia sẻ thủ thuật IT, phần mềm by HV Media Center.

No Result
View All Result
  • Home
  • Mac OS
    • Adobe
    • Developer Tools
    • Graphics & Design
    • Internet – Security
    • Productivity
    • Utilities
    • Video – Audio
  • Windows
    • Anti Virus
    • Development
    • Graphics & Design
    • Office – Study
    • Tools
    • Utilities
    • Video – Audio
  • Điện thoại
    • Apps, Game Cho iOS
    • Phần mềm Android
  • Thủ thuật
    • Thủ thuật máy tính
    • Thủ thuật Mobile
    • Thủ thuật Facebook
  • Game hay
    • Game MacOS
    • Game Windows
  • Website
  • Hướng dẫn
  • Tài liệu

© 2020 HV Media - Chia sẻ thủ thuật IT, phần mềm by HV Media Center.

wpDiscuz
1
0
Bạn đang nghĩ gì, hãy để lại bình luận nhé !x
()
x
| Phản hồi