tiểu luận đồ án môn công nghệ tmđt

LỜI MỞ ĐẦUVới sự phát triển mạnh mẽ của Internet, công nghệ thông tin cùng với sự lớn mạnh củangành thương mại điện tử như hiện nay, nên việc thiết kế một website bán hàng là điềumà hầu

GIỚI THIỆU VỀ WEBSITE

Publish website

- Upload source code lên hosting:

Hình Upload source code của WP lên hosting

- Upload database và chỉnh sửa lại config php:

Hình Upload database lên hosting

- Publish website (https://group5.fun/) link hoạt động đến 31/10/2023.

Hình Website hoạt động và URL website

Giới thiệu header và hình ảnh header của website

Hình Header của website và hình ảnh header - logo

- Đối với phần header, hình ảnh logo và ảnh nền đầu trang được nhóm tự thiết kế để đảm bảo tính cá nhân hóa của cửa hàng

- Phần Menu [ header đang hiển thị hai loại menu bao gồm:

Menu chính: thể hiện các danh m^c sản phẩm, các tính năng chính của cửa hàng như giỏ hàng, thanh toán, form liên hệ, bản đồ địa chỉ của cửa hàng cũng như tính năng đăng nhập

Menu phụ: với m^c đích để kích cầu mua sắm, nhóm gắn thêm URL của một số loại sản phẩm tiêu biểu để có thể “up-sells” người dùng

- Hai thanh header trên cùng được can thiệp bằng mã nguồn để thể hiện thêm thông tin đến người dùng về thời gian hoạt động của cửa hàng cũng như hình ảnh về dịch v^ của cửa hàng

Mã nguồn thêm thông tin thời gian hoạt động và email liên hệ:

Plugin Name: Custom Header PHP

Description: Add custom PHP code to the header.

! ! echo ' Open time: 9:00AM -

Email: group5@gmail.com ';

} add_action( 'wp_head', 'custom_header_php' );

Mã nguồn hiển thị hình ảnh dịch vụ của cửa hàng:

///Thêm hình a Anh đầD u head add_action( 'wp_body_open' 'tb_head' , ); function tb_head(){

! ! ! ! style="background-color: #0f4e33;height: 50px;background-repeat: no-repeat;background-position: center center;background-size: auto 50px;

! ! ! ! background-image: url(https://media.hasaki.vn/hsk/1696490131trimunipl.jpg);">

- Danh m^c được phân cấp và chia theo từng loại sản phẩm hoặc thương hiệu.

- Form liên hệ: về m^c form liên hệ, thay vì dùng plugin Contact Form 7 hay một số plugin hỗ trợ khác, nhóm mong muốn được tự quản lý và điều khiển tính năng này nên dùng mã nguồn hoàn toàn [ phần form này

Add_shortcode: dùng để đăng ký shortcode.

Ob_start: là một hàm của output buffering Bật bộ đệm đầu ra cho tất cả các tệp PHP theo mặc định.

Ob_get_clean: trả về tất cả nội dung của bộ đệm đầu ra trên cùng và xóa nội dung khỏi bộ đệm.

Tạo form gồm các dòng thông tin cần thu thập từ người dùng.

Dùng lệnh If để kiểm tra xem có nội dung được gửi đi không, nếu thông tin gửi đi nhập thiếu thì yêu cầu người dùng nhập đầy đủ thông tin, nếu đủ rồi thì dùng hàm gửi mail (wp_mail) để gửi mail thông tin cho admin add_shortcode( "Form_Lien_He" "Vie_show_form_lien_he" , ); function Vie_show_form_lien_he(){ !

! ! if( isset ( $_POST [ "gui_di" ])){

! ! ! ! $ho_ten=isset($_POST["ho_ten" ]) ? $_POST["ho_ten" "" ]: ;

! ! ! ! $so_dien_thoai = isset ( $_POST ["so_dien_thoai" ]) ?

! ! ! ! $email = isset ( $_POST ["email" ]) ? $_POST[ "email" "" ]: ;

! ! ! ! $noi_dung_lien_he = isset ( $_POST ["noi_dung_lien_he" ]) ?

$_POST[ "noi_dung_lien_he" "" ]: ;

! ! ( if $ho_ten == || "" $so_dien_thoai=="" || $noi_dung_lien_he== ){ ""

! ! ! ! echo"

Vui lòng nhập đầD y đu A thông tin

! ! ! ! $to = get_option ( 'admin_email' );

! ! ! ! $body = "Họ Tên: $ho_ten SDT: $so_dien_thoai Địa chỉ A

Email: $email Nội dung: $noi_dung_lien_he";

! ! ! ! $headers = array('Content-Type: text/html; charset=UTF-8');

! ! ! ! wp_mail ( $to $subject $body $headers); , , ,

! ! ! ! ///$content ='';

! ! ! ! //echo'';

! ! ! ! echo"

Cám ơn bạn đã đêA lại thông tin

VieBeauty sẽ liên hệ bạn trong thời gian sớm nhầc t!

! ! ! ! ! ! Họ Tên (*) < > br

! ! ! ! ! !

! ! ! ! ! ! Sôc Điện Thoại(*)

! ! ! ! ! !

! ! ! ! ! ! Nội Dung Liên Hệ (*) < > br

! ! ! ! ! !

! ! ! !

! ! 'comment_post_ID' ! ! !=> $post ID -> ,

! ! 'comment_author_IP' ! ! => $_SERVER['REMOTE_ADDR'],

Giao diện của Form liên hệ:

Hình Plugin Form liên hệ tự code

Hình Email gửi thông tin Form liên hệ

- Where to find us: địa chỉ cửa hàng trên Maps nhóm dùng Elementor để thể hiện.

Trang chủ

Hình Các chương trình của cửa hàng trên trang chủ

- Bên dưới header các hộp hình ảnh trong Elementor được sử d^ng để giới thiệu về các loại hình sản phẩm và các deal khuyến mãi để đẹp mắt hơn và thu hút người dùng

- URL sản phẩm liên quan sẽ được chèn vào các hộp hình ảnh để khi người dùng nhấn nào sẽ chuyển hướng họ đến trang sản phẩm tương ứng

Hình Thiết lập hộp hình ảnh trong Elementor

- Tạo các chương trình khuyến mãi bằng Media Carousel trong Elementor, khi người dùng nhấp vào từng hình ảnh sẽ chuyển hướng họ đến từng chương trình khuyến mãi tương ứng:

Hình Các chương trình sale chạy tự động bởi Media Carousel – Elementor

- Tương tự phía dưới nhóm chèn video về sản phẩm để tăng thêm trải nghiệm cho người dùng, giúp trang web sinh động hơn Và nh\ng URL tương ứng với từng nhóm thương hiệu để người dùng dễ lựa chọn và bắt mắt hơn.

Hình Video giới thiệu sản phẩm và URL các thương hiệu tương ứng

- List danh m^c của từng nhóm sản phẩm, khi người dùng nhấp vào sẽ điều hướng đến trang sản phẩm tương ứng với danh m^c.

Hình Danh mục sản phẩm bằng hình ảnh

- List danh m^c của từng nhóm thương hiệu, điều hướng đến trang tương ứng khi nhấp vào từng hình ảnh Sử d^ng Elementor chia thành 3 khối như hình, tương tự sử d^ng Media Carousel để hiển thị danh sách thương hiệu tự động lướt:

Hình Danh sách các loại thương hiệu sản phẩm

- Dùng shortcode hiển thị các sản phẩm đang khuyến mãi và sản phẩm nổi bật, khống chế số lượng sản phẩm hiển thị tối đa là 2 sản phẩm.

Hình Danh mục bằng chữ được phân loại

- Cho phép hiển thị các bài post để người dùng dễ truy cập và nội dung trang chủ được phong phú hơn Ở phần này nhóm sử d^ng Elementor để hiển thị post

Hình Hiển thị các bài viết của website để tăng tính thu hút

- Thêm một số thông tin khác về cửa hàng Ở phần này nhóm vẫn dùng Elementor chia bố c^c thành 3 phần (2 khối [ dòng trên và 1 khối [ dòng dưới) và trong mỗi phần sẽ có nh\ng cột nhỏ để hiển thị thông tin như hình.

Footer

Hình Footer website thể hiện thông tin liên hệ của cửa hàng

Trang sản phẩm

Hình Sản phẩm của cửa hàng

Hình Hình ảnh từng sản phẩm

Hình Mô tả và thông tin của sản phẩm

Hình Sản phẩm tương tự

Trang Thank You sau khi đặt hàng

Hình Giao diện sau khi đặt hàng

Hình Chi tiết đơn hàng

Hình Thêm chức năng upsales và Form dưới Chi tiết đơn hàng

2 CAN THIỆP BẰNG CODE VÀO CÁC HOOK CỦA WOOCOMMERCE

Tùy chỉnh nội dung nút thêm vào giỏ hàng “Add To Cart”

- Nút thêm vào giỏ hàng mặc định của WooCommerce:

Hình Trước khi thay đổi nút “Thêm vào giỏ hàng”

- Nút thêm vào giỏ hàng sau khi can thiệp:

Hình Sau khi thay đổi nội dung nút thành “Buy Now”

- Mã nguồn thực hiện tùy chỉnh:

Woocommerce_product_single_add_to_cart_text: hook nội dung thêm vào giỏ hàng cho từng sản phẩm riêng lẻ.

Woocommerce_product_add_to_cart_text: nội dung thêm vào giỏ hàng nhưng áp d^ng cho các trang lưu tr\ sản phẩm (Archive product pages). // Thay đôA i nội dung trên từng trang sa An phầA m riêng le A add_filter( 'woocommerce_product_single_add_to_cart_text',

'woocommerce_add_to_cart_button_text_single' ); function woocommerce_add_to_cart_button_text_single() {

! ! return ( 'Buy Now ♥' 'woocommerce' , );

// Thay đôA i nội dung trên các trang có lưu trữ sa An phầA m add_filter( 'woocommerce_product_add_to_cart_text',

'woocommerce_add_to_cart_button_text_archives' ); ! function woocommerce_add_to_cart_button_text_archives() {

! ! return ( 'Buy Now ♥' 'woocommerce' , );

Tự động thêm mã giảm giá nếu đạt đến giá trị đơn hàng tối thiểu

- Ví d^ minh họa: nếu đơn hàng hơn 500.000 thì mã “coupon” sẽ được thêm vào và giảm 50% giá trị sản phẩm

- Trước khi thực hiện thay đổi:

Hình Trước khi thêm chức năng tự add mã giảm giá

- Sau khi thực hiện thay đổi:

Woocommerce_before_cart: vị trí phía trên dòng sản phẩm trong form giỏ hàng.Khi add_action này cũng có nghca là function chúng ta thêm vào sẽ được thực thi trước khi bắt đầu biểu mẫu giỏ hàng.

WC()->cart->get_subtotal(): lấy giá trị tổng đơn hàng trong giỏ, nếu từ 500.000 tr[ lên thì thêm mã giảm giá, nếu chưa đạt giá trị tối thiểu thì in ra dòng khuyến khích khách mua thêm bao nhiêu để được hư[ng ưu đãi /**

* Áp dụng mã gia Am giá cho giá trị đơn hàng tôc i thiêA u

*/ add_action( 'woocommerce_before_cart' 'add_coupon_notice' , ); function add_coupon_notice() {

! ! ! ! $cart_total = WC ()-> cart -> get_subtotal ();

! ! ! ! $currency_code = get_woocommerce_currency();

! ! ! !if ( $cart_total $minimum_amount < ) {

! ! ! ! ! ! ! WC ()-> cart -> remove_coupon ( 'COUPON' );

! ! ! ! ! ! ! wc_print_notice ( "Get 50% off if you spend more than

$minimum_amount $currency_code !" 'notice' , );

! ! ! ! ! ! ! WC ()-> cart -> apply_coupon ( 'COUPON' );

! ! ! ! ! ! ! wc_print_notice ( 'You just got 50% off your order!' ,

Thêm nội dung dưới nút Tiến hành thanh toán trên trang giỏ hàng

Hình Dưới nút “Tiến hành thanh toán” mặc định hoàn toàn trống

Hình Sau khi thêm nội dung dưới nút “Tiến hành thanh toán”

- Bạn có thể tùy chọn bất kỳ nội dung nào mà mình mong muốn thể hiện bên dưới nút Tiến hành thanh toán

Woocommerce_after_cart_totals: thêm nội dung bên dưới khu vực Tổng giỏ hàng của trang Giỏ hàng WooCommerce. Ở wp_head thực hiện tùy chỉnh CSS cho ký hiệu hình khóa bảo mật và màu ch\

* Snippet Name: ! ! WooCommerce Tùy Chỉ Anh Nội Dung Dưới Nút Tiêc n Hành

*/ function action_woocommerce_after_cart_totals( !) {

! ! echo ' Secure

! ! }; add_action( 'woocommerce_after_cart_totals',

'action_woocommerce_after_cart_totals', 10, 0 ); add_action( 'wp_head', function () {

Hình Tiêu đề “Đơn hàng đã nhận” mặc định của WooCommerce

Hình Sau khi thực hiện thay đổi nội dung tiêu đề

Woocommerce_endpoint_order-received_title: cho phép thay đổi tiêu đề

“Đã nhận đơn hàng” sau khi đặt hàng

* Snippet Name: ! ! Thay đôA i tiêu đêD trong trang Thank You sau khi nhận đơn hàng.

*/ add_filter( 'woocommerce_endpoint_order-received_title',

'vie_thank_you_title' ); function vie_thank_you_title($old_title) {

! ! return '♥ VieBeauty đã nhận thông tin đơn cu Aa Quý khách ♥

Cám ơn đã lựa chọn VieBeauty!';

2.5 Thay đổi nội dung ở trang tiếp nhận đơn hàng:

Hình Nội dung tiếp nhận đơn hàng mặc định

Hình Nội dung tiếp nhận đơn hàng sau khi thực hiện tùy chỉnh

Woocommerce_thankyou_order_received_text: cho phép thay đổi nội dung mặc định của WooCommerce “Cảm ơn Đơn đặt hàng của bạn đã được nhận”

$order->get_billing_last_name(): lấy tên khách từ thông tin đặt hàng. /**

* Snippet Name: ! ! Thay đôA i văn ba An giới thiệu trên Trang ca Am ơn

*/ add_filter( 'woocommerce_thankyou_order_received_text',

'vie_thank_you_intro_text', 20, 2 ); function vie_thank_you_intro_text( $thank_you_title $order , ){ return 'Xin chào ' $order-> get_billing_last_name () ', VieBeauty đã nhận đơn đặt hàng cu Aa bạn rôD i nhé!';

2.6 Ước tính ngày nhận hàng trên trang Check-out:

Hình Mục Giao hàng mặc định của WooCommerce

Hình Sau khi thêm chức năng “Ngày giao hàng ước tính”

Init: Thực thi hành động khi WordPress tải xong một trang nhưng trước khi các thông số trong HEADER được gửi đi.

Shipping->get_shipping_methods: Trả về tất cả các phương thức vận chuyển đã đăng ký để sử d^ng.

Foreach ( $shipping_methods as $id => $shipping_method ): Vòng lặp foreach tự động lặp qua các phần tử trong mảng, nó lặp cho khi nào tới

! ! ! ! add_filter ( "woocommerce_shipping_instance_form_fields_$id" ,

'vie_create_shipping_method_days_field' );

// Tạo trường tùy chỉ Anh trong trình chỉ Anh sưA a phương thức vận chuyêA n có tên là "ngày" và xác định vị trí trường đó sẽ được hiêA n thị function vie_create_shipping_method_days_field( $fields ) {

! ! ! ! ! ! 'desc_tip' => 'The number of days the order will take to arrive with this shipping method.'

! ! $index = array_search ( 'title' , $keys , true );

! ! $pos ! = false === $index ? count ( $fields ) : $index + ; 1

! ! return array_merge array_slice ( ( $fields , , 0 $pos ), $new_fields , array_slice( $fields $pos , ) );

// Tạo trường ngày dưới dạng meta add_filter( 'woocommerce_shipping_method_add_rate_args',

'vie_create_days_as_meta', 10, 2 ); function vie_create_days_as_meta( $args $method , ) {

! ! $args[ 'meta_data' 'days' ][ ] = htmlentities ( $method-> get_option (

// Tính ngày giao hàng ước tính bằng cách cộng sôc ngày vào ngày hiện tại add_action( 'woocommerce_after_shipping_rate',

'vie_output_shipping_method_tooltips', 10 ); function vie_output_shipping_method_tooltips( $method ) {

! ! $meta_data $method-> = get_meta_data ();

! ! ( if array_key_exists ( 'days' , $meta_data ) ) {

! ! ! ! $days = apply_filters ( 'vie_days_output' , html_entity_decode (

! ! ! ! ! ! $current_date = date get_option ( ( 'date_format' ), strtotime( "+" $days " days" ));

! ! ! ! ! ! $html = 'Estimated

Delivery Date: ' $current_date '';

! ! ! ! ! ! echo apply_filters ( 'vie_days_output_html' , $html $days , ,

2.7 Hiện thông báo khuyến khích khách mua thêm để Freeship hoặc thông báo khách được Freeship nếu đạt điều kiện:

- Ví d^ đang thực hiện: với tổng đơn từ 400.000 sẽ được Freeship.

Hình Khi chưa thêm chức năng tự add Freeship hoặc khuyến khích mua thêm

Nếu đủ điều kiện Freeship:

Nếu chưa đủ điều kiện:

Hình Sau khi thêm chức năng Freeship nếu đơn hàng không đủ điều kiện

!* Snippet Name: ! !WooCommerce free shipping nêc u tôA ng giá trị đơn hàng vượt mức cụ thêA nào đó.

// Bật/tăc t phương thức vận chuyêA n Chỉ A bao gôD m chức năng này nêc u bạn chưa bật quy tăc c giao hàng miê„ n phí trong cài đặt phương thức giao hàng cho

Giao hàng miê„ n phí. add_filter( 'woocommerce_package_rates',

'vie_free_shipping_for_specific_products', 10, 2 ); function vie_free_shipping_for_specific_products($rates, $package) {

! ! $cart_total = WC ()-> cart -> get_subtotal ();

! ! !unset( $rates['free_shipping:3'] ); // The shipping method radio button value

// HiêA n thị 'Chi tiêu sôc tiêD n X khác' trên trang gio A hàng. add_filter( 'woocommerce_cart_totals_before_shipping',

'vie_cart_page_progress_bar', 10 ); function vie_cart_page_progress_bar() {

! ! echo 'Mua thêm ' get_woocommerce_currency_symbol ()

$cart_remaining ' đêA được hươ Ang ưu đãi FreeShipping! 😭

get_total_sales () ' sa An phầA m đã bán!

2.12 Thêm biểu mẫu nhận thức về website qua đâu ở Trang Cảm Ơn

- Trang Thank You mặc định: sẽ không có nội dung biểu mẫu này.

Hình Giao diện trang Thank You mặc định

- Sau khi thực hiện thêm biểu mẫu:

Hình Giao diện sau khi thêm chức năng biểu mẫu các kênh nhận biết website

- Thông tin nhận được sẽ hiển thị trong đơn hàng:

Hình Thông tin câu trả lời của người dùng hiển thị ở ghi chú đặt hàng

Woocommerce_thankyou: kích hoạt trên trang cảm ơn được hiển thị trực tiếp sau khi người dùng hoàn tất quy trình thanh toán WooCommerce. is_wc_endpoint_url( 'order-received'): khi điểm cuối cho trang đơn hàng đã nhận được hiển thị. wp_ajax_{$action}: Hook này cho phép xử lý các điểm cuối AJAX tùy chỉnh của mình (AJAX: khái niệm được hiểu là trao đổi dữ liệu với máy chủ và cập nhật một hay nhiều phần của trang web) check_ajax_referer: Xác minh yêu cầu Ajax

* Snippet Name: ! ! WooCommerce Thêm biêA u mầ„ u nhận thức vêD website qua đầu ơ A Trang Ca Am ơn

! ! ! ! Kênh Social Media Khác

! ! ! ! Bạn bè/Người thần

! ! ! !

! ! ! ! ' wp_nonce_field ( 'thankyou' $order_id, 'thankyou_nonce' , true , false ) '

} add_action( 'wp_footer' 'vie_thank_you_ajax_message' , ); function vie_thank_you_ajax_message(){

! ! ( ! if is_wc_endpoint_url ( 'order-received' ) ) return ;

! ! ! ! $('input[type=radio][name=awareness]').change(function() {

! ! ! ! ! ! ! ! url: '" admin_url('admin-ajax.php') "',

! ! ! ! ! ! ! ! data: $('#awareness_feedback_form').serialize(),

! ! ! ! ! ! ! ! ! ! $('#awareness_feedback_form').html('Nice one, thanks for your feedback!');

! ! ";} add_action( 'wp_ajax_collect_feedback' 'vie_thank_you_ajax' , ); add_action( 'wp_ajax_nopriv_collect_feedback' 'vie_thank_you_ajax' , ); function vie_thank_you_ajax(){

! ! check_ajax_referer ( 'thankyou' $_POST [ 'order_id' ],

! ! ( if $order = wc_get_order ( $_POST['order_id' ] ) ) {

! ! ! ! $store_name = get_bloginfo('name');

! ! ! ! $note $order->get_formatted_billing_full_name = () ' !heard about ' $store_name ' through: ' $_POST['awareness'] '.';

! ! ! ! $order->add_order_note ( $note , , 0 true );}

2.13 Xác nhận đúng số điện thoại Việt Nam

- Ví d^ minh họa: Điền đầy đủ các thông tin thanh toán và click vào “Thanh toán”.

- Trước khi thực hiện thay đổi: Có thể điền Số điện thoại tùy thích và vẫn thanh toán được.

Hình… : Số điện thoại ít hơn 10-11 số

- Sau khi thực hiện thay đổi: Điền đúng số điện thoại Việt Nam mới được thanh toán với điều kiện:

Hình….: Thông tin thanh toán khi nhập đúng số điện thoại Việt Nam

- Khi nhập sai số điện thoại Việt Nam (bắt đầu bằng số khác 0): Thông báo “Nhập đúng số điện thoại của bạn”

Hình….: Thông báo khi nhập KHÔNG ĐÚNG số điện thoại Việt Nam

Woocommerce_checkout_process: Kiểm tra các mặt hàng trong giỏ hàng, kiểm tra các trường mà khách hàng điền (tên, địa chỉ, số điện thoại,…).

Nếu không đáp ứng được một số tiêu chí nhất định thì thông báo họ không thể đặt hàng cho đến khi hoàn thành tiêu chí

Devvn_validate_phone_field_process: Kiểm tra trường “số điện thoại”

2.14 Thêm sản phẩm yêu thích vào trang “Sản phẩm yêu thích”

- Khi chưa thực hiện thay đổi

------------Thực hiện thay đổi: Cài đặt “TI Woocommerce Wishlist”

Cài đặt “TI Woocommerce Wishlist”

Chỉnh sửa các cài đặt trong plugin

Hình : Các tùy chỉnh của TI Woocommerce Wishlist

Thêm trang “Sản phẩm yêu thích” vào trang “Giỏ hàng”

- Sau khi nhấp vào phản hồi sẽ nhận được kết quả trả về là:

Hình : Kết quả trả về khi bình luận dưới 2 ký tự

- Code được sử d^ng: function block_short_comments($commentdata) {

$min_length = 2; if (strlen($commentdata['comment_content']) < $min_length) { wp_die('Xin lỗi, comment của bạn quá ngắn để được đăng.');

} add_filter('preprocess_comment', 'block_short_comments');

2.16 Giới hạn ký tự comment

- Nếu đánh giá quá dài sẽ bị cho là spam, gây ảnh hư[ng tới bài viết

- Soạn đánh giá trên 10 ký tự: Nhóm đang giới hạn đánh giá là 10 ký tự

Hình : Kết quả khi soạn đánh giá trên 10 ký tự

- Code được sử d^ng: function limit_comment_characters($commentdata) {

$max_characters = 10; if (strlen($commentdata['comment_content']) > $max_characters) { wp_die('Xin lỗi, comment của bạn quá dài Hãy giới hạn lại comment thành ' $max_characters ' ký tự.');

} add_filter('preprocess_comment', 'limit_comment_characters');

2.17 Chống link spam từ các nguồn khác

Hạn chế các liên kết không an toàn gây nhiễu loạn bài post và bị giảm lượt hiển thị

Hình : Soạn đánh giá bằng liên kết không an toàn

- Kết quả trả về sau phản hồi:

Hình : Kết quả khi đánh giá bằng liên kết không an toàn

- Code được sử d^ng: function prevent_comment_spam_links($comment_text) {

// Kiểm tra xem comment_text có chứa các liên kết không an toàn if (preg_match('/http:\/\/|https:\/\//', $comment_text)) {

// Nếu tìm thấy liên kết không an toàn, từ chối comment và hiển thị thông báo wp_die('Xin lỗi, comment của bạn chứa liên kết không an toàn.');

// Nếu không có liên kết không an toàn, trả về comment_text bình thường return $comment_text;

} add_filter('pre_comment_content', 'prevent_comment_spam_links');

Giao diện trước khi thêm header

Hình : Giao diện trước khi thêm headerSau khi thêm header

Hình : Giao diện sau khi thêm header Phương pháp: Sử d^ng snippet để tạo Plugin ?PHP

*/ function custom_header_php() { echo ' Open time: 9 00 : AM - 8 00 : PM |

} add_action('wp_head', 'custom_header_php');

- Giao diện trước khi thêm Back - to - top

Hình : Giao diện trước khi thêm Back – to – top

- Sau khi thêm Back - to - top

Hình : Giao diện sau khi thêm Back – to – top

- Phương pháp: Thêm Shortcode vào cột Footer 1

Hình : Thêm shortcode vào cột Footer 1

// function add_back_to_top_button() {

// echo 'Quay về đầu trang';

// } function enqueue_back_to_top_script() {

// wp_enqueue_script('back-to-top-script', get_template_directory_uri() '/back-to- top.js', array('jquery'), '1.0.0', true);

jQuery(document).ready(function($) { var offset = 300; // Khoảng cách cuộn trang trước khi nút xuất hiện var duration = 500; // Thời gian cuộc lại lên đầu trang (miligiây) console.log("haha");

$('#back-to-top').fadeIn(duration);

$('#back-to-top').fadeOut(duration);

$('#back-to-top').click(function(event) { event.preventDefault();

$('html, body').animate({scrollTop: }, 0 duration); returnfalse;

} add_action('wp_footer' 'enqueue_back_to_top_script', );

// add_action('wp_enqueue_scripts', 'enqueue_back_to_top_script'); display: none; background-color: #0073e6; color: # ;fff padding: 10 ;px border-radius:50%; cursor: pointer;

#back to top- - :hover { background-color: #0050 ;a5

2.20 Thêm chữ ‘Hết hàng’ nếu sản phẩm trong kho đã hết

Hình : Ảnh sản phẩm trước khi thêm chữ Hết hàng

Hình : Ảnh sản phẩm sau khi thêm chữ Hết hàng

2.21 Thêm nút gọi điện Hotline cho trang web ở góc dưới trái trang web

Hoạt động kinh doanh của doanh nghiệp hiệu quả hay không ph^ thuộc vào việc chăm sóc khách hàng của doanh nghiệp có tốt hay không Có thể nói hotline đóng góp đáng kể trong hoạt động chăm sóc khách hàng Khi khách hàng có nhu cầu mua hàng hay tư vấn thì sẽ gọi điện đến hotline của doanh nghiệp Nên doanh nghiệp thường chú trọng đến việc chăm sóc khách hàng thông qua hotline Ngày nay doanh nghiệp có xu hướng đầu tư vào tổng đài số hotline để thể hiện tính chuyên nghiệp và gi\ chân thu hút nhiều khách hàng.

Hình : Ảnh web trước khi thêm nút gọi

Thay đổi nội dung ở trang tiếp nhận đơn hàng

Hình Nội dung tiếp nhận đơn hàng mặc định

Hình Nội dung tiếp nhận đơn hàng sau khi thực hiện tùy chỉnh

Woocommerce_thankyou_order_received_text: cho phép thay đổi nội dung mặc định của WooCommerce “Cảm ơn Đơn đặt hàng của bạn đã được nhận”

$order->get_billing_last_name(): lấy tên khách từ thông tin đặt hàng. /**

* Snippet Name: ! ! Thay đôA i văn ba An giới thiệu trên Trang ca Am ơn

*/ add_filter( 'woocommerce_thankyou_order_received_text',

'vie_thank_you_intro_text', 20, 2 ); function vie_thank_you_intro_text( $thank_you_title $order , ){ return 'Xin chào ' $order-> get_billing_last_name () ', VieBeauty đã nhận đơn đặt hàng cu Aa bạn rôD i nhé!';

Ước tính ngày nhận hàng trên trang Check-out

Hình Mục Giao hàng mặc định của WooCommerce

Hình Sau khi thêm chức năng “Ngày giao hàng ước tính”

Init: Thực thi hành động khi WordPress tải xong một trang nhưng trước khi các thông số trong HEADER được gửi đi.

Shipping->get_shipping_methods: Trả về tất cả các phương thức vận chuyển đã đăng ký để sử d^ng.

Foreach ( $shipping_methods as $id => $shipping_method ): Vòng lặp foreach tự động lặp qua các phần tử trong mảng, nó lặp cho khi nào tới

! ! ! ! add_filter ( "woocommerce_shipping_instance_form_fields_$id" ,

'vie_create_shipping_method_days_field' );

// Tạo trường tùy chỉ Anh trong trình chỉ Anh sưA a phương thức vận chuyêA n có tên là "ngày" và xác định vị trí trường đó sẽ được hiêA n thị function vie_create_shipping_method_days_field( $fields ) {

! ! ! ! ! ! 'desc_tip' => 'The number of days the order will take to arrive with this shipping method.'

! ! $index = array_search ( 'title' , $keys , true );

! ! $pos ! = false === $index ? count ( $fields ) : $index + ; 1

! ! return array_merge array_slice ( ( $fields , , 0 $pos ), $new_fields , array_slice( $fields $pos , ) );

// Tạo trường ngày dưới dạng meta add_filter( 'woocommerce_shipping_method_add_rate_args',

'vie_create_days_as_meta', 10, 2 ); function vie_create_days_as_meta( $args $method , ) {

! ! $args[ 'meta_data' 'days' ][ ] = htmlentities ( $method-> get_option (

// Tính ngày giao hàng ước tính bằng cách cộng sôc ngày vào ngày hiện tại add_action( 'woocommerce_after_shipping_rate',

'vie_output_shipping_method_tooltips', 10 ); function vie_output_shipping_method_tooltips( $method ) {

! ! $meta_data $method-> = get_meta_data ();

! ! ( if array_key_exists ( 'days' , $meta_data ) ) {

! ! ! ! $days = apply_filters ( 'vie_days_output' , html_entity_decode (

! ! ! ! ! ! $current_date = date get_option ( ( 'date_format' ), strtotime( "+" $days " days" ));

! ! ! ! ! ! $html = 'Estimated

Delivery Date: ' $current_date '';

! ! ! ! ! ! echo apply_filters ( 'vie_days_output_html' , $html $days , ,

Hiện thông báo khuyến khích khách mua thêm để Freeship hoặc thông báo khách được Freeship nếu đạt điều kiện