Hướng dẫn tạo và tùy chỉnh biến thể trong WooCommerce

Như bạn cũng biết, các sản phẩm mà chúng ta gặp hàng ngày không phải cái nào cũng đơn giản là tính theo kg, tính theo số lượng mà có những sản phẩm mang trong mình nhiều thuộc tính khác nhau như: Dung lượng, RAM, tính năng… Để giải quyết điều đó, WooCommerce chính thức cho ra mắt tính năng Biến thể sản phẩm để giúp các website thương mại điện tử dễ dàng tùy biến hơn. Hãy cùng chúng tôi tìm hiểu trong bài viết này nhé!

Biến thể (Variations) trong WooCommerce là gì?

Biến thể (Variations) trong WooCommerce nói riêng hay trong thương mại điện tử nói chung chính là một hay nhiều dạng hình thái khác nhau của cùng một sản phẩm.

Ví dụ: Một chiếc giày Nike có nhiều biến thể như: Kích cỡ giày, màu sắc, chất liệu, giá thành, phiên bản…

Biến thể cho sản phẩm được sử dụng rất nhiều và rất rộng rãi trong thương mại điện tử.

Cách tạo sản phẩm có biến thể trong WooCommerce

Ở Woocommerce, bạn có thể thiết lập một sản phẩm có nhiều thuộc tính, sau đó cho nó hiển thị ra bên ngoài hoặc cho khách tùy chọn khi mua và nó cũng hỗ trợ bạn thiết lập giá sản phẩm riêng cho từng thuộc tính.

Thêm thuộc tính biến thể dạng Văn bản

Thuộc tính sản phẩm kiểu văn bản nghĩa là nó sẽ hiển thị ra phần thông tin thêm của sản phẩm và người dùng không thể lựa chọn, hoặc chúng ta không thể thiết lập giá cả và hình ảnh riêng cho nó được. Mục đích sử dụng của thuộc tính kiểu này là để khách hàng tham khảo, ví dụ như thông tin phần cứng của các thiết bị điện tử.

Trước hết, chúng ta vào phần Sản phẩm -> Các thuộc tính và tạo mới một thuộc tính loại văn bản.

Phần cho phép lưu trữ nghĩa là chúng ta cho phép WordPress tạo riêng một trang lưu trữ cho thuộc tính này với đường dẫn riêng để phân loại các sản phẩm theo thuộc tính, rất tốt cho SEO nên các bạn hãy chọn nó.

Bước cuối cùng là chúng ta khai báo thuộc tính này cho sản phẩm, bạn có thể sửa một sản phẩm đã có sẵn hoặc thêm mới một sản phẩm để thêm thuộc tính vào nó.

Phần dữ liệu sản phẩm, bạn chọn mục “Các thuộc tính“, sau đó chọn thuộc tính sản phẩm cần áp dụng và ấn nút thêm.

Sau khi thêm xong, chúng ta sẽ khai báo giá trị hiển thị của thuộc tính này, bạn có thể dùng dấu | để ngăn cách các giá trị với nhau. Khi lưu thuộc tính xong, nhớ ấn cập nhật sản phẩm để nó bắt đầu lưu lại. Bây giờ bạn ra ngoài xem sản phẩm sẽ thấy có thêm mục thông tin thêm và nơi đó sẽ hiển thị các thuộc tính dạng văn bản.

Thêm thuộc tính kiểu lựa chọn

Thuộc tính sản phẩm kiểu lựa chọn sẽ có một điểm khác biệt là chúng ta có thể nhập giá khác nhau cho mỗi thuộc tính, và khách hàng có thể chọn mua kiểu mà họ muốn. Giống như khi chúng ta mua quần áo trên mạng sẽ có phần chọn màu sắc, kích thước vậy.

Trước tiên, chúng ta cũng vào phần Sản phẩm -> Các thuộc tính và tạo ra thuộc tính kiểu lựa chọn.

Và một điểm khác biệt nữa của thuộc tính lựa chọn là bạn phải thiết lập chủng loại thuộc tính (nói cách khác là giá trị của thuộc tính). Hãy nhấp vào biểu tượng vòng tròn trên phần quản lý thuộc tính.

Và ở đây chúng ta cần khai báo sẵn các giá trị mà chúng ta sẽ sử dụng nó trên các sản phẩm.

Kế tiếp là hãy sửa hoặc tạo mới sản phẩm cần thêm thuộc tính. Phần dữ liệu sản phẩm, bạn hãy chọn là sản phẩm có biến thể.

Kế tiếp phần các thuộc tính, bạn thêm thuộc tính kiểu lựa chọn vừa thêm vào, nhớ thêm những giá trị thuộc tính cần sử dụng cho sản phẩm này và đánh dấu vào phần dùng cho nhiều biến thể.

Kế tiếp hãy qua mục các biến thể và thêm biến thể của sản phẩm này vào.

Sau đó bạn có thể thiết lập thông tin chi tiết của từng biến thể mà sản phẩm này đã được hỗ trợ bởi các thuộc tính.

mỗi biến thể bạn nhấp vào nó để thiết lập hình ảnh, giá cả, số lượng trong kho,…và nếu bạn muốn thêm nhiều biến thể khác chứ việc ấn nút thêm biến thể là được nhé.

Bạn có thể ấn nút thêm biến thể và làm tương tự với các biến thể khác mà bạn muốn.

Sau đó lưu biến thể lại và cập nhật sản phẩm. Kết quả ta có:

Hướng dẫn tùy chỉnh biến thể WooCommerce chi tiết nhất

Tùy chỉnh các biến thể sản phẩm WooCommerce có thể cải thiện đáng kể trải nghiệm mua sắm cho khách hàng của bạn và có khả năng tăng doanh số bán hàng.

Tại sao cần tùy chỉnh biến thể Woocommerce

Dưới đây MDIGI xin giới thiệu đến bạn các lợi ích khi tùy chỉnh các biến thể trên trang web thương mại điện tử WordPress của bạn:

• Cho phép bạn tạo giao diện trực quan hấp dẫn và thân thiện với người dùng hơn.
• Nó có thể giúp bạn đáp ứng các sở thích và yêu cầu riêng của từng khách hàng.
• Cho phép bạn quản lý hiệu quả khoảng không quảng cáo của mình bằng cách kết hợp các sản phẩm tương tự vào một danh sách duy nhất với nhiều tùy chọn.
• Cho phép tổ chức tốt hơn các sản phẩm trên trang web của bạn.
• Nó có thể giúp bạn bán thêm và bán chéo các sản phẩm có liên quan bằng cách làm nổi bật các mặt hàng bổ sung hoặc các phiên bản cao cấp hơn của cùng một sản phẩm.
• Nó có thể cải thiện tối ưu hóa công cụ tìm kiếm (SEO) của bạn.
• Nó đơn giản hóa quy trình quản lý sản phẩm, giúp dễ dàng thêm, chỉnh sửa và xóa các tùy chọn sản phẩm khi cần.
• Cho phép bạn thích ứng với việc thay đổi xu hướng thị trường, sở thích của khách hàng và phát hành sản phẩm mới, đảm bảo cửa hàng của bạn luôn cạnh tranh và phù hợp.

Cách tạo các sản phẩm có thể biến thể trong WooCommerce qua Code

Lưu ý rằng sản phẩm gốc cho sản phẩm biến đổi là bắt buộc để đặt thuộc tính, chẳng hạn như mảng thuộc tính/giá trị, SKU, giá và kho hàng.

Nếu bạn xem đoạn code, bạn có thể thấy rằng dữ liệu được lưu trữ trong một mảng đa chiều được định dạng. Hàm tôi đã tạo sẽ kiểm tra xem các giá trị của thuộc tính đã tồn tại chưa. Nếu không, nó sẽ tạo một mục nhập cho thuộc tính sản phẩm và sau đó đặt nó vào biến chính là sản phẩm.

( Lưu ý: Đặt đoạn mã này vào tệp function.php trong danh mục giao diện mà bạn đang sử dụng)

function create_product_variation( $product_id, $variation_data ){
$product = wc_get_product($product_id);
$variation_post = array(
        'post_title'  => $product->get_title(),
        'post_name'   => 'product-'.$product_id.'-variation',
  'post_status' => 'publish',
  'post_parent' => $product_id,
        'post_type'   => 'product_variation',
  'guid'    => $product->get_permalink()
);
$variation_id = wp_insert_post( $variation_post );
$variation = new WC_Product_Variation( $variation_id );
foreach ($variation_data['attributes'] as $attribute => $term_name )
{
  $taxonomy = 'pa_'.$attribute; 
  if( ! taxonomy_exists( $taxonomy ) ){
            register_taxonomy(
                $taxonomy,
                'product_variation',
                array(
                    'hierarchical' => false,
                    'label' => ucfirst( $attribute ),
                    'query_var' => true,
                    'rewrite' => array( 'slug' => sanitize_title($attribute) ), 
          )
      );
  }
  if( ! term_exists( $term_name, $taxonomy ) )
            wp_insert_term( $term_name, $taxonomy ); 
  $term_slug = get_term_by('name', $term_name, $taxonomy )->slug; 
        $post_term_names =  wp_get_post_terms( $product_id, $taxonomy, array('fields' => 'names') );
  if( ! in_array( $term_name, $post_term_names ) )
            wp_set_post_terms( $product_id, $term_name, $taxonomy, true );
        update_post_meta( $variation_id, 'attribute_'.$taxonomy, $term_slug );
}
if( ! empty( $variation_data['sku'] ) )
        $variation->set_sku( $variation_data['sku'] );
if( empty( $variation_data['sale_price'] ) ){
        $variation->set_price( $variation_data['regular_price'] );
} else {
        $variation->set_price( $variation_data['sale_price'] );
        $variation->set_sale_price( $variation_data['sale_price'] );
}
    $variation->set_regular_price( $variation_data['regular_price'] );
if( ! empty($variation_data['stock_qty']) ){
        $variation->set_stock_quantity( $variation_data['stock_qty'] );
        $variation->set_manage_stock(true);
        $variation->set_stock_status('');
} else {
        $variation->set_manage_stock(false);
}
    $variation->set_weight(''); 
    $variation->save(); 
}

Hàm create_product_variation() tạo biến thể sản phẩm mới cho sản phẩm WooCommerce. Chức năng này cho phép bạn lập trình tạo các biến thể sản phẩm cho cửa hàng WooCommerce của mình, điều này có thể hữu ích khi quản lý một số lượng lớn sản phẩm hoặc khi bạn cần tự động hóa quy trình tạo.

Các sản phẩm biến thể WooCommerce và kết quả đầu ra của chúng

Các sản phẩm có biến thể của WooCommerce cho phép bạn tạo một danh sách duy nhất với nhiều biến thể, chẳng hạn như màu sắc, kích thước hoặc chất liệu. Mỗi biến thể có các thuộc tính, mức độ tồn kho và tùy chọn giá riêng, mang lại trải nghiệm mua sắm được cá nhân hóa cho khách hàng.

Để làm việc với các sản phẩm có thể thay đổi trong WooCommerce theo cách lập trình, hãy sử dụng các đoạn mã chính này và các hàm được thêm vào tệp functions.php :

• wc_get_product($product_id): Hàm này truy xuất đối tượng sản phẩm cho một ID sản phẩm nhất định. Nó được sử dụng để truy cập dữ liệu của sản phẩm, chẳng hạn như thuộc tính, giá cả và mức tồn kho.
• wp_insert_post( $variation_post ): Chức năng WordPress này được sử dụng để tạo một bài đăng mới hoặc cập nhật một bài đăng hiện có. Trong bối cảnh của WooCommerce, nó có thể được sử dụng để tạo một biến thể sản phẩm mới.
• WC_Product_Variation( $variation_id ): Hàm này tạo một phiên bản của lớp WC_Product_Variation, đại diện cho một biến thể sản phẩm cụ thể. Bạn có thể sử dụng đối tượng này để lấy hoặc đặt các thuộc tính của biến thể sản phẩm, chẳng hạn như thuộc tính, giá và mức tồn kho.
• register_taxonomy: Chức năng WordPress này được sử dụng để tạo một phân loại mới, đây là cách tổ chức và phân loại nội dung trên trang web của bạn. Trong WooCommerce, các thuộc tính sản phẩm được lưu trữ dưới dạng phân loại tùy chỉnh.
• wp_insert_term: Chức năng WordPress này được sử dụng để tạo một thuật ngữ mới trong phân loại. Trong WooCommerce, các giá trị thuộc tính sản phẩm được lưu trữ dưới dạng điều khoản. Hàm này được sử dụng trong điều kiện IF để kiểm tra xem tên thuật ngữ có tồn tại hay không và nếu không, hãy tạo nó.
• $post_term_names : Biến này lưu trữ một mảng các tên thuật ngữ được liên kết với biến gốc sản phẩm. Nó được sử dụng để kiểm tra xem một thuật ngữ cụ thể đã được đặt cho sản phẩm hay chưa.
• wp_set_post_terms: Chức năng WordPress này được sử dụng để đặt hoặc cập nhật các điều khoản liên quan đến bài đăng. Trong WooCommerce, nó có thể được sử dụng để liên kết các giá trị thuộc tính (điều khoản) với một sản phẩm hoặc biến thể sản phẩm.
• update_post_meta: Chức năng WordPress này được sử dụng để cập nhật siêu dữ liệu được liên kết với một bài đăng. Trong WooCommerce, nó được sử dụng để lưu dữ liệu thuộc tính cho một biến thể sản phẩm.
• $variation->set_sku: Phương thức này của lớp WC_Product_Variation được sử dụng để đặt SKU (Đơn vị giữ hàng) cho một biến thể sản phẩm. SKU là mã định danh duy nhất cho từng biến thể sản phẩm, giúp quản lý hàng tồn kho.
• $variation_data[‘sale_price’]: Khóa mảng này chứa giá trị giá ưu đãi cho một biến thể sản phẩm. Nó có thể được sử dụng để đặt hoặc cập nhật giá bán của một biến thể sản phẩm cụ thể.
• $variation_data[‘stock_qty’]: Khóa mảng này chứa giá trị số lượng hàng trong kho cho một biến thể sản phẩm. Nó có thể được sử dụng để đặt hoặc cập nhật mức tồn kho của một biến thể sản phẩm cụ thể.

Cách tạo các sản phẩm biến Woocommerce với các thuộc tính bằng cách sử dụng plugin

Trong WooCommerce, bạn có thể tùy chỉnh các biến thể sản phẩm bằng các plugin cung cấp các tùy chọn và chức năng bổ sung.

Có một số plugin có sẵn để giúp bạn tùy chỉnh các biến thể sản phẩm trong WooCommerce. Một số lựa chọn phổ biến bao gồm:

• Variation Swatches for WooCommerce
• WooCommerce Additional Variation Images
• YITH WooCommerce Color and Label Variations
• WPB Product Slider for WooCommerce
• Improved Variable Product Attributes for WooCommerce
• WooCommerce Product Variations Matrix

Trong bài viết này, chúng tôi sẽ sử dụng Variation Swatches for WooCommerce.

Dưới đây là hướng dẫn từng bước về cách tạo các sản phẩm biến WooCommerce với các thuộc tính bằng cách sử dụng plugin Variation Swatches cho WooCommerce:

Bước 1: Cài đặt và Kích hoạt Plugin

• Chuyển đến bảng điều khiển WordPress của bạn
• Điều hướng đến ‘Plugin‘ > ‘Thêm mới‘
• Tìm kiếm ‘Variation Swatches for WooCommerce‘

• Nhấp vào ‘Cài đặt ngay‘, sau đó kích hoạt plugin

Bước 2: Định cấu hình Cài đặt plugin

• Chuyển đến ‘Cài đặt‘

• Định cấu hình cài đặt theo nhu cầu của bạn. Ví dụ: bạn có thể điều chỉnh kiểu mẫu, kích thước và hình dạng

Khi đăng ký bất kỳ gói hosting nào tại MDIGI, bạn đều nhận được Plugin Variation Swatches for WooCommerce bản Premium với rất nhiều tính năng cao cấp.

Bước 3: Tạo hoặc Chỉnh sửa Sản phẩm Biến đổi

• Chuyển đến ‘Sản phẩm‘ > ‘Thêm mới’ để tạo sản phẩm mới hoặc nhấp vào ‘Chỉnh sửa‘ bên dưới sản phẩm hiện có
• Trong phần “Dữ liệu sản phẩm“, hãy chọn “Sản phẩm thay đổi” từ menu thả xuống

Bước 4: Thêm thuộc tính

• Trong tab “Thuộc tính“, hãy thêm các thuộc tính bạn muốn sử dụng cho các biến thể (ví dụ: màu sắc, kích thước)
• Nhấp vào ‘Thêm‘, điền chi tiết thuộc tính và chọn hộp ‘Được sử dụng cho các biến thể‘

• Nhấp vào Lưu thuộc tính

Bước 5: Tạo các biến thể

• Chuyển đến tab ‘Biến thể‘ và nhấp vào ‘Tạo biến thể từ tất cả các thuộc tính‘ để tự động tạo tất cả các biến thể có thể

• Định cấu hình chi tiết của từng biến thể, bao gồm giá, tình trạng còn hàng và hình ảnh

Bước 6: Lưu thay đổi của bạn

• Sau khi định cấu hình các biến thể sản phẩm của bạn, hãy nhấp vào ‘Cập nhật‘ hoặc ‘Xuất bản‘ để lưu các thay đổi của bạn

• Bây giờ bạn có thể thấy các biến thể bạn vừa tạo.

Lưu ý khi tùy chỉnh các biến thể sản phẩm WooCommerce

Tùy chỉnh các biến thể sản phẩm WooCommerce có thể cải thiện đáng kể trải nghiệm người dùng và tăng doanh số bán hàng trên website thương mại điện tử WordPress của bạn. 

Để tận dụng tối đa việc tùy chỉnh các biến thể sản phẩm, hãy tham khảo các lưu ý sau:

• Lập kế hoạch và cấu trúc cẩn thận các thuộc tính và biến thể sản phẩm của bạn để đảm bảo rằng chúng được tổ chức tốt và dễ hiểu.
• Tạo hình ảnh chất lượng cao, rõ ràng cho từng biến thể sản phẩm, giới thiệu sản phẩm từ các góc độ khác nhau và làm nổi bật các tính năng độc đáo của sản phẩm.
• Đảm bảo rằng hình ảnh sản phẩm của bạn được tối ưu hóa để sử dụng trên web.
• Sử dụng các quy ước đặt tên nhất quán cho các biến thể sản phẩm của bạn, đảm bảo rằng các thuộc tính và tùy chọn tương tự được đặt tên giống nhau trên tất cả các sản phẩm.
• Định cấu hình giá cả và mức tồn kho cho từng biến thể sản phẩm một cách chính xác, đảm bảo rằng giá cả cạnh tranh và mức tồn kho được cập nhật.
• Thường xuyên kiểm tra và xem xét các biến thể sản phẩm và tùy chọn tùy chỉnh của bạn, đảm bảo chúng hoạt động chính xác và dễ sử dụng.
• Sử dụng các plugin và tiện ích mở rộng của WooCommerce để tăng cường chức năng biến thể sản phẩm khi cần.

Lỗi thường gặp với các biến thể sản phẩm Woocommerce và cách khắc phục

Các biến thể sản phẩm WooCommerce đôi khi có thể gặp sự cố có thể ảnh hưởng đến chức năng hoặc trải nghiệm người dùng trên website của bạn. Dưới đây là một số vấn đề phổ biến với các biến thể sản phẩm WooCommerce và các giải pháp tương ứng của chúng:

Vấn đề #1: Các biến thể không hiển thị hoặc xuất hiện chính xác

Đôi khi bạn đặt các biến thể, nhưng chúng không xuất hiện chính xác. Lý do cho điều này có thể khác nhau, nhưng bạn có thể cân nhắc thực hiện các thao tác sau để khắc phục:

Giải pháp:

Đảm bảo rằng bạn đã thiết lập chính xác các thuộc tính và biến thể của sản phẩm. Các thuộc tính phải được thêm vào tab “Thuộc tính” và sau đó, các biến thể sẽ được tạo trong tab “Biến thể” bên dưới mỗi sản phẩm.

Kiểm tra xem có bất kỳ xung đột chủ đề hoặc plugin nào không bằng cách tắt từng plugin khác và tạm thời chuyển sang chủ đề mặc định của WordPress. Nếu sự cố đã được giải quyết, hãy xác định plugin hoặc chủ đề xung đột và tìm giải pháp thay thế phù hợp.

Vấn đề #2: Ajax Add-To-Cart không hoạt động đối với các sản phẩm biến đổi

Đôi khi tính năng thêm vào giỏ hàng không hoạt động đối với các sản phẩm có thể thay đổi.

Giải pháp:

Bạn có thể sửa nó bằng cách làm như sau:

Đảm bảo rằng theme của bạn tương thích với WooCommerce và hỗ trợ chức năng thêm vào giỏ hàng AJAX cho các sản phẩm khác nhau. Hoặc thêm plugin bổ sung vào giỏ hàng AJAX.

Kiểm tra xung đột plugin có thể gây ra sự cố.

Vấn đề #3: Các thay đổi đối với các biến thể không được lưu

Đôi khi bạn không thể lưu các biến thể mới.

Giải pháp:

Đây là cách bạn có thể khắc phục nó:

Đảm bảo môi trường Hosting của bạn đáp ứng các yêu cầu tối thiểu của WooCommerce, bao gồm phiên bản PHP và giới hạn bộ nhớ. Tôi khuyên bạn nên sử dụng Hosting tại MDIGI vì chúng tôi hỗ trợ tất cả các phiên bản PHP và có phần cấu hình mở rộng.

Tăng giá trị max_input_vars của máy chủ trong tệp php.ini của bạn, vì giá trị thấp có thể gây ra sự cố khi lưu một số lượng lớn biến thể.

Vấn đề #4: Các vấn đề về hiệu suất với số lượng lớn các biến thể

Đôi khi, bạn gặp phải các vấn đề về hiệu suất sau khi đặt biến thể cho sản phẩm của mình.

Giải pháp:

Đây là cách bạn có thể cải thiện hiệu suất cửa hàng của mình;

• Sử dụng plugin tạo bộ nhớ đệm, chẳng hạn như WP Rocket hoặc W3 Total Cache, để cải thiện hiệu suất trang web của bạn.
• Tối ưu hóa cơ sở dữ liệu của bạn thường xuyên để giữ cho nó sạch sẽ và hiệu quả.
• Cân nhắc sử dụng plugin chuyên xử lý số lượng lớn biến thể, chẳng hạn như Ma trận biến thể sản phẩm WooCommerce hoặc Mẫu biến thể cho WooCommerce.

Lời kết

Tóm lại, việc tạo các biến thể sản phẩm WooCommerce tùy chỉnh là một cách rất hữu hiệu để tăng trải nghiệm khi mua sắm trên trang website thương mại điện tử WordPress. Từ đó giúp tăng chuyển đổi, tăng doanh thu và giúp doanh nghiệp của bạn phát triển.

Nếu còn bất cứ thắc mắc nào, vui lòng để lại bình luận hoặc liên hệ với chúng tôi để được giải đáp.

Cám ơn bạn đã đọc bài viết này!