Mở file functions.php trong child theme của bạn (nếu chưa có child theme, bạn nên tạo child theme để tránh mất thay đổi khi update theme). Thêm đoạn code sau: // Hiệu ứng trỏ chuột function color_changing_cursor_effect() { ?> <div class=”color-changing-cursor”></div> <style> .color-changing-cursor { position: fixed; width: 15px; height: 15px; border-radius: 50%; pointer-events: none; z-index:…
Lưu trữ danh mục: Kiến thức Wordpress
CSS, Kiến thức Wordpress, Thủ thuật
Hiệu ứng chiếu sáng (shine effect) (hiệu ứng ánh sáng lướt qua) khi hover vào logo
22
Th2
Th2
Dán CSS sau: .header-logo a { position: relative; display: inline-block; overflow: hidden; /* Ẩn hiệu ứng dư */ } .header-logo a::before { content: “”; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background:…
CSS, Kiến thức Wordpress, Thủ thuật
Hiệu ứng chiếu sáng (shine effect) (hiệu ứng ánh sáng lướt qua) khi hover vào banner
22
Th2
Th2
Dán CSS sau: .banner { position: relative; width: 100%; max-width: 800px; /* Điều chỉnh độ rộng banner */ height: 250px; /* Điều chỉnh chiều cao banner */ background: url(‘https://via.placeholder.com/800×250’) no-repeat center/cover; border-radius: 10px; overflow: hidden; /* Ẩn hiệu ứng dư */…
CSS, Kiến thức Wordpress, Thủ thuật
Hiệu ứng chiếu sáng (shine effect) (hiệu ứng ánh sáng lướt qua) khi hover vào button
22
Th2
Th2
Dán CSS sau: .button { position: relative; display: inline-block; padding: 12px 24px; font-size: 16px; font-weight: bold; color: white; background: #007bff; border: none; border-radius: 8px; cursor: pointer; overflow: hidden; /* Ẩn phần dư của…
CSS, Kiến thức Wordpress, Thủ thuật
Hiệu ứng chiếu sáng (shine effect) (hiệu ứng ánh sáng lướt qua) khi hover vào hình ảnh
10
Th1
Th1
Dán CSS vào .product-small .box-image:hover::before{ -webkit-animation:shine .75s;animation:shine .75s } @-webkit-keyframes shine{ 100%{left:125%} } @keyframes shine{ 100%{left:125%} } .product-small .box-image::before{ position:absolute; top:0; left:-75%; z-index:2; display:block; content:”; width:50%; height:100%; background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%); background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%); -webkit-transform:skewX(-25deg);transform:skewX(-25deg) }
20
Th3
Th3
Bạn có thể dán code script bằng các cách sau: Cách 1: Vào Giao diện → Tùy biến → Advanced (Nâng cao) cuộn xuống Custom JS (JavaScript tùy chỉnh) Cách 2: tạo file .js riêng và enqueue nó trong functions.php Cách 3: Dùng UX Blocks (theme Flatsome) hoặc các plugin có mục dán code js…
20
Th3
Th3
Bạn có thể dán code script bằng các cách sau: Cách 1: Vào Giao diện → Tùy biến → Advanced (Nâng cao) cuộn xuống Custom JS (JavaScript tùy chỉnh) Cách 2: tạo file .js riêng và enqueue nó trong functions.php Cách 3: Dùng UX Blocks (theme Flatsome) hoặc các plugin có mục dán code js…
20
Th3
Th3
Cách 1: Vào Giao diện → Tùy biến → Advanced (Nâng cao) cuộn xuống Custom JS (JavaScript tùy chỉnh) Cách 2: tạo file .js riêng và enqueue nó trong functions.php Cách 3: Dùng UX Blocks (theme Flatsome) hoặc các plugin có mục dán code js như Code Snippets ,… Cách 4: Riêng theme Flatsome: wp-admin/admin.php?page=optionsframework…
Code function, Kiến thức Wordpress, Thủ thuật
Hướng dẫn tùy chỉnh mô tả danh mục sản phẩm hiển thị sau danh sách sản phẩm thay vì phía trên
20
Th3
Th3
Mở file functions.php trong child theme của bạn (nếu chưa có child theme, bạn nên tạo child theme để tránh mất thay đổi khi update theme). Thêm đoạn code sau: //tùy chỉnh mô tả danh mục sản phẩm hiển thị sau danh sách sản phẩm thay vì phía trên add_action( ‘wp’, ‘webdy_move_archive_description’ ); function webdy_move_archive_description()…
Code function, Kiến thức Wordpress, Thủ thuật
Hướng dẫn thêm chữ “Giá: ” vào trước giá sản phẩm trên trang sản phẩm và giỏ hàng
20
Th3
Th3
Mở file functions.php trong child theme của bạn (nếu chưa có child theme, bạn nên tạo child theme để tránh mất thay đổi khi update theme). Thêm đoạn code sau: /*thêm chữ “Giá: ” vào trước giá sản phẩm trên trang sản phẩm và giỏ hàng*/ add_filter( ‘woocommerce_get_price_html’, ‘webdy_change_product_price_display’ ); add_filter( ‘woocommerce_cart_item_price’, ‘webdy_change_product_price_display’ ); function…