Woocommerce Question posted in
The official Woocommerce documentation can be found here.

WooCommerce Blocks – Add short product description to product grid

So I’m using the new WooCommerce Blocks for the first time. On the homepage of my website I’ve included the "ProductBestSellers" block and the "ProductOnSale" block. Both of these blocks show a grid styled layout for either best selling products or products on sale.

For the design I needed I had to add some wrappers to the html and therefore I cloned the repository from here; WooCommerce Gutenberg Blocks

The added html does work but now I need to include the product short description within these blocks. I’ve eddit the AbstractProductGrid.php as follows;

AbstractProductGrid.php

/**
 * Render a single products.
 * Edited: 24/02/2020 
 *
 * Added wrappers to display content with padding borders and other styling
 *
 * @param int $id Product ID.
 * @return string Rendered product output.
 */
public function render_product( $id ) {
    $product = wc_get_product( $id );

    if ( ! $product ) {
        return '';
    }

    $data = (object) array(
        'permalink'     => esc_url( $product->get_permalink() ),
        'description'   => $this->get_description_html( $product ), <--- Add product short description
        'image'         => $this->get_image_html( $product ),
        'title'         => $this->get_title_html( $product ),
        'rating'        => $this->get_rating_html( $product ),
        'price'         => $this->get_price_html( $product ),
        'badge'         => $this->get_sale_badge_html( $product ),
        'button'        => $this->get_button_html( $product ),
    );

    return apply_filters(
        'woocommerce_blocks_product_grid_item_html',
        "<li class="wc-block-grid__product">
            <div class="wc-block-grid__product__wrapper">
                <div class="wc-block-grid__product__items">
                    <a href="{$data->permalink}" class="wc-block-grid__product-link">
                        {$data->image}
                        {$data->title}
                    </a>
                    {$data->badge}
                    {$data->rating}
                    {$data->description}
                    <div class="wc-block-grid__product__price-wrapper">
                        {$data->price}
                        {$data->button}
                    </div>
                </div>
            </div>
        </li>",
        $data,
        $product
    );
}

/**
 * Get the product short description.
 *
 * @param WC_Product $product Product.
 * @return string
 */
protected function get_description_html( $product ) {
    if ( empty( $this->attributes['contentVisibility']['description'] ) ) {
        return '<p class="purple">The short description is empty</p>';
    }
    return '<div class="wc-block-grid__description">' . $product->get_short_description() ? $product->get_short_description() : wc_trim_string( $product->get_description(), 400 ) . '</div>';
}

The code above returns an empty attribute, how can I include the short description for the new WooCommerce Blocks?

Tags:

2

Answers


  1. 0

    I found this post when looking for an answer to this, I guess you might have solved it already but here is a suggested solution for anyone coming here.

    First, It´s not recommended to change the core files of WooCommerce or the Blocks-plugin, since if you update the plugin your changes will be overwritten.
    A better way is utilizing that the plugin is exposing a filter for the rendered output called "woocommerce_blocks_product_grid_item_html".

    So if you put this in your functions.php you will get the short description after the product title:

    /**
 * Add short description to WooCommerce product blocks
 */
add_filter('woocommerce_blocks_product_grid_item_html', 'add_short_desc_woocommerce_blocks_product_grid_item_html', 10 , 3);
function add_short_desc_woocommerce_blocks_product_grid_item_html($content, $data, $product) {
    $short_description = '<div class="wc-block-grid__product-short-description">' . $product->get_short_description() . '</div>';

    // This will inject the short description after the first link (assumed: the default product link).
    $after_link_pos = strpos($content, "</a>");
    $before = substr($content, 0, $after_link_pos + 4);
    $after = substr($content, $after_link_pos + 4);

    $content = $before . $short_description . $after;

    return $content;
}
    Login or Signup to reply.
  2. 0

    This is very interesting, I tried it on my site, and it works – however my first is after the image, which also is a link.

    So for me, the code from @Pierre, ended up outputtin:

    Image
Description
Title

    Anyone have any suggestions on how to make it output

    Image
Title
Description

    (Even when images are linked to the product page)

    ?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search