Support » Developing with WordPress » woocommerce shop page

  • Greetings friends,

    I have an issues with my woocommerce shop page, that there isn’t a space between the middle column and the right column, i was tweaking the page with CSS snippet code but not i disable all snippet code in the product list.

    can you please help.
    Thank you.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • 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>";
     }
    Moderator bcworkz

    (@bcworkz)

    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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.