Category Archives: Woocommerce

Dịch theme Flatsome sang tiếng Việt dùng plugin Loco

Cách Việt hóa một số thuật ngữ thường dùng như Checkout – Order detail – Order complete… sử dụng plugin Loco translate: 

  • Cài đặt plugin Loco Translate
  • Tạo Child theme từ theme Flatsome để tránh bị mất những từ đã dịch khi update theme (vào Flatsome => Setup wizard) 
  • Từ Admin menu => vào Loco Translate => Vào mục Theme => Chọn Flatsome Child Theme => Sử dụng chức năng Filter để tìm các từ muốn dịch => Thực hiện dịch & Save lại là xong. 

Sửa giao diện template cho woocommerce

Sua woocommerce template

Để sửa template woocommerce, bạn cần copy file template của plugin woocommerce bạn muốn sửa đổi vào trong thư mục child themes của bạn tại folder mới có tên “woocommerce” và giữ nguyên cấu trúc thư mục của template đó.
Ví dụ: bạn muốn sửa đổi trang giỏ hàng, rất đơn giản bạn copy file /plugins/woocommerce/cart/cart.php đến thư mục themes/your-theme/woocommerce/cart/cart.php
Lưu ý: Tạo thêm thư mục theo đúng cấu trúc của file bạn cần chỉnh sửa.

– Để tìm đúng file cần chỉnh sửa, bạn có thể sử dụng 2 plugin “String locator” & “What the file” để xác định đúng phần cần sửa thuộc file/plugin nào.

– Nếu String locator không xuất hiện ở phần “Tool” trong menu quản trị => Rất có thể theme của bạn bị vô hiệu hóa chức năng Edit trong wp-config.php (khi bạn vào menu Appearance hoặc menu Plugin cũng sẽ không có Edit option) => Để bật chức năng này, bạn cần sửa dòng sau trong wp-config.php: define( ‘DISALLOW_FILE_EDIT’, true ); hoặc nếu bạn dùng plugin Ithemes security, bạn cần vào Setting => WordPress tweaks => bỏ tick File editor (hoặc plugin tương tự).

Sửa button Filter của plugin Woof Woocommerce Filter

Woof woocommerce product filter

Bản free plugin Woof – Woocommerce filter không cho phép thay đổi tên nút “Filter” thành tên khác. Để thay đổi tên của button này, chúng ta tìm đến file sau: 

  1. Tìm đến file woof.php thuộc plugin Woof (folder: Views)
  2. Chọn chức năng sửa (tab plugin) – nếu không có nút này hiện ra thì cần kiểm tra file wp-function.php có disable chức năng sửa không? (Plugin Ithemes có tích hợp chức năng này). 
  3. Trong file woof.php, tìm đến đoạn sau: $woof_filter_btn_txt = __(‘Filter’, ‘woocommerce-products-filter’); => sửa chữ Filter thành bất cứ chữ gì bạn muốn.
  4. Sau đó save lại và refresh lại page shop để xem kết quả (clear cache nếu sử dụng)

Để sửa nốt button “Filter” của chức năng range price slider => chúng ta tìm đến file: woocommerce-products-filter/classes/helper.php => sửa dòng <button type=”submit” class=”button”>’ . __(‘Filter’, ‘woocommerce-products-filter’) thành <button type=”submit” class=”button”>’ . __(‘Lọc‘, ‘woocommerce-products-filter’)

Ghi chú: 

Cách sử dụng hàm ECHO trong php: Dùng để in ra một hay nhiều chuỗi => Khai báo biến: $me = “Tôi” => cú pháp: echo “Tôi là $me” => Kết quả: Tôi là tôi 

Woof – Woocommerce product filter – Error pagination – solution

Using the plugin WOOF – Woocommerce product filter causes error: “admin-ajax.php?paged=2” & no result shown from page 2.

Ex: After filtering products with specific attribute, it only shows maximum of 15 products (the result has 20 products). The remaining 5 products will be shown on page 2 but when we move to page 2, nothing is shown except “0”.

Reason:

– Following the author “realmag777 “, its a js error on the shop page and no solution found.

– Following Stack overflow: WooCommerce pagination works based on global $wp_query variable. But you are using your own $query variable. That’s why it is obvious why it is not working.

Solution:

Easy solution (tested & worked): Turn off ajaxify the shop & no tick to optimize WOOF (js to footer).

from stack overflow:

You have 2 ways to go, first is using query_posts instead of WP_QUERY class. Second way is small hack, where you can cheat $wp_query pagination argument.

Here it is:

 global $wp_query;
  $wp_query->max_num_pages=$query->max_num_pages;
  // TODO - get pagination working
  woocommerce_pagination();

Source: https://stackoverflow.com/questions/50921965/woocommerce-pagination-ajax-wp-query

Woocommerce add to cart with AJAX

What is AJAX?

Ajax is a client-side script that communicates to and from a server/database without the need for the page to reload.

Below is a gif of what ajax add to cart does.

add-to-cart Woocommerce

Enqueuing the Javascript

The first step is to add a javascript script to your site, to do this add the following to your functions.php

1
2
3
4
function bodycommerce_ajax_add_to_cart_script() {
wp_enqueue_script( 'bodycommerce-add-to-cart-ajax', get_stylesheet_directory() . '/js/add-to-cart-ajax.js', array('jquery'), '', true );
}
add_action( 'wp_enqueue_scripts', 'bodycommerce_ajax_add_to_cart_script',99 );

After this create a new folder in your child theme called “js” and in that add a new javascript script called “add-to-cart-ajax.js”.

Javascript side of the AJAX add to cart

The main asset to ajax is that you dont need to reload the page to send data to the database, so the first step in the js creation is to prevent the page to reload.

1
2
3
4
5
6
7
jQuery( function( $ ) {
 
$( document ).on( 'click', '.single_add_to_cart_button', function(e) {
e.preventDefault();
 
});
});

The above code prevents the button to send the information to the database and reload the page.

So now I have disabled the ability to send information to the database, how do we add a product to the cart? Well, we use jQuery to gather information from the site.

The information we need are as follows:
Product ID
Quantity
Variation ID (if variable product)
Variation Item (if variable product)

So how do we get this? Well with a variable product it is quite straightforward as there are hidden inputs with all this information for example

Source: https://diviengine.com/woocommerce-add-cart-ajax-single-variable-products-improve-ux/

Optimize WooCommerce to Load Scripts and CSS only if required?

WooCommerce comes as a simple plugin installation like any other plugin but it will be little bit heavy on resources.

Take a look a this:

WooCommerce adds total 13 new Database Tables

ảnh

WooCommerce loads 3 CSS files and 5 JavaScript files on Each page

// CSS files
woocommercelayout.css
woocommercesmallscreen.css
woocommerce.css
// JavaScript files
addtocart.min.js
jquery.blockUI.min.js
woocommerce.min.js
jquery.cookie.min.js
cartfragments.min.js
Loading these 8 extra files may slow down your blog which may create some negative impact Google Search Engine Result (SERP) page.
Here is a quick tips to disable all above scripts except cart, checkout, my-account and product page.
//* Enqueue scripts and styles
add_action( ‘wp_enqueue_scripts’, ‘crunchify_disable_woocommerce_loading_css_js’ );
function crunchify_disable_woocommerce_loading_css_js() {
// Check if WooCommerce plugin is active
if( function_exists( ‘is_woocommerce’ ) ){
// Check if it’s any of WooCommerce page
if(! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
## Dequeue WooCommerce styles
wp_dequeue_style(‘woocommerce-layout’);
wp_dequeue_style(‘woocommerce-general’);
wp_dequeue_style(‘woocommerce-smallscreen’);
## Dequeue WooCommerce scripts
wp_dequeue_script(‘wc-cart-fragments’);
wp_dequeue_script(‘woocommerce’);
wp_dequeue_script(‘wc-add-to-cart’);
}
}
}

Put above code into your theme’s functions.php file and save your changes.

And that’s it, you should be all good. Now try checking one more time on your blog home page and other posts and you shouldn’t see any of these files loaded on that page/post.

Source: https://crunchify.com/how-to-stop-loading-woocommerce-js-javascript-and-css-files-on-all-wordpress-postspages/

How to disable woocommerce styles and scripts

Kiểm tra chi tiết styles & scripts => disable từng phần

alenabdula commented on Feb 24, 2017

Following worked for me to dequeue both styles and scripts. While example above by @jaswsinc didn’t.

add_action( 'wp_enqueue_scripts', 'dequeue_woocommerce_styles_scripts', 99 );

function dequeue_woocommerce_styles_scripts() {
    if ( function_exists( 'is_woocommerce' ) ) {
        if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
            # Styles
            wp_dequeue_style( 'woocommerce-general' );
            wp_dequeue_style( 'woocommerce-layout' );
            wp_dequeue_style( 'woocommerce-smallscreen' );
            wp_dequeue_style( 'woocommerce_frontend_styles' );
            wp_dequeue_style( 'woocommerce_fancybox_styles' );
            wp_dequeue_style( 'woocommerce_chosen_styles' );
            wp_dequeue_style( 'woocommerce_prettyPhoto_css' );
            # Scripts
            wp_dequeue_script( 'wc_price_slider' );
            wp_dequeue_script( 'wc-single-product' );
            wp_dequeue_script( 'wc-add-to-cart' );
            wp_dequeue_script( 'wc-cart-fragments' );
            wp_dequeue_script( 'wc-checkout' );
            wp_dequeue_script( 'wc-add-to-cart-variation' );
            wp_dequeue_script( 'wc-single-product' );
            wp_dequeue_script( 'wc-cart' );
            wp_dequeue_script( 'wc-chosen' );
            wp_dequeue_script( 'woocommerce' );
            wp_dequeue_script( 'prettyPhoto' );
            wp_dequeue_script( 'prettyPhoto-init' );
            wp_dequeue_script( 'jquery-blockui' );
            wp_dequeue_script( 'jquery-placeholder' );
            wp_dequeue_script( 'fancybox' );
            wp_dequeue_script( 'jqueryui' );
        }
    }
}

Disable Woocommerce by using Plugin Organizer

Plugin Organizer

Plugin Organizer is a more comprehensive plugin that allows site admins to:

  • selectively disable active plugins by post type and request URL
  • create groups of plugins
  • change the plugin loading order

The plugin adds a metabox in the post editing screen so that the admin is allowed to override global and post type settings. This feature can be activated for post types as well, by checking the corresponding item in the General Settings screen. Other features relate to grouping and ordering plugins. More information can be found in online documentation.

Tham khảo bài này: https://dichvuhostinggiare.com/huong-dan-su-dung-organizer-de-tang-toc-cua-trang-wordpress/

Làm thế nào để loại bỏ jQuery Migrate khỏi WordPress?

Hướng dẫn loại bỏ jQuery Migrate Script khỏi WordPress một cách đơn giản

jQuery Migrate (jquery-migrate.js và jquery-migrate.min.js) là các tập tin JavaScript, hiện diện trên tất cả các trang của website WordPress. Chúng được tích hợp kể từ phiên bản WordPress 3.6 để hỗ trợ cho những theme sử dụng các phiên bản cũ hơn của jQuery. Nếu bạn có 10.000 khách truy cập vào website của mình thì tập tin jQuery Migrate sẽ phải được máy chủ web phân phát 10.000 lần. Nó không chỉ gây lãng phí băng thông mà còn làm tăng thời gian load web. Nếu đang sử dụng một theme hiện đại, bạn có thể loại bỏ jQuery Migrate một cách an toàn bởi vì nó hoàn toàn không cần thiết.

Loại bỏ jQuery Migrate khỏi WordPress

Có 2 cách khác nhau để làm điều này: sử dụng code snippet hoặc plugin. Tuy nhiên, trước khi loại bỏ jQuery Migrate, hãy chắc chắn không có plugin hay theme nào trên site của bạn cần tới nó.

Bạn có thể thử loại bỏ jQuery Migrate trước, sau đó kiểm tra lại xem tính năng hay giao diện của website có bị lỗi gì hay không?

  • Nếu không => không phải làm gì nữa.
  • Nếu có => thay thế plugin/ theme hoặc tìm cách khắc phục.

1. Sử dụng code snippet

Chèn đoạn code sau đây vào cuối file functions.php của theme hoặc child theme mà bạn đang sử dụng và lưu lại.

function remove_jquery_migrate( $scripts ) {
if ( ! is_admin() && isset( $scripts->registered[‘jquery’] ) ) {
$script = $scripts->registered[‘jquery’];
if ( $script->deps ) {
$script->deps = array_diff( $script->deps, array( ‘jquery-migrate’ ) );
}
}
}
add_action( ‘wp_default_scripts’, ‘remove_jquery_migrate’ );

2. Sử dụng plugin

Tất cả những gì các bạn cần làm là cài đặt và kích hoạt plugin có tên Remove jQuery Migrate.

Sau chèn code snippet hoặc cài đặt plugin, hãy xóa cache web và cache trình duyệt (nếu có) rồi kiểm tra kết quả. Thật đơn giản phải không nào?