How to fix category products sections on the Default layout on Ayo Theme

On the Default layout, you may have trouble with the category products sections on the home page. Something like this:

If you have it, then follow the steps below to fix this:

1. Open your storefront themes.

2. Click Advanced and Edit Theme Files.

You might get a warning pop-up. Click **Edit theme files** to continue.

3. On the left panel, you have a file explorer. Navigate to the

   templates/components/wbcomponents/addons/wb_deal/topdeal/default_deals file.

4. Remove all the code in the opened file, then copy and paste this:

   {{#if category_id '!==' ' '}} {{#each categories}} {{#if id '===' ../category_id}} {{#if (merge ../this
   category_name = name category_url = url)}} {{/if}}
   <h5 class="block-title">
     <span class="block-title--inner"> {{name}} <span class="title">products</span> </span>
   </h5>
   <div class="block-content">
     <div class="wb-extraslider-container">
       {{#if url '!=' ''}}
       <div
         class="wb-deals-container"
         data-products-by-category-tabs="{{ concat url '?sort=bestselling'}}"
         data-urltemplate="wbcomponents/addons/wb_deal/topdeal/default_deals_item"
       >
         <div class="productLoading">
           <img
             class="img-responsive lazyload"
             src="{{cdn '/assets/img/loading.svg'}}"
             alt="loading"
             width="50"
             height="50"
           />
         </div>
       </div>
       {{else}}
       <div class="alertBox alertBox--info" style="margin:30px 0px">
         <div class="alertBox-column alertBox-icon">
           <icon glyph="ic-success" class="icon" aria-hidden="true"
             ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
               <path
                 d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
               ></path></svg
           ></icon>
         </div>
         <p class="alertBox-column alertBox-message">
           <span>{{{lang 'wbTheme.wb_deals.noCategory' }}}</span>
         </p>
       </div>
       {{/if}}
     </div>
   </div>
   {{else}} {{#each children}} {{#if id '===' ../../category_id}} {{#if (merge ../../this category_name = name
   category_url = url)}} {{/if}} {{/if}} {{/each}} {{/if}} {{/each}} {{/if}}

5. Navigate to the templates/components/wbcomponents/addons/wb_supper_category/default/default_tabs file.

6. Remove all the code in the opened file, then copy and paste this:

   {{!-- Arguments: - category_id (number) - style (string): CSS class styling suffix Global variables: -
   categories (array) --}} {{#if category_id '!==' ' '}} {{#withHash categories = categories category_id =
   category_id moduleId = moduleId }} {{#each categories}} {{#if id '===' ../category_id}}
   <div id="wb-listing-tabs{{moduleId}}" class="wb-listing-tabs">
     <div class="ltabs-heading block-title">
       <h3 class="block-title--inner">{{name}}</h3>
       <div class="ltabs-tabs-wrap">
         <span class="ltabs-tab-selected"></span>
         <span class="ltabs-tab-arrow">▼</span>
         <ul class="tabs ltabs-tabs">
           {{#each categories}} {{#if id '===' ../category_id}} {{#each (limit children
           ../../limit_subcategory) }}
           <li class="tab">
             <a class="tab-title" href="{{url}}">{{name}}</a>
           </li>
           {{/each}} {{else}} {{!-- Category Level 2--}} {{#each children}} {{#if id '===' ../../category_id}}
           {{#each (limit children ../../../limit_subcategory) }}
           <li class="tab">
             <a class="tab-title" href="{{url}}">{{name}}</a>
           </li>
           {{/each}} {{/if}} {{/each}} {{/if}} {{/each}}
         </ul>
       </div>
     </div>
     <div class="ltabs-container block-content">
       <div
         class="ltabs-items-content"
         data-products-by-category-tabs="{{concat url '?sort=newest'}}"
         data-urltemplate="wbcomponents/addons/wb_supper_category/default/default_items"
       >
         <div class="productLoading">
           <img
             class="img-responsive lazyload"
             src="{{cdn '/assets/img/loading.svg'}}"
             alt="loading"
             width="50"
             height="50"
           />
         </div>
       </div>
     </div>
   </div>
   {{/if}} {{/each}} {{/withHash}} {{/if}}