Content is overlapping on the Shop Pages

Hello @Rok,

If you would like to display categories or subcategories on your shop page, please ensure that each product category has a thumbnail image assigned to it. This will allow the categories to be displayed correctly.

To add a thumbnail image, go to “Dashboard → Products → Categories”, select the desired category (https://prnt.sc/V_x91hA_fK7r), and upload the image (https://prnt.sc/lGNhoYB-3Dp2). Once this is done, the layout of your categories will appear correctly. Currently, the overlapping content occurs because some categories do not have images assigned.

Additionally, we have added the following custom CSS to prevent overlapping of category content when no image is set for certain categories:

.elementor-element .category-grid.content-inside:not(:has(img)) .categories-mask {
    padding: 25px 0 0;
    position: static;
    width: 100%;
    transform: none;
}

If a category does not have a thumbnail image, it will now display as shown here: https://prnt.sc/5qRJEiwny487.

We have also added the following PHP snippet to your “child-theme/functions.php” file to modify the default tag of the product category title:

add_filter('etheme_product_category_title_tag', function($tag) {
    return 'h2';
});

As a result, your product category titles now use the “h2” tag, as shown here: https://prnt.sc/aNNgQ_8XF-76.

Best regards,
Jack Richardson
The 8Theme’s Team