Một thẻ đã tồn tại với tên chi nhánh được cung cấp. Nhiều lệnh Git chấp nhận cả tên thẻ và tên nhánh, vì vậy việc tạo nhánh này có thể gây ra hành vi không mong muốn. Bạn có chắc chắn muốn tạo nhánh này không?
Mặc dù thực tế là bạn có thể tùy chỉnh mọi khía cạnh của cửa hàng, nhưng mẫu sản phẩm duy nhất là trang chính nơi diễn ra hầu hết các tùy chỉnh trong WooC Commerce. Bạn phải tập trung vào nó nếu bạn muốn tối đa hóa doanh thu và củng cố giai đoạn đầu của quá trình mua hàng. Chúng tôi sẽ chỉ cho bạn cách sửa đổi trang sản phẩm duy nhất của WooC Commerce theo chương trình trong bài đăng này
Cách chỉnh sửa mẫu sản phẩm đơn lẻ WooC Commerce
Các chủ đề sau đây sẽ được thảo luận
- sử dụng móc
- Ghi đè tệp mẫu WooC Commerce
- Tùy chỉnh trang sản phẩm bằng CSS script
Đầu ra của trang sản phẩm được xử lý bởi hai tệp WooC Commerce chính
- sản phẩm duy nhất. php
- nội dung-đơn-sản phẩm. php
Móc mẫu sản phẩm đơn WooC Commerce. Hành động và Bộ lọc
- woocommerce_before_single_product
- woocommerce_before_single_product_summary
- woocommerce_single_product_summary
- woocommerce_b Before_add_to_cart_form
- woocommerce_before_variations_form
- woocommerce_before_add_to_cart_button
- woocommerce_b Before_single_variation
- woocommerce_single_variation
- woocommerce_before_add_to_cart_quantity
- woocommerce_after_add_to_cart_quantity
- woocommerce_after_single_variation
- woocommerce_after_add_to_cart_button
- woocommerce_after_variations_form
- woocommerce_after_add_to_cart_form
- woocommerce_product_meta_start
- woocommerce_product_meta_end
- wooc Commerce_share
- woocommerce_after_single_product_summary
- woocommerce_after_single_product
Chỉnh sửa mẫu sản phẩm đơn lẻ WooC Commerce bằng móc
Hãy xem hướng dẫn này nếu bạn chưa quen với các hook WooC Commerce và cách sử dụng chúng
Loại bỏ các yếu tốBạn có thể sử dụng nhiều móc WooC Commerce khác nhau để xóa bất kỳ tính năng nào khỏi một mẫu sản phẩm. Mỗi cái có thể hoạt động cho một nhóm mặt hàng cụ thể, vì vậy hãy đảm bảo bạn sử dụng hook phù hợp, chức năng gọi lại WooC Commerce và giá trị ưu tiên. Bạn có thể tìm thấy cả hook và các tham số được liên kết của chúng ở trên hoặc trong phần nhận xét trong phần nội dung-một-sản-phẩm của plugin WooC Commerce. tập tin php
// remove title
remove_action[ 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 ];
// remove rating stars
remove_action[ 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 ];
// remove product meta
remove_action[ 'woocommerce_single_product_summary','woocommerce_template_single_meta',40 ];
// remove description
remove_action[ 'woocommerce_single_product_summary','woocommerce_template_single_excerpt',20 ];
// remove images
remove_action[ 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images',20 ];
// remove related products
remove_action[ 'woocommerce_after_single_product_summary','woocommerce_output_related_products',20];
// remove additional information tabs
remove_action['woocommerce_after_single_product_summary','woocommerce_output_product_data_tabs',10];Thật dễ dàng để sắp xếp lại các yếu tố của một mẫu sản phẩm. Trước tiên, bạn phải xóa hook theo cách tương tự như trước đây, sau đó thêm lại hook với số thứ tự/mức độ ưu tiên khác
// change order of description
remove_action['woocommerce_single_product_summary','woocommerce_template_single_excerpt',20];
add_action['woocommerce_single_product_summary','woocommerce_template_single_excerpt',6 ];Để thêm nội dung mới, hãy sử dụng hook sau
add_action['woocommerce_after_single_product_summary','pe_after_single_product_summary'];
/**
* Add some text after the product summary text.
*
* Hook: woocommerce_after_single_product_summary
*/
function pe_after_single_product_summary[] {
echo '
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
';
}Chúng tôi có thể xóa, sắp xếp lại hoặc thêm một tab mới trong phân đoạn Thông tin bổ sung bằng móc bộ lọc tab sản phẩm thương mại điện tử. Tập lệnh sau sẽ xóa tab Mô tả và nội dung của nó, đổi tên tab Đánh giá và chuyển Thông tin bổ sung lên đầu danh sách ưu tiên
add_filter[ 'woocommerce_product_tabs', 'pe_remove_product_tabs', 98 ];
function pe_remove_product_tabs[ $tabs ] {
unset[ $tabs['description'] ]; // Remove the Description tab
$tabs['reviews']['title'] = __[ 'Ratings' ]; // Rename the Reviews tab
$tabs['additional_information']['priority'] = 5; // Additional information at first
return $tabs;
}Ghi đè tệp mẫu WooC Commerce
Ghi đè các tệp mẫu là cách thứ hai để chỉnh sửa theo chương trình mẫu sản phẩm đơn lẻ WooC Commerce. Vì phương pháp này rủi ro hơn một chút so với phương pháp trước, chúng tôi khuyên bạn nên sao lưu toàn bộ trang web trước
Ghi đè các tệp mẫu WooC Commerce gần giống như ghi đè mọi tệp khác trong chủ đề con của bạn, vì vậy nếu bạn không có tệp nào, chúng tôi khuyên bạn nên tạo một chủ đề con hoặc sử dụng một trong các plugin này để tránh bỏ lỡ các tùy chỉnh khi bạn nâng cấp chủ đề của mình
- Trình cấu hình chủ đề con [Miễn phí và Cao cấp]
- Trình tạo chủ đề con [Miễn phí]
- Làm con cho tôi [Miễn phí]
- Trình hướng dẫn chủ đề con [Miễn phí]
- Trình tạo chủ đề con WPS [Miễn phí]
- Tạo chủ đề con [Miễn phí]
- Trình tạo chủ đề con của Orbisius [Miễn phí và trả phí]
- Trình tạo chủ đề con WP [Miễn phí]
Chỉnh sửa thư mục tệp chủ đề con của bạn và tạo thư mục WooC Commerce. Sau đó, sao chép tệp single-product.php và dán vào thư mục chủ đề con của bạn, trong thư mục WooC Commerce
// change order of description
remove_action['woocommerce_single_product_summary','woocommerce_template_single_excerpt',20];
add_action['woocommerce_single_product_summary','woocommerce_template_single_excerpt',6 ];Mở tệp và chú ý dòng này.
// change order of description
remove_action['woocommerce_single_product_summary','woocommerce_template_single_excerpt',20];
add_action['woocommerce_single_product_summary','woocommerce_template_single_excerpt',6 ];Đây là nơi tệp
// change order of description
remove_action['woocommerce_single_product_summary','woocommerce_template_single_excerpt',20];
add_action['woocommerce_single_product_summary','woocommerce_template_single_excerpt',6 ];Tùy chỉnh trang sản phẩm bằng CSS script
Mã CSS là một cách thuận tiện và dễ dàng khác để cập nhật theo chương trình mẫu sản phẩm duy nhất của WooC Commerce [hoặc bất kỳ trang nào khác]. Điều này sẽ hỗ trợ bạn tạo kiểu cho mẫu sản phẩm duy nhất và biến nó thành giao diện của công ty
Để bắt đầu, hãy tạo một tệp mới có phần mở rộng
// change order of description
remove_action['woocommerce_single_product_summary','woocommerce_template_single_excerpt',20];
add_action['woocommerce_single_product_summary','woocommerce_template_single_excerpt',6 ];// change order of description
remove_action['woocommerce_single_product_summary','woocommerce_template_single_excerpt',20];
add_action['woocommerce_single_product_summary','woocommerce_template_single_excerpt',6 ];// change order of description
remove_action['woocommerce_single_product_summary','woocommerce_template_single_excerpt',20];
add_action['woocommerce_single_product_summary','woocommerce_template_single_excerpt',6 ];// change order of description
remove_action['woocommerce_single_product_summary','woocommerce_template_single_excerpt',20];
add_action['woocommerce_single_product_summary','woocommerce_template_single_excerpt',6 ];// change order of description
remove_action['woocommerce_single_product_summary','woocommerce_template_single_excerpt',20];
add_action['woocommerce_single_product_summary','woocommerce_template_single_excerpt',6 ];Tóm lại là
Tóm lại, việc tùy chỉnh cửa hàng trực tuyến là rất quan trọng để nổi bật giữa đám đông. Trang thương hiệu là một số trang quan trọng nhất trong mọi cửa hàng và bạn có thể làm rất nhiều việc để nâng cao trải nghiệm của người tiêu dùng và tối đa hóa doanh thu bằng cách cải thiện chúng
Chúng tôi đã thấy ba cách khác nhau để định cấu hình mẫu sản phẩm duy nhất trong bài đăng này
- sử dụng móc
- Ghi đè các mẫu WooC Commerce
- tập lệnh CSS
Bạn có bất kỳ vấn đề làm theo hướng dẫn của chúng tôi?