Output product HTML in custom shortcode for WooCommerce

Question

EDIT: I've simplified my code considerably to see if I can actually get HTML to ouput, but no luck.

Here is the simplified version, removing all my custom HTML and only adding <div class="test"></div> to see if I can get my shortcode to output HTML, which it does not.

//custom shortcodes
function product_snippet( $atts ) {

// Attributes
$atts = shortcode_atts(
    array(
        'id' => '',
        'snippet' => '',
    ),
    $atts,
    'product_snippet'
);

return $product = wc_get_product($atts['id']);
return $product_img = $product->get_image();
return $product_title = $product->get_title();
return $product_link = get_permalink($atts['id']);
return $children = $product->get_children();
return $children_array = array();
echo "<div class='test'></div>";


}
add_shortcode( 'product_snippet', 'product_snippet' );

This stops the site from crashing, but not HTML is outputted.

ORIGINAL POST: I am trying to write a custom shortcode so that my client will be more easily able to edit their website. I've added the following code to my WordPress's functions.php file and I can't determine why it isn't working.

The idea is to input a grouped product's ID into the short code, and it will pull up the product's Title, Image, and all child products.

function product_snippet( $atts ) {
$a = shortcode_atts( array (
        'id',
        'snippet',
    ), $atts);

$product = wc_get_product($a['id']);
$product_img = $product->get_image();
$product_title = $product->get_title();
$product_link = get_permalink($a['id']);
$children = $product->get_children();

//initialize array so that child products can be sorted by price.
$children_array = array();

//Assign each child product to its price in array so that child products can be sorted by price in HTML.
foreach ($children as $key => $value) {
        $children_array[$value] = wc_get_product($value)->get_price();

    };
    asort($children_array);

return '<div class="main_pro">

            <div class="left-sd">' . do_shortcode('[product id="' . $a['id'] . '"]') . '</div>
            <div class="right-sd">
            <div class="info">
                <h2>'. $product_title . '</h2>
                <p>' . $a['snippet'] . '&nbsp;<a href="' . $product_link . '">More Info &gt;&gt;</a></p>
            </div>
                <ul>
                        ' . foreach ($children_array as $key => $value) {
                            $option = wc_get_product($key);
                                $option_title = $option->post->post_title; 
                        . ' 
                        <li>
                                <div id="outer-bar">
                                    <div class="bar-l">
                                            ' . $option_title;
                                            if ($option->get_attribute('pa_pack-size')) {
                                                strval(wc_get_product($key)->get_attribute('pa_pack-size'));
                                                .'<br/>
                                                <span class="small_pz">

                                                        ' . "$" . strval(round(($option->get_price() / intval($option->get_attribute('pa_pack-size'))), 2)) . " per tray - SAVE $" . strval(round(($product->get_price() * $option->get_price() -  $option->get_price()), 2)); . '
                                                </span>
                                            ' . }
                                    . '</div>

                                    <div class="bar-r">' . do_shortcode('[add_to_cart id="' . $key . '"]'); . '</div>
                             </div>
                        </li>
                        ' . }
                . ' </ul>
            </div>
    </div>';
};
add_shortcode( 'product_snippet', 'product_snippet' );

Assume I have my opening and closing <?php ?> tags. I don't write in PHP a lot so I apologize if my code is janky. If I can get this closer to best practices (I don't think my concatenation looks right) I'm open to feedback.

Answer 1

I have changed a little your code to make it work. This is just an example that you can complete. Try it and let me know:

//custom shortcodes
if( !function_exists('product_snippet') ) {    

    function product_snippet( $atts ) {

        // Attributes
        extract( shortcode_atts( 
            array(
                'id' => '', // You will use $id to get the value of this attribute
                'snippet' => '' // You will use $snippet to get the value of this attribute
            ), 
            $atts
        ));

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

        // Displays go here
        return '<div class="test">'.$product->get_image().'<a href="'.get_permalink( $id ).'">'.$product->get_title().'</a></div>';

    }

    add_shortcode( 'product_snippet', 'product_snippet' );
}

You should get an html output this time …

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

Answer 2

There was a bunch of errors in the code. Try this.

function product_snippet($atts)
{
    $a = shortcode_atts(array(
        'id',
        'snippet',
    ), $atts);

    $product = wc_get_product($a['id']);
    $product_img = $product->get_image();
    $product_title = $product->get_title();
    $product_link = get_permalink($a['id']);
    $children = $product->get_children();

//initialize array so that child products can be sorted by price.
    $children_array = array();

//Assign each child product to its price in array so that child products can be sorted by price in HTML.
    foreach ($children as $key => $value) {
        $children_array[$value] = wc_get_product($value)->get_price();

    };
    asort($children_array);


    $string = '<div class="main_pro">

            <div class="left-sd">' . do_shortcode('[product id="' . $a['id'] . '"]') . '</div>
            <div class="right-sd">
            <div class="info">
                <h2>' . $product_title . '</h2>
                <p>' . $a['snippet'] . '&nbsp;<a href="' . $product_link . '">More Info &gt;&gt;</a></p>
            </div>
                <ul>';
    foreach ($children_array as $key => $value) {
        $option = wc_get_product($key);
        $option_title = $option->post->post_title;
        $string .= ' 
                        <li>
                                <div id="outer-bar">
                                    <div class="bar-l">
                                            ' . $option_title;
        if ($option->get_attribute('pa_pack-size')) {
            strval(wc_get_product($key)->get_attribute('pa_pack-size'));
            $string .= '<br/>
                                                <span class="small_pz">

                                                        ' . "$" . strval(round(($option->get_price() / intval($option->get_attribute('pa_pack-size'))), 2)) . " per tray - SAVE $" . strval(round(($product->get_price() * $option->get_price() - $option->get_price()), 2)) .
                '</span>';
        }

        $string .= '</div>

                                    <div class="bar-r">' . do_shortcode('[add_to_cart id="' . $key . '"]') . '</div>
                             </div>
                        </li>
                        ';
    }
    $string .= ' </ul>
            </div>
    </div>';
    return $string;
}


add_shortcode('product_snippet', 'product_snippet');