Question

我正在使用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显示在产品标题下方，或者帮助我提供一些新代码吗？

非常感谢！

Answer 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
}

这些代码段应添加到您的子主题的functions.php中，或通过代码段之类的插件添加。

WooCommerce显示产品版本SKU

1 个答案: