[Support request] woocommerce category display layout including description

[John MacKenzie]

thanks! any tips on the horizontal layout of the page like the old one? my programmer is working on it too but if you have guidance thats great!

[David]

Well with the current HTML its going to be impossible to create that layout with just CSS.
Instead we need to restructure the HTML using hooks.
First off the Title needs to be replaced to include a link. Which then needs to be output within a <div> wrapper that also includes our custom description.
Then the final piece is to wrap all the other elements, price, add to cart etc in their own container.
This will give you 3 ‘columns’ – Image, Title/Description, Remaining elements.

So remove the previous code that added the trimmed excerpt and add this instead:

/* add description to the category pages */
function db_woocommerce_shop_custom_layout() {
    global $product;
    // Create our custom Title and Description panel
    // Get the Product Link for H2
    $link = apply_filters( 'woocommerce_template_loop_product_title', get_the_permalink(), $product );
    // Get trimmed excerprt
    $desc_html = apply_filters( 'the_content', $product->post->post_content );
    $desc_html_pieces = explode('<p>', $desc_html);
    $description = strip_tags($desc_html_pieces[2]);
    // Print our custom HTML
    printf('
        <div class="shop-description-panel">
            <a href="%1$s"><h2 class="%2$s">%3$s</h2></a>
            <p>%4$s</p>
        </div>',
        esc_url( $link ),
        esc_attr( apply_filters( 'woocommerce_product_loop_title_classes', 'woocommerce-loop-product__title' ) ),
        get_the_title(),
        $description   
    );
}
function db_hook_custom_layout() {
    // UNHOOK and rehook elements
    // Remove default title         
    remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 ); 
    // Hook in custom description container with link title and trimmed description
    add_action( 'woocommerce_shop_loop_item_title', 'db_woocommerce_shop_custom_layout', 10 );  
	// Add wrapper around remaining shop loop items
    add_action( 'woocommerce_shop_loop_item_title', function(){
        echo '<div class="shop-after-description">';
    }, 20 ); 
    add_action( 'woocommerce_after_shop_loop_item', function(){
        echo '</div>';
    }, 100 ); 
}

// Call db_woocommerce_shop_custom_layout if on shop or archives
add_action('template_redirect', function() {
    if (is_shop() || is_product_category() || is_product_tag()) {
        db_hook_custom_layout();
    }
});

[John MacKenzie]

Wow thats so much closer thanks!
couple issues

1) its printing a very large title at the TOP of the page.
2) the add to cart and price are below the description, not on the right.
3) separately how do we add a QTY box as well like the old site?

also is there a link I can use to send a donation your way for all the extra help?
Thanks!

John

[David]

Almost but not quite what we need. I made some changes to the snippet here:

https://generatepress.com/forums/topic/woocommerce-category-display-layout-including-description/page/2/#post-1583665

Once thats in play we can deal with the Custom CSS for the layout.

Thats awfully kind – heres our Donation page:

https://generatepress.com/ongoing-development/

Much appreciated.

[John MacKenzie]

Thanks! i will for sure.

ive updated that but something funky going on with the images. Also i added a zoom plugin thats supposed to allow the images to show a zoom on hover on category pages called magic zoom plus, but it doesnt seem to work?

thanks!

[David]

OK lets close down the layout issues first.

1. To display the QTY Buttons – Woo provides this doc:

https://docs.woocommerce.com/document/override-loop-template-and-show-quantities-next-to-add-to-cart-buttons/

Yet another PHP Snippet 🙂

2. For the row layout – try this CSS:

@media(min-width: 1024px) {
    .woocommerce #wc-column-container.wc-columns-1 ul.products li.product {
        display: flex;
        flex-direction: row;
    }
    .woocommerce #wc-column-container ul.products .shop-after-description {
        margin-left: 40px;
        flex: 0 0 180px; /* Sets width of price and cart form */
    }
}

[John MacKenzie]

Thanks! layout looks great! just trying to figure out why the zoom doesnt work for me on the category pages..

[David]

You have a link to the plugin ?

Its not this one is it ?
https://wordpress.org/plugins/magic-zoom-plus/

[John MacKenzie]

yes its that one. it works on the product pages but not category pages?

[David]

Might be worth asking the plugin developer. GP is using the default Woo templates and image functions, so if it supports that it should work.

[John MacKenzie]

ok thanks, looks like woo has a zoom already so i disabled that plugin, need to figure out how to get zoom on the category pages… will keep looking.

thanks

[David]

Woo does have a zoom but its only present on the single product page. I am not aware of any plugin that does it – it will probably require custom development.

[Author]

Posts