[Support request] woocommerce category display layout including description

[John MacKenzie]

if i add in the description to showing in the woocommerce settings in customizer it does some weird stiff and puts the menus on the right.

i want it to look more like the link from the original page, Title above the description then add to cart buttons on right.

Thanks!
John

[Elvin]

Hi,

if i add in the description to showing in the woocommerce settings in customizer it does some weird stiff and puts the menus on the right.

I’m not exactly sure I get the whole picture. Can you provide screenshots of what’s occuring?

Or perhaps revert to the setting that makes the issue happen so we could check.

Let us know.

[John MacKenzie]

thanks i enabled short description in the customizer and it makes the filers pop over to the right. but short description isnt want i want added i want the proper description added?
Thanks!

[David]

Hi there,

thats not a default feature of Woocommerce. They actually sell an extension to provide that feature. But you can hook in the description using this PHP Snippet:

add_action( 'woocommerce_after_shop_loop_item_title', 'woo_shop_long_description' );
function woo_shop_long_description() {
	global $product;

	?>
        <div itemprop="description">
            <?php echo apply_filters( 'the_content', $product->post->post_content ) ?>
        </div>
	<?php
}

[John MacKenzie]

thanks but it shows the whole description not the more… like our current site. here is the code from the page content-product on the current theme which i assume is driving that page.

but ive tried to edit the default version with some of this code without success

thanks!

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

global $product, $woocommerce_loop;

// Store loop count we're currently on
if ( empty( $woocommerce_loop['loop'] ) ) {
	$woocommerce_loop['loop'] = 0;
}

// Store column count for displaying the grid
if ( empty( $woocommerce_loop['columns'] ) ) {
	$woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', 4 );
}

// Ensure visibility
if ( ! $product || ! $product->is_visible() ) {
	return;
}

// Increase loop count
$woocommerce_loop['loop']++;

// Extra post classes
$classes = array();
if ( 0 == ( $woocommerce_loop['loop'] - 1 ) % $woocommerce_loop['columns'] || 1 == $woocommerce_loop['columns'] ) {
	$classes[] = 'first';
}
if ( 0 == $woocommerce_loop['loop'] % $woocommerce_loop['columns'] ) {
	$classes[] = 'last';
}

// Bootstrap Column
$kt_woo_grid_column = kt_option('kt_woo_grid_column',3);
$kt_woo_grid_column_tablet = kt_option('kt_woo_grid_column_tablet',2);
$kt_woo_grid_column_mobile = kt_option('kt_woo_grid_column_mobile',1);

// $bootstrapColumn = round( 12 / $woocommerce_loop['columns'] );
// $classes[] = 'col-xs-12 col-md-' . $bootstrapColumn;

$kt_woo_shop_sidebar_are = kt_option('kt_woo_shop_sidebar_are','left');

$classes[] ='product-item';

// Set columns
$boostrap_columns_destop = round( 12 / $kt_woo_grid_column );

$classes[] = 'col-md-'.$boostrap_columns_destop;

$kt_woo_ipad_grid_column = round( 12 / $kt_woo_grid_column_tablet );
$classes[] = 'col-sm-'.$kt_woo_ipad_grid_column;

$kt_woo_mobile_grid_column = round( 12 / $kt_woo_grid_column_mobile );

$classes[] = 'col-xs-'.$kt_woo_mobile_grid_column;

// if( $kt_woo_shop_sidebar_are =="full"){
//     $classes[] = 'col-sm-4';
// }else{
//     $classes[] = 'col-sm-6';
// }

?>
<li <?php post_class( $classes ); ?>>
    <div class="product-container">
	<?php do_action( 'woocommerce_before_shop_loop_item' ); ?>
    	<div class="left-block">
            <?php
            woocommerce_show_product_loop_sale_flash();
            ?>
            <a href="<?php echo esc_url( get_permalink() ) ; ?>">
                <?php
        			
        			echo woocommerce_get_product_thumbnail();
        		?>
            </a>
            <div class="quick-view">
                <?php
        			/**
        			 * kt_loop_product_function hook
        			 *
        			 * @hooked kt_get_tool_wishlish - 1
                     * @hooked kt_get_tool_compare - 5
                     * @hooked kt_get_tool_quickview - 10
        			 */
        			do_action( 'kt_loop_product_function' );
        		?>
            </div>
            <?php
                /**
                 * woocommerce_after_shop_loop_item hook
                 *
                 * @hooked woocommerce_template_loop_add_to_cart - 10
                 */
                do_action( 'woocommerce_after_shop_loop_item' );
            ?>
        </div>
        <div class="right-block">
            <?php
            // $product_name = get_the_title();
            // if( strlen( $product_name ) > 25 ) {
            //     $product_name = substr( $product_name, 0, 25);
            //     $product_name = trim( $product_name ) ."...";
            // }
            ?>
            <h5 class="product-name"><a title="<?php echo esc_attr( get_the_title() );?>" href="<?php the_permalink(); ?>"><?php the_title( ); ?></a></h5>
            <div class="content_price">
                <?php
        			/**
        			 * woocommerce_after_shop_loop_item_title hook
    			     *
        			 * @hooked woocommerce_template_loop_price - 10
        			 */
        			do_action( 'kt_after_shop_loop_item_title' );
        		?>
            </div>
            <div class="info-orther">
                <div class="product-desc"><?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt ) ?></div>
            </div>
        </div>
    </div>
</li>

[David]

Where is that content entered on the Product – is that in the Short Description field ?

[John MacKenzie]

its taking the first part of the product description but stripping any bold and spacing formatting it looks like. but its also removing the very FIRST line from the product description…. odd and then only showing a snippet, not the whole description.

thanks!

[Tom]

Your current theme is doing this:

<?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt ); ?>

So the adjusted code would be:

add_action( 'woocommerce_after_shop_loop_item_title', 'woo_shop_long_description' );
function woo_shop_long_description() {
	global $product;

	?>
        <div itemprop="description">
            <?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt ); ?>
        </div>
	<?php
}

[John MacKenzie]

thanks! i added that but nothing showing with with that code?

cheers
John

[Tom]

You could try changing $post->post_excerpt to $product->post_excerpt, although I’m not 100% that will do the trick. I just took a look at the code you shared and tried to pick out the important part.

[John MacKenzie]

thanks… hmm no love from that one either 🙁 any other ideas

thanks a lot!

John

[David]

OK so – what it looks like they are doing is extracting the Second Paragraph from the Full Description, we could try something like this:

add_action( 'woocommerce_after_shop_loop_item', 'woo_shop_long_description', 5 );
function woo_shop_long_description() {
    if (is_shop() || is_product_category() || is_product_tag()) {
    global $product;
    $html = apply_filters( 'the_content', $product->post->post_content );
    $html_pieces = explode('<p>', $html);
    $description = strip_tags($html_pieces[2]);
    ?>
    <div itemprop="description">
        <?php echo $description; ?>
    </div>
    <?php
    }
}

[John MacKenzie]

thanks thats looking pretty good. How can we get the columns like the old site as well so its

photo description Price and add to cart button

Thanks!
John

[John MacKenzie]

oh and how do i STOP the new description from showing on the related products widget at the bottom of product pages.

thanks

[David]

I have updated the code here

This should only display the description on shop and archive pages.
Strip the bold tag from the description and place it outside of the main container link, before the Cart function.

Make that change then i can look at fixing the layout.

[Author]

Posts