Display Some Data In A Specific Html Structure For Simple And Variable Products

In WooCommerce, I would like to create a function which outputs a simple 'list' of data, for each variation or a variable product. Or, if a simple product, then the details of that

Solution 1:

Here is a way to display some specific formatted product data for simple and variable products:

// Utility funtion: getting and formtting product datafunctionformat_product_data_output($the_id){
    $empty =  __( '<em>(empty)</em>', 'woocommerce' );

    // Get an instance of the WC_Product_Variation object$product = wc_get_product( $the_id );

    // Only wc_get_price_to_display() respect if product is to be displayed with or without including taxes$price = wc_price( wc_get_price_to_display( $product, array( 'price' => $product->get_regular_price() ) ) );
    $sale_price = wc_get_price_to_display( $product, array( 'price' => $product->get_sale_price() ) );
    $sale_price = ! empty( $sale_price ) ? wc_price($sale_price) : $empty;

    $size = $product->get_attribute( 'pa_size' );
    $size = ! empty( $size ) ? get_term_by( 'slug', $size, 'pa_size' )->name : $empty;

    $stock_qty = $product->get_stock_quantity();
    $stock_qty = ! empty( $stock_qty ) ? $stock_qty : $empty;

    $output = '
    <ul>
        <li class="fs-data-price">'.$price.'</li>
        <li class="fs-data-size">Size: '.$size.'</li>
        <li class="fs-data-sale">'.$sale_price.' Preferred Customer Price</li>
        <li class="fs-data-stock">Quantity in Stock: '.$stock_qty.'</li>
    </ul>';

    return$output;
}

//
add_action( 'woocommerce_after_single_product', 'custom_table_after_single_product' );
functioncustom_table_after_single_product(){
    global$product;

    $output = '<div class="fs-product-data-wrapper">';

    // Variable productsif( $product->is_type('variable'))
    {
        // Get available variations in the variable product$available_variations = $product->get_available_variations();

        if( count($available_variations) > 0 ){
            foreach( $available_variationsas$variation )
                $output .= format_product_data_output( $variation['variation_id'] );
        }
    }
    // Simple productselseif( $product->is_type('simple'))
    {
        $output .= format_product_data_output( $product->get_id() );
    }
    elsereturn; // Exitecho$output .= '</div>'; // Display
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

You will have to manage CSS (and may be some little details). Anything needed is mostly there.

Solution 2:

If you set size attribute like on my screen

And then create simple or variable product with attribute size, than you can add code to functions.php file of your active child theme (or active theme)

/**
 * Display list data after single product
 */
function display_list_after_single_product() {
    $product_data = get_product_data();

    ?>
    <divclass="fs-product-data-wrapper"><?phpif ( isset( $product_data['price'] ) ) {
            ?><ul><?php?><liclass="fs-data-price"><?phpecho$product_data['price'] ?></li><liclass="fs-data-size"><?phpecho$product_data['size'] ?></li><liclass="fs-data-sale"><?phpecho$product_data['sale_price'] ?></li><liclass="fs-data-stock"><?phpecho$product_data['stock'] ?></li></ul><?php
        } else {
            foreach ( $product_dataas$data ) {
                ?><ul><?php?><liclass="fs-data-price"><?phpecho$data['price'] ?></li><liclass="fs-data-size"><?phpecho$data['size'] ?></li><liclass="fs-data-sale"><?phpecho$data['sale_price'] ?></li><liclass="fs-data-stock"><?phpecho$data['stock'] ?></li></ul><?php
            }
        }
    ?></div><?php

}
add_action( 'woocommerce_after_single_product', 'display_list_after_single_product' );

/**
 * Collect product data depending on product type
 *
 * @return array $product_arr
 */functionget_product_data() {
    global$product;
    if( $product->is_type( 'variable' ) ) {
        $variation_arr = [];
        $imp_variations = $product->get_available_variations();
        foreach ( $imp_variationsas$key => $prod_var_arr ) {

            $variation_obj = new WC_Product_variation($prod_var_arr["variation_id"]);
            // collect reqired variation data to array$product_arr[] = [
                'price'      => $variation_obj->get_regular_price(),
                'sale_price' => $variation_obj->get_sale_price(),
                'size'       => $prod_var_arr['attributes']['attribute_pa_size'],
                'stock'      => $variation_obj->get_stock_quantity(),
            ];
        }
    } elseif( $product->is_type( 'simple' ) ) {
        $terms = $product->get_attributes()["pa_size"]->get_terms();

        $product_arr = [
            'price'      => $product->get_regular_price(),
            'sale_price' => $product->get_sale_price(),
            'size'       => $terms[0]->name,
            'stock'      => $product->get_stock_quantity(),
        ];
    }

    return$product_arr;
}

And you will get list below of product page exactly like you asking about.