[Resolved] Subcategories Layout

Home Forums Support Subcategories Layout

  • This topic has 7 replies, 3 voices, and was last updated 4 months ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1514437
    Ash

    I want to move subcategories before the product loop. I found the following

    // remove the subcategories from the product loop
    remove_filter( 'woocommerce_product_loop_start', 'woocommerce_maybe_show_product_subcategories' );
    
    // add subcategories before the product loop 
    add_action( 'woocommerce_before_shop_loop', 'show_product_subcategories', 10 );
    
    function show_product_subcategories() {
        $subcategories = woocommerce_maybe_show_product_subcategories();
            if ($subcategories) {
              echo '<ul class="subcategories">',$subcategories,'</ul>';
        }
    }

    This does the job removes it from the product loop and adds it before. But it loses all grid styling, any ideas please?

    Thank you.

    #1514815
    David
    Staff
    Customer Support

    Hi there,

    the simplest option would be to set your catalog to display just the products in Customizer > Woocmmerece

    Then use a Hook to add back the categories using the Woo shortcode:

    [product_categories]

    #1515042
    Ash

    That just adds all categories though

    #1515294
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    This may be a better question for WooCommerce support – they may have a way to display sub-categories while retaining the product categories layout.

    After a quick look, the parent shortcode attribute may help: https://docs.woocommerce.com/document/woocommerce-shortcodes/#section-14

    #1515735
    Ash

    The above function does the same as this but they made it into a plugin

    https://code.tutsplus.com/tutorials/display-woocommerce-categories-subcategories-and-products-in-separate-lists–cms-25479

    And then enqueue a css file

    ul.product-cats li {
        list-style: none;
        margin-left: 0;
        margin-bottom: 4.236em;
        text-align: center;
        position: relative;
    }
    ul.product-cats li img {
        margin: 0 auto; 
    }
     
    @media screen and (min-width:768px) {
     
        ul.product-cats {
            margin-left: 0;
            clear: both;
        }
        ul.product-cats li {
            width: 29.4117647059%;
            float: left;
            margin-right: 5.8823529412%;
        }
        ul.product-cats li:nth-of-type(3) {
            margin-right: 0;
        }
         
    }

    So I changed the functions ul class to product-cats for the css??

    // remove the subcategories from the product loop
    remove_filter( 'woocommerce_product_loop_start', 'woocommerce_maybe_show_product_subcategories' );
    
    // add subcategories before the product loop 
    add_action( 'woocommerce_before_shop_loop', 'show_product_subcategories', 10 );
    
    function show_product_subcategories() {
        $subcategories = woocommerce_maybe_show_product_subcategories();
            if ($subcategories) {
              echo '<ul class="product-cats">',$subcategories,'</ul>';
        }
    }

    And then added the css, it’s centered text, removed list type, but still all one column.

    There css was for storefront so just need some css for generatepress it to go 4 columns

    #1516105
    David
    Staff
    Customer Support

    Try this CSS:

    .woocommerce ul.product-cats {
        display: grid;
        grid-template-columns: repeat(4,minmax(0,1fr));
        grid-gap: 20px;
    }
    .woocommerce ul.product-cats li {
        list-style-type: none;
        margin-left: 0;
    }
    @media (max-width: 768px) {
        .woocommerce ul.product-cats {
            -ms-grid-columns: 1fr 1fr;
            grid-template-columns: repeat(2,minmax(0,1fr));
        }
    }
    
    @media (max-width: 1024px) and (min-width: 769px) {
        .woocommerce ul.product-cats {
            -ms-grid-columns: (1fr)[3] !important;
            grid-template-columns: repeat(3, 1fr) !important;
        }
    }
    #1517341
    Ash

    Thanks David looks much better, I changed it slightly as margin-left wouldnt work and I added text-align.

    .woocommerce ul.product-cats {
        display: grid;
        grid-template-columns: repeat(4,minmax(0,1fr));
        grid-gap: 30px;
    	  text-align: center;
    	  margin-left: 0;
    	  list-style-type: none;
    }
    
    @media (max-width: 768px) {
        .woocommerce ul.product-cats {
            -ms-grid-columns: 1fr 1fr;
            grid-template-columns: repeat(2,minmax(0,1fr));
        }
    }
    
    @media (max-width: 1024px) and (min-width: 769px) {
        .woocommerce ul.product-cats {
            -ms-grid-columns: (1fr)[3] !important;
            grid-template-columns: repeat(3, 1fr) !important;
        }
    }

    Subcategories titles are using h2, how can I change the size/weight without affecting h2 site wide?

    #1517476
    David
    Staff
    Customer Support

    You can target them with this selector:

    h2.woocommerce-loop-category__title {
        font-size: 20px;
        font-weight: bold;
    }
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.