WooCommerce获得所有产品变化

Question

我想手动构建变体选择器：

例如，某些产品具有以下变化：

颜色：红色，绿色，蓝色

尺寸：小，中，大，

当我运行此代码时：

$product->get_available_variations();

我得到3个阵列返回：

    [
{
    "attributes": {
        "attribute_pa_color": "red",
        "attribute_pa_size": ""
    },
    "availability_html": "",
    "backorders_allowed": false,
    "dimensions": {
        "length": "",
        "width": "",
        "height": ""
    },
    "dimensions_html": "N/A",
    "display_price": 20,
    "display_regular_price": 20,
    "image": {
        "title": "vneck-tee-2.jpg",
        "caption": "",
        "url": "http://localhost/xampp/wp/wp-content/uploads/2020/09/vneck-tee-2.jpg",
        "alt": "",
        "src": "http://localhost/xampp/wp/wp-content/uploads/2020/09/vneck-tee-2-600x599.jpg",
        "srcset": "http://localhost/xampp/wp/wp-content/uploads/2020/09/vneck-tee-2-600x599.jpg 600w, http://localhost/xampp/wp/wp-content/uploads/2020/09/vneck-tee-2-450x449.jpg 450w, http://localhost/xampp/wp/wp-content/uploads/2020/09/vneck-tee-2-100x100.jpg 100w, http://localhost/xampp/wp/wp-content/uploads/2020/09/vneck-tee-2-300x300.jpg 300w, http://localhost/xampp/wp/wp-content/uploads/2020/09/vneck-tee-2-80x80.jpg 80w, http://localhost/xampp/wp/wp-content/uploads/2020/09/vneck-tee-2-768x767.jpg 768w, http://localhost/xampp/wp/wp-content/uploads/2020/09/vneck-tee-2.jpg 801w",
        "sizes": "(max-width: 600px) 100vw, 600px",
        "full_src": "http://localhost/xampp/wp/wp-content/uploads/2020/09/vneck-tee-2.jpg",
        "full_src_w": 801,
        "full_src_h": 800,
        "gallery_thumbnail_src": "http://localhost/xampp/wp/wp-content/uploads/2020/09/vneck-tee-2-100x100.jpg",
        "gallery_thumbnail_src_w": 100,
        "gallery_thumbnail_src_h": 100,
        "thumb_src": "http://localhost/xampp/wp/wp-content/uploads/2020/09/vneck-tee-2-450x449.jpg",
        "thumb_src_w": 450,
        "thumb_src_h": 449,
        "src_w": 600,
        "src_h": 599
    },
    "image_id": 1993,
    "is_downloadable": false,
    "is_in_stock": true,
    "is_purchasable": true,
    "is_sold_individually": "no",
    "is_virtual": false,
    "max_qty": "",
    "min_qty": 1,
    "price_html": "<span class=\"price\"><span class=\"woocommerce-Price-amount amount\"><bdi><span class=\"woocommerce-Price-currencySymbol\">&pound;</span>20.00</bdi></span></span>",
    "sku": "woo-vneck-tee-red",
    "variation_description": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis orci ac odio dictum tincidunt. Donec ut metus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed luctus, dui eu sagittis sodales, nulla nibh sagittis augue, vel porttitor diam enim non metus. Vestibulum aliquam augue neque. Phasellus tincidunt odio eget ullamcorper efficitur. Cras placerat ut turpis pellentesque vulputate. Nam sed consequat tortor. Curabitur finibus sapien dolor. Ut eleifend tellus nec erat pulvinar dignissim. Nam non arcu purus. Vivamus et massa massa.</p>\n",
    "variation_id": 1982,
    "variation_is_active": true,
    "variation_is_visible": true,
    "weight": "",
    "weight_html": "N/A"
},
{
    "attributes": {
        "attribute_pa_color": "green",
        "attribute_pa_size": ""
    },
    "availability_html": "",
    "backorders_allowed": false,
    "dimensions": {
        "length": "",
        "width": "",
        "height": ""
    },
    "dimensions_html": "N/A",
    "display_price": 20,
    "display_regular_price": 20,
    "image": {
        "title": "vnech-tee-green-1.jpg",
        "caption": "",
        "url": "http://localhost/xampp/wp/wp-content/uploads/2020/09/vnech-tee-green-1.jpg",
        "alt": "",
        "src": "http://localhost/xampp/wp/wp-content/uploads/2020/09/vnech-tee-green-1-600x600.jpg",
        "srcset": "http://localhost/xampp/wp/wp-content/uploads/2020/09/vnech-tee-green-1-600x600.jpg 600w, http://localhost/xampp/wp/wp-content/uploads/2020/09/vnech-tee-green-1-450x450.jpg 450w, http://localhost/xampp/wp/wp-content/uploads/2020/09/vnech-tee-green-1-100x100.jpg 100w, http://localhost/xampp/wp/wp-content/uploads/2020/09/vnech-tee-green-1-300x300.jpg 300w, http://localhost/xampp/wp/wp-content/uploads/2020/09/vnech-tee-green-1-80x80.jpg 80w, http://localhost/xampp/wp/wp-content/uploads/2020/09/vnech-tee-green-1-768x768.jpg 768w, http://localhost/xampp/wp/wp-content/uploads/2020/09/vnech-tee-green-1.jpg 800w",
        "sizes": "(max-width: 600px) 100vw, 600px",
        "full_src": "http://localhost/xampp/wp/wp-content/uploads/2020/09/vnech-tee-green-1.jpg",
        "full_src_w": 800,
        "full_src_h": 800,
        "gallery_thumbnail_src": "http://localhost/xampp/wp/wp-content/uploads/2020/09/vnech-tee-green-1-100x100.jpg",
        "gallery_thumbnail_src_w": 100,
        "gallery_thumbnail_src_h": 100,
        "thumb_src": "http://localhost/xampp/wp/wp-content/uploads/2020/09/vnech-tee-green-1-450x450.jpg",
        "thumb_src_w": 450,
        "thumb_src_h": 450,
        "src_w": 600,
        "src_h": 600
    },
    "image_id": 1994,
    "is_downloadable": false,
    "is_in_stock": true,
    "is_purchasable": true,
    "is_sold_individually": "no",
    "is_virtual": false,
    "max_qty": "",
    "min_qty": 1,
    "price_html": "<span class=\"price\"><span class=\"woocommerce-Price-amount amount\"><bdi><span class=\"woocommerce-Price-currencySymbol\">&pound;</span>20.00</bdi></span></span>",
    "sku": "woo-vneck-tee-green",
    "variation_description": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis orci ac odio dictum tincidunt. Donec ut metus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed luctus, dui eu sagittis sodales, nulla nibh sagittis augue, vel porttitor diam enim non metus. Vestibulum aliquam augue neque. Phasellus tincidunt odio eget ullamcorper efficitur. Cras placerat ut turpis pellentesque vulputate. Nam sed consequat tortor. Curabitur finibus sapien dolor. Ut eleifend tellus nec erat pulvinar dignissim. Nam non arcu purus. Vivamus et massa massa.</p>\n",
    "variation_id": 1983,
    "variation_is_active": true,
    "variation_is_visible": true,
    "weight": "",
    "weight_html": "N/A"
},
{
    "attributes": {
        "attribute_pa_color": "blue",
        "attribute_pa_size": ""
    },
    "availability_html": "",
    "backorders_allowed": false,
    "dimensions": {
        "length": "",
        "width": "",
        "height": ""
    },
    "dimensions_html": "N/A",
    "display_price": 15,
    "display_regular_price": 15,
    "image": {
        "title": "vnech-tee-blue-1.jpg",
        "caption": "",
        "url": "http://localhost/xampp/wp/wp-content/uploads/2020/09/vnech-tee-blue-1.jpg",
        "alt": "",
        "src": "http://localhost/xampp/wp/wp-content/uploads/2020/09/vnech-tee-blue-1-600x600.jpg",
        "srcset": "http://localhost/xampp/wp/wp-content/uploads/2020/09/vnech-tee-blue-1-600x600.jpg 600w, http://localhost/xampp/wp/wp-content/uploads/2020/09/vnech-tee-blue-1-450x450.jpg 450w, http://localhost/xampp/wp/wp-content/uploads/2020/09/vnech-tee-blue-1-100x100.jpg 100w, http://localhost/xampp/wp/wp-content/uploads/2020/09/vnech-tee-blue-1-300x300.jpg 300w, http://localhost/xampp/wp/wp-content/uploads/2020/09/vnech-tee-blue-1-80x80.jpg 80w, http://localhost/xampp/wp/wp-content/uploads/2020/09/vnech-tee-blue-1-768x768.jpg 768w, http://localhost/xampp/wp/wp-content/uploads/2020/09/vnech-tee-blue-1.jpg 800w",
        "sizes": "(max-width: 600px) 100vw, 600px",
        "full_src": "http://localhost/xampp/wp/wp-content/uploads/2020/09/vnech-tee-blue-1.jpg",
        "full_src_w": 800,
        "full_src_h": 800,
        "gallery_thumbnail_src": "http://localhost/xampp/wp/wp-content/uploads/2020/09/vnech-tee-blue-1-100x100.jpg",
        "gallery_thumbnail_src_w": 100,
        "gallery_thumbnail_src_h": 100,
        "thumb_src": "http://localhost/xampp/wp/wp-content/uploads/2020/09/vnech-tee-blue-1-450x450.jpg",
        "thumb_src_w": 450,
        "thumb_src_h": 450,
        "src_w": 600,
        "src_h": 600
    },
    "image_id": 1995,
    "is_downloadable": false,
    "is_in_stock": true,
    "is_purchasable": true,
    "is_sold_individually": "no",
    "is_virtual": false,
    "max_qty": "",
    "min_qty": 1,
    "price_html": "<span class=\"price\"><span class=\"woocommerce-Price-amount amount\"><bdi><span class=\"woocommerce-Price-currencySymbol\">&pound;</span>15.00</bdi></span></span>",
    "sku": "woo-vneck-tee-blue",
    "variation_description": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis orci ac odio dictum tincidunt. Donec ut metus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed luctus, dui eu sagittis sodales, nulla nibh sagittis augue, vel porttitor diam enim non metus. Vestibulum aliquam augue neque. Phasellus tincidunt odio eget ullamcorper efficitur. Cras placerat ut turpis pellentesque vulputate. Nam sed consequat tortor. Curabitur finibus sapien dolor. Ut eleifend tellus nec erat pulvinar dignissim. Nam non arcu purus. Vivamus et massa massa.</p>\n",
    "variation_id": 1984,
    "variation_is_active": true,
    "variation_is_visible": true,
    "weight": "",
    "weight_html": "N/A"
}

]

我可以首先看到：

"attributes": {
    "attribute_pa_color": "red",
    "attribute_pa_size": ""

为什么大小属性是空的，我怎么知道该产品具有以下变化？

color: red, green, blue

size: small, medium, large

如何

Answer 1

以下是WooCommerce如何获取此数据以创建上图中的下拉列表的整个代码。

$product = new WC_Product_Variable(6798817); // Variable product ID. // Get Available variations?
$get_variations = count( $product->get_children() ) <= apply_filters( 'woocommerce_ajax_variation_threshold', 30, $product );
$available_variations = $get_variations ? $product->get_available_variations() : false;
$attributes = $product->get_variation_attributes();
$attribute_keys  = array_keys( $attributes );
$variations_json = wp_json_encode( $available_variations );
$variations_attr = function_exists( 'wc_esc_json' ) ? wc_esc_json( $variations_json ) : _wp_specialchars( $variations_json, ENT_QUOTES, 'UTF-8', true );

?>

<form class="variations_form cart" action="<?php echo esc_url( apply_filters( 'woocommerce_add_to_cart_form_action', $product->get_permalink() ) ); ?>" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->get_id() ); ?>" data-product_variations="<?php echo $variations_attr; // WPCS: XSS ok. ?>">
    <?php if ( empty( $available_variations ) && false !== $available_variations ) : ?>
        <p class="stock out-of-stock"><?php echo esc_html( apply_filters( 'woocommerce_out_of_stock_message', __( 'This product is currently out of stock and unavailable.', 'woocommerce' ) ) ); ?></p>
    <?php else : ?>
        <table class="variations" cellspacing="0">
            <tbody>
                <?php foreach ( $attributes as $attribute_name => $options ) : ?>
                    <tr>
                        <th class="label"><label for="<?php echo esc_attr( sanitize_title( $attribute_name ) ); ?>"><?php echo wc_attribute_label( $attribute_name ); // WPCS: XSS ok. ?></label></th>
                        <td class="value">
                            <?php
                                wc_dropdown_variation_attribute_options(
                                    array(
                                        'options'   => $options,
                                        'attribute' => $attribute_name,
                                        'product'   => $product,
                                    )
                                );
                                echo end( $attribute_keys ) === $attribute_name ? wp_kses_post( apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations" href="#">' . esc_html__( 'Clear', 'woocommerce' ) . '</a>' ) ) : '';
                            ?>
                        </td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    <?php endif; ?>
</form>