woocommerce shop page

Hello Sayed,

I just reviewed the website link you provided and I found the spacing proper between the Left Filter and Right Product Section. Is there any else you are looking for or I misunderstood your query here.

If you can help me understand your problem may be with a screenshot I can further try to provide some solution.

Thanks.

Hi kartik,

I have 3 columns in my shop page, the spacing between the products is not proper. notice how the is no space between the product columns.

I tried to locate the error and i found the it is in this snippet code, but unforttinatly i could not solve it.

	$product_categories = get_terms( 'product_cat', $args );
	
echo "<h3 style='color:#4D8B55; text-align:center;'>- Product Categories -</h3>";
	
$count = count($product_categories);
 if ( $count > 0 ){
     echo "<ul>";
     foreach ( $product_categories as $product_category ) {
       echo '<li style="display:inline; padding: 5px 5px;"><a href="' . get_term_link( $product_category ) . '">' . $product_category->name . '</li>';
        
     }
     echo "</ul>";
 }

Something is inserting an anchor link into the ul list without the usual li tag and it’s throwing off the nth-child(3n) CSS code that starts a new row. A quick and dirty patch would be to adjust the nth-child factor (add to additional CSS of customizer):

.woocommerce-page.columns-3 ul.products li.product:nth-child(3n), .woocommerce.columns-3 ul.products li.product:nth-child(3n) {
    margin-right: 20px;
    clear: none:
}
.woocommerce-page.columns-3 ul.products li.product:nth-child(3n+1), .woocommerce.columns-3 ul.products li.product:nth-child(3n+1) {
    margin-right: 0;
    clear: left;
}

A better solution would be to figure out what’s inserting that anchor link. It’s not displayed but it throws off the nth-child rule.