[Support request] Woocomerce Archive with Nested Categories

Home Forums Support [Support request] Woocomerce Archive with Nested Categories

Home Forums Support Woocomerce Archive with Nested Categories

  • This topic has 15 replies, 2 voices, and was last updated 4 years ago by David.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1178463
    FunkyCss

    Hi guys is any way we can archive this kind of layout with any possible way ? i mean with css or php or acf ?

    THis is made with gutenberg but client wants it dynamic so he can import products , ok i can create some ACF for the subcategory color or image ,

    but i am curious how i can give this layout when they get displayed on the parent category .

    #1178524
    David
    Staff
    Customer Support

    Hi there,

    Woo actually provides an extension to do that:

    https://docs.woocommerce.com/document/woocommerce-nested-category-layout/

    #1178611
    FunkyCss

    Hi David yes this will be the way to go if i cant set it up myself .

    I have created the archive template and i have managed to display the Products and i am really near

         // Set the query
                            $products = new WP_Query( $args );
                            // Standard loop
                            if ( $products->have_posts() ) :
                                while ( $products->have_posts() ) : $products->the_post();
                                    // Your new HTML markup goes here
                                    ?>
                                 <div class="grid-container">
    							 	<div class="grid-50">
    							 		<h2><?php the_title(); ?></h2>
    								</div>
    									
    								<div class="grid-25">
    									paparia
    								  </div>
    								  
      								<div class="grid-25">
    									Pro
      								</div>
                                
    								</div>
    
    			
    							</div>

    I just want to figure out how i will display the rows with the subcategories inside The Loop , i will be back if i find a solution on this .

    Thanks David πŸ™‚

    #1178774
    David
    Staff
    Customer Support

    Yeah not easy – you need to first create a Loop for the categories, and within that output another loop for the products within. Woo can get real complicated as different product types can effect the way they are displayed.

    Be good to see what you come up with.

    #1178783
    FunkyCss

    Yeah i see , thanks david for your help , i appreciate ! πŸ™‚

    #1178786
    David
    Staff
    Customer Support

    You’re welcome

    #1179417
    FunkyCss

    Hi David so i figured out how to call with this plugin the subcategories and their images ,

    There is any chance to have help with the css to create the layout like this one ?

    #1179815
    David
    Staff
    Customer Support

    We can’t offer custom development in the forum unfortunately. Although most days it feels like we do πŸ™‚

    If you have the Archive set up – more then happy to take a look and provide some pointers if possible.

    #1180251
    FunkyCss

    Hi David i feel sad to hear that we ask a lot in the forum !

    And i was not actually right i mean i have set up the archive page and changed the private link .

    I managed to create the category with the image and call the subcategories .

    I just asked if there is a option to insert the images in the left of products .

    I know this is a woocomerce template and i will share in the forum this layout and the code with other members how it was created .

    #1180444
    David
    Staff
    Customer Support

    No problems – happy to help where we can.
    The shop when displaying category thumbnails uses this function i believe:

    https://woocommerce.wp-a2z.org/oik_api/woocommerce_subcategory_thumbnail/

    So you could use that to insert the Image as the first item in your list – before you loop through the products

    #1180718
    FunkyCss

    Yeah this works too , i have used before this action

    add_action( 'woocommerce_archive_description', 'woocommerce_category_image', 2 );
    function woocommerce_category_image() {
        if ( is_product_category() ){
    	    global $wp_query;
    	    $cat = $wp_query->get_queried_object();
    	    $thumbnail_id = get_term_meta( $cat->term_id, 'thumbnail_id', true );
    	    if ( $image ) {
    		    echo '<img src="' . $image . '" alt="' . $cat->name . '" />';
    		}
    	}
    }

    And works as well check out in my second subcategory i have used an image

    #1181255
    David
    Staff
    Customer Support

    Awesome – looks great.
    So you just need a wrapper around the category <img> and the subcategory-products <ul> so you can have the img aside of the products.

    #1181651
    FunkyCss

    Hallo David and sorry that i spam you so much lately .

    I will not bother a lot I promise.

    So i guess i have to do that on the plugin that creates the nested categories or is something more easy that i cant see ?

    So what i understand is that i need to wrappers one for category and one for products and display them lets say as flex.

    I will give a shot .

    If i fix this layout i will never use again the Woo standard is so basic and not practical at all.

    #1182029
    David
    Staff
    Customer Support

    It would need to be added at the Plugin creating the nested categories.

    #1184393
    FunkyCss

    Thanks David

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