Chưa có sản phẩm trong giỏ hàng.
Hướng dẫn thiết kế Website Wordpress
Danh sách code tuỳ chỉnh Flatsome cực hữu ích
Flatsome là giao diện bán hàng số 1 thị trường hiện nay, và nếu như bạn đang gặp khó khăn khi tuỳ chỉnh giao diện Flatsome thì đây là bài viết dành cho bạn. Các đoạn code sẽ tiếp tục cập nhật dần để các bạn có thêm nhiều code hữu ích mới!
Chống tràn dòng trên di động
1 | body {overflow-x:hidden;} |
Tuỳ chỉnh Bullet Flatsome
Bỏ dấu gạch chân dưới bullet Flatsome
1 | ul li.bullet-checkmark, ul li.bullet-arrow, ul li.bullet-star {border-bottom: none;} |
Đổi màu bullet Flatsome
1 | ul li.bullet-checkmark:before, ul li.bullet-arrow:before, ul li.bullet-star:before{color:#2C98F0;} |
Tuỳ chỉnh widget Flatsome
Bỏ divider dưới widget Flatsome
1 | .widget {border-bottom: 0px none} |
Tuỳ chỉnh CF7
Tuỳ chỉnh nút Submit
1 2 3 4 5 6 7 8 9 | .wpcf7 input[type="submit"] { border-radius: 20px; } .wpcf7-submit { width: 100%; font-size: 15px!important; background: #F35B1F!important; color: #fff!important; } |
Bỏ tab đánh giá
1 2 3 4 5 6 | add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 ); function woo_remove_product_tabs( $tabs ) { unset( $tabs['reviews'] ); // Bỏ tab đánh giá unset( $tabs['additional_information'] ); // Bỏ tab thông tin bổ xung return $tabs; } |
Ẩn divider trên Flatsome
1 | .widget .is-divider{display: none;} |
Tùy chỉnh thanh tìm kiếm
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .searchform-wrapper input[type=search] { border: 1px solid #54211E; height: 40px; font-size: 13px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .searchform-wrapper .searchform .button.icon { height: 40px; width: 65px; border: 3px solid #54211E; border-top-right-radius: 3px; border-bottom-right-radius: 3px; background: #54211E;} |
Tùy chỉnh tiêu đề (section title)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .section-title-normal span:after{content:"";display:table;clear:both} .section-title-normal span { background: #54211E; font-size: 14px; padding: 8px 15px; color: #fff!important;} .section-title-normal { background: #e2e2e2;} .section-title-normal span:after { border: 20px solid #54211E; position: absolute; DISPLAY: INLINE-BLOCK; MARGIN-LEFT: 15PX; border-right-color: transparent; border-bottom-color: transparent; margin-top: -8px; left: auto;} .section-title a { display: block; padding-left: 15px; font-size: 15px; font-weight: 400; color: #8e1817; padding-right: 10px;} |
Tùy chỉnh shop sidebar
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .shop-sidebar .widget-title, #shop-sidebar .widget-title { display: block; background: #54211E; color: white; padding: 10px; text-align: center; border-top-left-radius: 5px; border-top-right-radius: 5px; } .shop-sidebar ul, #shop-sidebar ul { padding: 12px; border: solid 1px #e5e6ec; background: white; } |
Làm nổi bật giá sản phẩm
1 2 3 4 5 6 7 8 | .product-small.box span.amount { white-space: nowrap; color: #D20E18; font-weight: 700; font-size: 16px; font-style: italic; text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 3px 3px 5px #333; } |
Thu nhỏ giá gốc sản phẩm
1 | del .woocommerce-Price-amount.amount {color:#666;font-size:80%;} |
Chữ tên sản phẩm thành màu đen (thay vì màu link)
1 2 3 | .product-title a{ padding-bottom: 8px; color: #000;} |
Cho ảnh sản phẩm cách viền một đoạn
1 2 3 | .box-text.text-center { padding-left: 10px; padding-right: 10px;} |
Tùy chỉnh màu viền pop-up quick buy
1 2 3 4 | .popup-customer-info-group .devvn-order-btn { background: #FD5730;} .devvn-popup-title { background: #FD5730;} |
Tùy chỉnh cỡ chữ mô tả ngắn của sản phẩm
1 2 | .product-short-description{font-size:95%; color: #555} |
Cố định chiều cao tên sản phẩm, bài viết
1 2 3 4 5 6 | .box-text h1, .box-text h2, .box-text h3, .box-text h4, .box-text h5, .box-text h6, .box-text a:not(.button) { line-height: 1.3; margin-top: 0.1em; margin-bottom: 0.1em; height: 50px; } |
