Dưới đây là một số snippet hữu ích cho các nhà phát triển web sử dụng WooCommerce trên WordPress. Những đoạn mã này có thể giúp tùy chỉnh và mở rộng chức năng của theme một cách linh hoạt và hiệu quả:
- Tùy chỉnh font chữ nhanh chóng: Thêm vào phần Custom CSS để thay đổi font chữ toàn trang:
body { font-family: Arial, Helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: Arial, Helvetica, sans-serif; color: #000; font-weight: 700; }
h1 { font-size: 2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.2em; }
h5, h6 { font-size: 1em; }
- CSS tuỳ biến Vertical Blog trên mobile: Giúp vertical blog gọn gàng hơn trên giao diện di động:
@media screen and (max-width: 549px) {
.box-vertical .box-image { width: 40% !important; float: left; margin-right: 10px; }
}- Chuyển mô tả nội dung xuống dưới phần sản phẩm: Thêm vào
functions.php:
<?php
add_action('wp', 'tu_move_wc_archive_description');
function tu_move_wc_archive_description() {
if (is_archive()) {
remove_action('woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10);
remove_action('woocommerce_archive_description', 'woocommerce_product_archive_description', 10);
add_action('woocommerce_after_main_content', 'woocommerce_taxonomy_archive_description', 10);
add_action('woocommerce_after_main_content', 'woocommerce_product_archive_description', 10);
}
}
- Thay đổi chữ “Add to Cart”: Thay đổi văn bản nút thêm vào giỏ hàng:
<?php
add_filter('single_add_to_cart_text', 'woo_custom_cart_button_text');
function woo_custom_cart_button_text() {
return __('My Button Text', 'woocommerce');
}
add_filter('add_to_cart_text', 'woo_archive_custom_cart_button_text');
function woo_archive_custom_cart_button_text() {
return __('My Button Text', 'woocommerce');
}
- Thêm ký hiệu tiền tệ tùy chọn: Thêm và hiển thị ký hiệu tiền tệ mới:
<?php
add_filter('woocommerce_currencies', 'add_my_currency');
function add_my_currency($currencies) {
$currencies['VND'] = __('Vietnam Dong', 'woocommerce');
return $currencies;
}
add_filter('woocommerce_currency_symbol', 'add_my_currency_symbol', 10, 2);
function add_my_currency_symbol($currency_symbol, $currency) {
switch($currency) {
case 'VND': $currency_symbol = '₫'; break;
}
return $currency_symbol;
}
- Đổi tên Related Products: Thay đổi tên sản phẩm liên quan trong WooCommerce bằng cách thêm đoạn mã vào file
functions.php:
<?php
add_filter('gettext', 'rename_relatedproduct_text', 10, 3);
add_filter('ngettext', 'rename_relatedproduct_text', 10, 3);
function rename_relatedproduct_text($translated, $text, $domain) {
if ($text === 'Related products' && $domain === 'woocommerce') {
$translated = esc_html__('Quà Tết trong tầm giá', $domain);
}
return $translated;
}
- Chèn văn bản sau giá sản phẩm: Thêm chú thích sau giá sản phẩm:
<?php
add_filter('woocommerce_get_price_html', 'price_prefix_suffix', 99, 2);
function price_prefix_suffix($price, $product) {
if(is_singular('product')) {
$price = $price . '(Chưa bao gồm VAT)';
}
return apply_filters('woocommerce_get_price', $price);
}
Những đoạn mã này giúp bạn tùy chỉnh website bán hàng có sử dụng WooCommerce theo nhu cầu cụ thể của mình, từ việc chỉnh sửa giao diện đến thêm các chức năng mới cho cửa hàng của bạn.
