Product archive design

Hi,

I’m wondering if this custom layout for the categories page is doable with the custom layouts. Please see screenshot attached.

The main functionality im looking for is the automatic display of sub categories under the current category. These will have to be automatic displayed, because we will have a big category structure so creating custom individual layouts for each category is not an option.

Best regards
David

Attachments:

You must be logged in to view attached files.

Hello,

Sorry but there is no option in Theme Settings available for that.

It requires customizations and this is beyond our limitations and support policy.

Best Regards

Hi Aizaz,

I can do the customization myself if you tell med in what theme files the page title is coded.

Furthermore i want to place breadcrumbs above the title. Can you tell me in what files the layout of the product archive is coded in?

Hello,

You can find the file under “woodmart/inc/template-tags.php” and customize at your own risk.

Best Regards

Hi Aizaz,

Just wanted to let you know that the solution was possible with this custom function in child theme.
– Ajax click works.
– Categories update when clicked to show current category subcategories.
– Works in custom builder “Page title” module as well.

function show_subcategories_in_page_title() {
  if ( is_product_category() or is_shop() ) {

        $term_id  = get_queried_object_id();
        $taxonomy = 'product_cat';

        // Get subcategories of the current category
        $terms    = get_terms([
            'taxonomy'    => $taxonomy,
            'hide_empty'  => true,
            'parent'      => $term_id
        ]);

        echo '
        <div class="d-subcategories" style="">
            <div class="container">
                <ul class="wd-nav-product-cat wd-nav wd-gap-m wd-style-underline has-product-count woodmart-product-categories wd-mobile-accordion" style="">
                    <!-- <li class="cat-link shop-all-link">
                        <a class="category-nav-link" href="https://nayana.dk/shop/">
                        <span class="nav-link-summary category-summary">
                        <span class="nav-link-text category-name">
                        All						</span>
                        <span class="nav-link-count category-products-count">
                        products						</span>
                        </span>
                        </a>
                    </li> -->
                ';

        // Loop through product subcategories WP_Term Objects
        foreach ( $terms as $term ) {
            $term_link = get_term_link( $term, $taxonomy );
            // var_dump($term);

            echo '<li class="cat-item cat-item-20 "><a class="category-nav-link" href="'. $term_link .'"> <span class="nav-link-summary category-summary"><span class="nav-link-text category-name">'. $term->name .'</span><span class="nav-link-count category-products-count">'. $term->count .'</span></span></a></li>';
        }

        echo '
                </ul>
            </div>
        </div>
        ';
    }
}
add_action( 'woodmart_page_title_after_title', 'show_subcategories_in_page_title', 20);

Screenshots:
https://i.imgur.com/qqYJes2.png
https://i.imgur.com/0B5ZrfB.png

Feel free to use the code in the theme if you like 🙂

Hello,

Thanks for sharing the solution here.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts