WooCommerce 展示产品变体 SKU答案

【问题标题】：WooCommerce Display Product Variations SKUWooCommerce 展示产品变体 SKU
【发布时间】：2020-10-17 23:27:14
【问题描述】：

我正在使用 WooCommerce，并尝试在产品页面上的产品标题下方显示产品变体 SKU。我设法找到了这段代码，该代码有效，但 SKU 显示在错误的位置：

// Display product variations SKU and GTIN info
add_filter( 'woocommerce_available_variation', 'display_variation_sku_and_gtin', 20, 3 );
function display_variation_sku_and_gtin( $variation_data, $product, $variation ) {
$html = ''; // Initializing

// Inserting SKU
if( ! empty( $variation_data['sku'] ) ){
    $html .= '</div><div class="woocommerce-variation-sku">' . __('SKU:') . ' ' . $variation_data['sku'];
}

// Using the variation description to add dynamically the SKU and the GTIN
$variation_data['variation_description'] .= $html;

return $variation_data;
}

谁能帮助更改此代码的顺序，使 SKU 显示在产品标题下方，或者帮助我提供一些新代码？

非常感谢！

【问题讨论】：

标签： wordpress woocommerce variations sku

【解决方案1】：

WooCommerce 不提供特定的操作挂钩，可让您在产品标题之后添加任何内容，这也利用了当前代码中的挂钩等变体数据。您可以通过 JavaScript/jQuery 在产品标题后添加一个元素来解决此问题。

您希望此元素根据所选变体动态更改。由于您无法直接在操作挂钩中访问变体数据，因此您必须检查 WooCommerce 用于存储所选变体 ID 的隐藏输入 variation_id。然后在每次输入更改时使用 AJAX 来检索属于此变体 id 的变体 SKU。

add_action( 'woocommerce_before_single_product', 'show_variation_sku_underneath_product_title' );
function show_variation_sku_underneath_product_title() {

    global $product;

    if ( $product->is_type('variable') ) {
        ?>
        <script>
        jQuery(document).ready(function($) {     
            $('input.variation_id').change( function(){
                if( '' != $('input.variation_id').val() ) {

                    jQuery.ajax( {

                        url: '<?php echo admin_url( 'admin-ajax.php'); ?>',
                        type: 'post',
                        data: { 
                            action: 'get_variation_sku', 
                            variation_id: $('input.variation_id').val()
                        },
                        success: function(data) {
                            $('h1.product_title').siblings('.variation-sku').remove();
                            if(data.length > 0) {
                                $('h1.product_title').after('<p class="variation-sku">' + data + '</p>');
                            }
                        }
                    });

                }
            });
        });
        </script>
    <?php
    }
}
    
add_action('wp_ajax_get_variation_sku' , 'get_variation_sku');
add_action('wp_ajax_nopriv_get_variation_sku','get_variation_sku');
function get_variation_sku() {

    $variation_id = intval( $_POST['variation_id'] );
    $sku = '';

    if ( $product = wc_get_product( $variation_id ) ) $sku = $product->get_sku();
    echo $sku;

    wp_die(); // this is required to terminate immediately and return a proper response
}

这些代码 sn-ps 应该添加到您的子主题的 functions.php 中，或者通过像 Code Snippets 这样的插件。

【讨论】：