1. PROMO Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved WooCommerce uneven columns on Category pages

Discussion in 'Free Divi Community Forum' started by Marna, Oct 26, 2019.

  1. Marna

    Marna Member
    Divi Ultimate Header Plugin

    Hi,


    I'm using Divi4 for my WC site. My sub-category pages have uneven columns in each row, which I want to fix. They are shop modules set to 5 columns.

    Please note this product might be offensive to some, lots of swear words....

    Category Page that works: https://prettyinappropriate.com/product-category/gift-by-occasion/
    Sub-category that does not: https://prettyinappropriate.com/product-category/gift-by-occasion/anninversary-gift/
    • My product pages are using a template and I love how it worked. No problem
    • I was unable to get the template to work for category pages; when I set the template for the category, it transferred to all the subcategories. So I made a template page for EVERY sub-category.
    • My category pages are WC generated
    • I have some CSS and functions.PHP changes to make the category page full-width.
    I suspect something is not set wide enough? Looks like it goes 4 col, 1 col, 3 col, 2 col, etc. But I don't know PHP and don't see anything that makes sense to me.

    Here is the PHP script I added for full-width.

    PHP:
    /**
    * Remove Divi sidebar from all WooCommerce Product pages (as well as Shop and Category pages)
    */
    function mytheme_divi_output_content_wrapper_end() {
        echo 
    '
                        </div> <!-- #left-area -->
                    </div> <!-- #content-area -->
                </div> <!-- .container -->
            </div> <!-- #main-content -->'
    ;
    }
    function 
    mytheme_remove_divi_sidebar() {
        
    remove_action'woocommerce_after_main_content''et_divi_output_content_wrapper_end'10 );
        
    add_action'woocommerce_after_main_content''mytheme_divi_output_content_wrapper_end'10 );   
    }
    add_action'init''mytheme_remove_divi_sidebar'10 );
    /**
    * Adjust the WooCommerce body classes for all WooCommerce Product pages (as well as Shop and Category pages)
    */
    function mytheme_body_classes$classes ) {
        if ( 
    function_exists'is_woocommerce' ) && is_woocommerce() ) {
            
    $remove_classes = array('et_right_sidebar''et_left_sidebar''et_includes_sidebar');
            foreach( 
    $classes as $key => $value ) {
                  if ( 
    in_array$value$remove_classes ) ) unset( $classes[$key] );
            }
            
    $classes[] = 'et_full_width_page';
        }
        return 
    $classes;
    }
    add_filter('body_class''mytheme_body_classes'20);
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade rolling text design for your Divi site without using any plugins:View Demo
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
     
  3. Marna

    Marna Member
    Divi Ultimate Header Plugin

    Thank you so much! That worked. I'll have to figure out why. lol.
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade content toggle design for your Divi site without using any plugins:View Demo
  4. Marna

    Marna Member
    Divi Ultimate Header Plugin

    Attached Files:

  5. Divi.Help

    Divi.Help Administrator
    Staff Member

    1. PRO MEMBER PERKS Divi Block Pro - Premade mega menu design for your Divi site without using any plugins:View Demo
  6. Marna

    Marna Member
    Divi Ultimate Header Plugin

    Thank you. That seems to have worked.
     
  7. Marna

    Marna Member
    Divi Ultimate Header Plugin

    Okay, one more thing. How can I target the category pages for this too. The product archive pages are good now, but the product category pages, showing subcategories are full-width, but 4 columns and not uniform.
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade card carousel design for your Divi site without using any plugins:View Demo
  8. Divi.Help

    Divi.Help Administrator
    Staff Member

    For the previous CSS, change to the below:
    Code:
    Log In or Sign Up to view this code.
     
  9. Marna

    Marna Member
    Divi Ultimate Header Plugin

    Thanks, but I have this already from Divi.help.
    Code:
    Log In or Sign Up to view this code.
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade promo bar / notification bar with close button for your Divi site without using any plugins:View Demo
  10. Divi.Help

    Divi.Help Administrator
    Staff Member

    My bad. I mean the above CSS change to the below:
    Code:
    Log In or Sign Up to view this code.
     
  11. Marna

    Marna Member
    Divi Ultimate Header Plugin

    Super! I don't know who you are, but you are awesome!
     
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Replace the default archive "Older Entries" with beautiful pagination:Learn More
  12. Marna

    Marna Member
    Divi Ultimate Header Plugin

  13. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
     
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Agency Divi layout pack featuring unique comment design on single blog post page:View Demo
  14. Marna

    Marna Member
    Divi Ultimate Header Plugin

    Perfect, thanks as always.
     
  15. Marna

    Marna Member
    Divi Ultimate Header Plugin

    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Agency Divi layout pack featuring modern overlay archive blog layout with hover effects:View Demo
  16. Marna

    Marna Member
    Divi Ultimate Header Plugin

    hi.
    I removed this code:
    .woocommerce.columns-5 ul.products.columns-5 li.product:nth-child(5n+1) {
    clear: none!important;
    }
    and it works now.
     
  17. Marna

    Marna Member
    Divi Ultimate Header Plugin

    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Beautifully crafted Divi layout packs for you to kick start your Divi sites:View Demo
  18. Divi.Help

    Divi.Help Administrator
    Staff Member

    From the HTML, it looks like it's showing 3 columns CSS class, not 5: <ul class="products columns-3">

     
  19. Liam2022

    Liam2022 New Member

    1. PRO MEMBER PERKS Divi Cart Count Plugin - Easily add cart count to your Divi cart icon. 6 different styles to choose from:Learn More
  20. Divi.Help

    Divi.Help Administrator
    Staff Member

    Looks fine to me. Perhaps you already resolved it.