• Resolved patrickpelsma

    (@patrickpelsma)


    Hello,

    I want to change the layout of the category page. I want to make one table where the products are displayed. This works, but the only challenge that I have is that all products are displayed (and thus ignoring the product filters). I tried to add tax_query arguments, but this didn’t seem to work.

    Is there an easy way to only show the products in the table that match the filter requirements? An idea that I had was to retrieve the SKUs from the products that show on the filter and give them as an argument to the WP_Query, but I did not manage to complete this.

    This is the code that I made so far.

    
    add_action('woocommerce_archive_description','displaying_product_table');
    function displaying_product_table() {
    
    	$args = array( 
    		'post_type' => 'product', 
    		'posts_per_page' => -1, 
    		'post_status' => 'publish', 
    		'tax_query' => array ( 
    			'relation' => 'AND',
    			array(
    				'taxonomy' => 'product_cat',
    				'field' => 'slug', // Or 'term_id' or 'name'
    				'terms' => get_query_var( 'product_cat' )
    				),
    			array(
    				'taxonomy' => 'pa_continent',
    				'field' => 'slug', // Or 'term_id' or 'name'
    				'terms' => get_query_var( 'pa_continent' )
    			        ), 			
    			array(
    				'taxonomy' => 'pa_degree',
    				'field' => 'slug', // Or 'term_id' or 'name'
    				'terms' => get_query_var( 'pa_degree' )
    			        )
    		        ) 
    		);
    	$loop = new WP_Query( $args );
    	if ( $loop->have_posts() ) {
    		echo "<div style='overflow-x:auto;'>";
    		echo "<table id='product-table'>";
    		echo "<tr> <th class='uni-image' width='10%'> <b> Image</b> </th> <th width='20%'> <b> Name </b> </th> <th width='10%'> <b> Category </b> </th> <th width='10%' onclick='sortTable()'> <b> Attribute1 </b> </th> <th width='10%'> <b> Attribute2 </b> </th> </tr>";
    	
    		while ( $loop->have_posts() ) : $loop->the_post();
    			global $product;
    			$product_id = $product->get_sku();
    			$product_image = $product->get_image();
    			$product_category = $product->get_categories();
    			$product_name = $product->get_name();
    			$uni_link = get_permalink( $product->get_id() );
    			$attribute1 = $product->get_attribute('pa_attribute1');
    			$attribute2 = $product->get_attribute('pa_attribute2');
    			echo "<tr> <td> $product_image </td> <td> <a href='$uni_link'> $product_name </a> </td> <td> $product_category </td> <td> $attribute1 </td> <td> $attribute2 </td> </tr>";
    		endwhile; wp_reset_query();
    		echo "</table>";
    		echo "</div>";
    	} else {
    		echo __( 'No products found' );
    	}
    }
    

    Help is appreciated

Viewing 3 replies - 1 through 3 (of 3 total)
  • Hi @patrickpelsma,

    As you’ve discovered, with a separate query, the product filters will be ignored. So you would need to pull the query variables from the URLs and add them to the query.

    Another option would be to just modify the template files that make up the category pages so they use the table structure you’re using. That would allow the filters to work properly. If I was doing this, that’s the approach I would take.

    https://docs.woocommerce.com/document/template-structure/

    Let me know if you have any questions,

    Thread Starter patrickpelsma

    (@patrickpelsma)

    Hi @3sonsdevelopment,

    Thanks for your reply. I would like to modify the template file as you suggest.
    Do you have any clue what the best way is to modify the template file?

    I looked at https://github.com/woocommerce/woocommerce/blob/3.7.0/templates/archive-product.php to modify the archive/category page, but I was unable to insert my function so the products are displayed in my table. Could you maybe explain what file I specifically should edit, and maybe give me an example?

    I hope you can help me out. Thanks again!

    Patrick

    Hey Patrick,

    That’s a good question. Instead of using the function, here’s what I would do.

    In archive-product.php I would add in the HTML for the table structure around the loop. You could wrap them in a conditional statement so they only show if it is a product category archive.

    Then edit the content-product.php and add your HTML markup there for the rows/columns. Again you may want to use some conditional tags so this only affects the product category archive.

    That’s how I would go about this. Add your HTML, but use the loop that’s already in the file instead of a custom query to pull the products. That way the filters will still work.

    Hopefully, that’ll get you pointed in the right direction.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Filtered product table’ is closed to new replies.