Người Viết : ViKiMi Editor
Thực hiện tuỳ chỉnh hiển thị hình ảnh sản phẩm của Trang Sản Phẩm WooCommerce tốt hơn
WooCommerce cung cấp cách hiển thị ảnh sản phẩm trên trang sản phẩm / Single Product Page một cách mặc định, có vẻ rất ổn nếu như nhu cầu của Website ở mức cơ bản. Nhưng nếu bạn muốn một cách hiển thị tốt hơn thì phải thực hiện các tuỳ chỉnh với Flexslider dành cho WooCommerce. Trang sản phẩm hiển thị hình ảnh tốt sẽ đem lại sự hài lòng nhiều hơn.
Chúng ta biết rằng Flexslider được tích hợp sẵn với WooCommerce. Điều này giúp chúng ta có thể thao tác tuỳ chỉnh một cách dễ dàng mà không cần cài đặt thêm gì.
Flexslider có các tuỳ chọn để thiết lập, các tuỳ chọn này được cung cấp khá hữu ích và dễ dùng (Có thể tham khảo tại đây)
Hình Ảnh >>
Công việc chúng ta làm để tuỳ chỉnh hiển thị hình ảnh sản phẩm :
+ Thiết lập tuỳ chọn dành cho Flexslider tại file function.php (Các tuỳ chọn này giúp thiết lập cách xử lý hiển thị của Flexslider)
+ Thêm CSS phù hợp dành cho hiển thị hình ảnh sản phẩm
THỰC HIỆN TUỲ CHỈNH HIỂN THỊ HÌNH ẢNH SẢN PHẨM
BƯỚC 1 : Thiết lập tuỳ chọn dành cho Flexslider tại file function.php
Thực hiện thêm đoạn Mã Code sau đây vào function.php
/* for arrow on single product page slide */ add_filter( 'woocommerce_single_product_carousel_options', 'update_woo_flexslider_options' ); /** * Filer WooCommerce Flexslider options - Add Navigation Arrows */ function update_woo_flexslider_options( $options ) { $options['rtl'] = is_rtl(); $options['directionNav'] = true; // Add Navigation Arrows $options['controlNav'] = true; $options['slideshow'] = true; $options['animationLoop'] = true; return $options; }
BƯỚC 2 : Thêm CSS giúp hiển thị hình ảnh sản phẩm tại trang sản phẩm
Thêm CSS vào Header bằng Code thêm vào Function.php
<?php add_action( 'wp_head', function () { ?> <style type="text/css"> /* Nôi dung CSS sẽ thêm vào đây */ </style> <?php } ); ?>
Phần 1 : Hiển thị Mũi tên điều hướng
/*add for arrow on main image slide*/ ul.flex-direction-nav { position: absolute; top: 50%; z-index: 99999; width: 100%; left: 0; margin: 0; padding: 0px; list-style: none; } li.flex-nav-prev {float: left;} li.flex-nav-next {float: right;} a.flex-next {visibility:hidden;} a.flex-prev {visibility:hidden;} a.flex-next::after { visibility:visible; content: '\f054'; font-family: FontAwesome; margin-right: 10px; font-size: 20px; font-weight: bold; } a.flex-prev::before { visibility:visible; content: '\f053'; font-family: FontAwesome; margin-left: 10px; font-size: 20px; font-weight: bold; } ul.flex-direction-nav li a { color: black; } ul.flex-direction-nav li a:hover { color: red; text-decoration: none; } .flex-control-nav .flex-control-thumbs{ display: none; }
Phần 2 : Tạo các dấu chấm phân trang, Thay vì cách ảnh product thumbnails nhỏ ( Bắt buộc phải thiết lập FlexSlider option controlNav là true để có thể làm việc chính xác)
.flex-control-nav { width: 100%; position: absolute; bottom: -40px; text-align: center; } .flex-control-nav li { margin: 0 6px; display: inline-block; zoom: 1; } .flex-control-paging li a { width: 11px; height: 11px; display: block; background: #666; background: rgba(0, 0, 0, 0.5); cursor: pointer; text-indent: -9999px; -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .flex-control-paging li a:hover { background: #333; background: rgba(0, 0, 0, 0.7); } .flex-control-paging li a.flex-active { background: #000; background: rgba(0, 0, 0, 0.9); cursor: default; }
Hình Ảnh Kết Quả :
Thật đơn giản để có thể có một hiển thị hình ảnh sản phẩm một cách tốt hơn. Chỉ cần các tuỳ chỉnh hiển thị sản phẩm ( Single Product Page ) với các thiết lập Flexslider và CSS. Như vậy cách hiển thị đã tốt hơn. Tuy nhiên, vẫn có thể thực hiện cách khác, đó là tuỳ chỉnh sử dụng Hook của WooCommerce. Bạn có thể làm điều này với:
Hook: woocommerce_before_single_product_summary.
@hooked woocommerce_show_product_images – 20
Với Hook này bạn có thể tuỳ chỉnh nhanh nhất và hiệu quả.
