Chào các bạn, trong quá trình làm website thì thỉnh thoảng mình có làm được một số tiện ích nho nhỏ để trang trí thêm cho website cũng như giúp cho website trở nên hữu ích hơn với người dùng. Trong số đó, hôm nay mình sẽ gợi ý và hướng dẫn các bạn tạo form lấy số điện thoại đẹp bên dưới ảnh thumbnail trong trang chi tiết sản phẩm Woocommerce nha.
Bài viết trên cơ sở hướng dẫn các bạn mới làm web nên mình sẽ cố gắng viết thật chi tiết bao gồm cả hình ảnh để các bạn làm theo. Bài viết hoàn toàn sử dụng các kỹ năng HTML và CSS chứ không có gì phức tạp nên hy vọng những bạn không biết code cũng có thể tự làm được.
1. Tạo form contact form 7
<div class="form-flaty"> [tel tel-239 class:sophielevy-input-form placeholder "Số điện thoại..."] [submit class:sophielevy-button-form primary "Gửi"] </div>
2. CSS form contact form 7
/** Form đăng ký tư vấn qua điện thoại */
input.wpcf7-form-control.wpcf7-text.wpcf7-tel.wpcf7-validates-as-tel.sophielevy-input-form{
background-color: #ffffff !important;
padding: 25px 0 25px 20px !important;
transition: all ease-out .3s !important;
color: #000 !important;
border-radius: 25px;
}
.sophielevy-button-form{
position: absolute !important;
top: 6%;
right: -9px;
height: 41px;
}
input.wpcf7-form-control.has-spinner.wpcf7-submit.sophielevy-button-form {
border-radius: 25px;
}
::-webkit-input-placeholder { /* WebKit browsers */
color: #7c7c7c !important;
opacity: 1;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #7c7c7c !important;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #7c7c7c !important;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #7c7c7c !important;
opacity: 1;
}
input.wpcf7-form-control.has-spinner.wpcf7-submit {
background: #c9e265;
}
3. Chèn code vào function.php để có được form lấy số điện thoại đẹp
//Thêm form lấy sđt sau gallery ảnh sản phẩm
add_action( 'woocommerce_before_single_product_summary' , 'nbw_form_sdt', 30 );
function nbw_form_sdt() {?>
<style>
.form-dien-thoai {
margin-top: 12px;
background: #091;
padding: 15px;
border-radius: 5px;
}
.form-dien-thoai label {
background: url(https://goodweb.top/wp-content/uploads/2022/12/icon-phone-2.webp) left top no-repeat;
padding: 0 5px 0 52px;
margin: 0px;
text-align: left;
font-weight: 400;
font-size: 14px;
color: white;
margin-bottom: 11px;
}
.form-flaty {
margin-bottom: -55px;
}
</style>
<?php
echo '<div class="form-dien-thoai">';
echo '<label>Hãy để lại<strong> SĐT, chuyên viên tư vấn</strong> của chúng tôi sẽ gọi ngay cho bạn <strong>miễn phí!</strong></label>';
echo do_shortcode( '
' );
echo '</div>';?>
<?php
}
Mọi người có thể tham khảo các mẫu website đẹp tại: www.thietkewebgiare.click. Mua hosting giá rẻ tại: www.kingsilo.com. Đặc biệt các dịch vụ Marketing tại: www.sophielevy.top
