เมื่อวานนี้ผมเดินทางไปเจอกับลูกค้าผู้น่ารักของผม ร้าน The Organique เป็นร้านค้าขายสินค้าออแกร์นิค ที่มีคอนเส็ปเป็นร้านแนวบูทิคเจ้าแรกของไทย และทางเจ้าของร้านเองก็ต้องการจะนำร้านที่มีแบบออฟไลน์ เข้ามาสู่วงการออนไลน์ด้วย เพื่อเพิ่มช่องทางการจัดจำหน่ายและส่งเสริมการขาย โดยการนัดเจอกันครั้งนี้เราก็ได้พูดคุยถึงทิศทางการพัฒนาเว็บไซต์ขายของออนไลน์กันครับ
มีอยู่ครั้งหนึ่งที่ลูกค้าสอบถามว่า เราสามารถทำการแจ้งเตือนในหน้าเว็บได้ไหม ในกรณีที่ลูกค้าซื้อสินค้าแล้ว แบบเตือนว่า นี่ยังขาดอีกไม่กี่บาท ก็จะได้ส่งฟรีแล้วนะ เช่น สมมติว่า ซื้อขั้นต่ำ 1,200 บาท ร้านจะส่งสินค้าให้ฟรี แล้วลูกค้าก็ซื้อไปแล้ว 1,100 บาท อะไรแบบนี้ ก็แจ้งเตือนว่า ช็อปเพิ่มอีก 100 บาท ก็จะได้รับการจัดส่งฟรีแล้ว เพื่อเป็นการให้ลูกค้าได้ตัดสินใจ ทางร้านเองก็มีโอกาสเพิ่มยอดขายด้วย
ผมว่าเป็นไอเดียที่ดีมากๆนะครับ และแน่นอนครับว่า การทำนั้นก็ทำได้อย่างแน่นอน สำหรับการทำเว็บไซต์ขายของด้วย WordPress + Woocommerce นะครับ และบทความนี้ผมก็จะมาเล่าถึงวิธีการทำนั่นเอง ซึ่งโค้ดที่ผมนำมาเล่า ยกเครดิตให้กับ jeroensormani.com คับ ที่ได้เขียน How To และโค้ดสำหรับการนำมาใช้งานให้พวกเราได้นำมาใช้กัน
โดยการเขียนโค้ดนี้เราจะเขียนลงในไฟล์ functions.php ทีอยู่ในธีมของเรานะครับ
// Copy from here
/**
* Show a message at the cart/checkout displaying
* how much to go for free shipping.
*/
function my_custom_wc_free_shipping_notice() {
if ( ! is_cart() && ! is_checkout() ) { // Remove partial if you don't want to show it on cart/checkout
return;
}
$packages = WC()->cart->get_shipping_packages();
$package = reset( $packages );
$zone = wc_get_shipping_zone( $package );
$cart_total = WC()->cart->get_displayed_subtotal();
if ( WC()->cart->display_prices_including_tax() ) {
$cart_total = round( $cart_total - ( WC()->cart->get_discount_total() + WC()->cart->get_discount_tax() ), wc_get_price_decimals() );
} else {
$cart_total = round( $cart_total - WC()->cart->get_discount_total(), wc_get_price_decimals() );
}
foreach ( $zone->get_shipping_methods( true ) as $k => $method ) {
$min_amount = $method->get_option( 'min_amount' );
if ( $method->id == 'free_shipping' && ! empty( $min_amount ) && $cart_total < $min_amount ) {
$remaining = $min_amount - $cart_total;
wc_add_notice( sprintf( 'ช็อปเพิ่มอีก %s เพื่อบริการส่งฟรี!', wc_price( $remaining ) ) );
}
}
}
add_action( 'wp', 'my_custom_wc_free_shipping_notice' );
และที่ห้ามลืมนะครับ เราต้องไปตั้งค่ายอดขั้นต่ำของการจัดส่งฟรีด้วยนะครับ ไม่งั้นเว็บไซต์ของเราก็จะทำงานผิดพลาดได้ วิธีการก็คือไปที่เมนู Woocommerce > Setting > Shipping
จากนั้นก็ตั้งค่า Zone การจัดส่ง แล้วก็เพิ่มวิธีการจัดส่งแบบ Free Shipping และใส่ยอดขั้นต่ำ ดังตัวอย่างในภาพครับ
ซึ่งเมื่อเราปรับเสร็จแล้ว การแสดงผลแจ้งเตือนจะแจ้งในหน้า Cart และหน้า Check Out ครับผม
และโค้ดด้านล่างเป็น CSS ที่ผมใช้กับโปรเจ็คนี้นะครับ ลองนำไปประยุกต์ดูได้ครับ
.woocommerce-message, .wpcf7-mail-sent-ok{
color: #ffffff;
border:none;
background-color: #d32f2f;
font-size: 20px;
}
.woocommerce-message .amount{
color:#fff;
font-weight: 600;
font-size: 30px;
}
.cart-collaterals .cart_totals{
width:auto;
}.woocommerce-message a, .wpcf7-mail-sent-ok a {
color: #ffffff;
text-decoration: underline;
}
.woocommerce-message .button {
color: #fff;
font-weight: bold;
text-decoration: none;
background-color: #455A64;
border-color: #455A64;
}.woocommerce-message .button:hover {
color: #fff;
font-weight: bold;
text-decoration: none;
background-color: #607D8B;
border-color: #607D8B;
opacity:1;
}
