[Support request] woocommerce category display layout including description

Home Forums Support [Support request] woocommerce category display layout including description

Home Forums Support woocommerce category display layout including description

Viewing 12 posts - 16 through 27 (of 27 total)
  • Author
    Posts
  • #1583599
    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!

    #1583665
    David
    Staff
    Customer Support

    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();
        }
    });
    #1586338
    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

    #1586596
    David
    Staff
    Customer Support

    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.

    #1586627
    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!

    #1586893
    David
    Staff
    Customer Support

    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 */
        }
    }
    #1587691
    John MacKenzie

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

    #1587932
    David
    Staff
    Customer Support

    You have a link to the plugin ?

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

    #1588537
    John MacKenzie

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

    #1589056
    David
    Staff
    Customer Support

    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.

    #1599945
    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

    #1600106
    David
    Staff
    Customer Support

    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.

Viewing 12 posts - 16 through 27 (of 27 total)
  • You must be logged in to reply to this topic.