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

Hello @Rok,

We are very pleased to know that our solution met your expectations.
Thank you for your kind feedback and for choosing our services.

Best Regards,
Jack Richardson
The 8Theme’s Team

Hello @Rok,

It is not possible to modify the tag of categories only in specific locations, such as the menu or certain sections of the content. If you would like to change the tag, you can replace the previously added h2 tag with a “p” or “span” tag and check whether this improves the SEO structure of your pages.

You can enhance the snippet added in your child-theme/functions.php previously described in this reply: https://www.8theme.com/topic/content-is-overlapping-on-the-shop-pages/#post-465093 and review the results afterward.

Please note that category heading styles may be affected, and additional styling might be required. However, let us first find the best solution to ensure an optimal SEO structure for your page content.

If you need our assistance, feel free to describe your request after suggested implementations.

Best regards,
Jack Richardson
The 8Theme’s Team

Hello @Rok,

We have reviewed your request, and as mentioned in our previous response (https://www.8theme.com/topic/content-is-overlapping-on-the-shop-pages/#post-465155), it is not possible to modify the category title tags specifically for the elements displayed in the menu. You can only change the tag of such an element, which will also update the tag for each category title in both the header and the page content.

If you still require our assistance, please provide additional details to clarify your request, as we have already given a dedicated response on this matter.

Best regards,
Jack Richardson
The 8Theme’s Team

Hello @Rok,

As you are using different widgets in your menu content, you need to configure each widget according to your requirements: https://prnt.sc/paUIBBqqwnue, https://prnt.sc/lTkDrNfGEMNt. Please note that we do not provide additional customization services; however, we are always happy to guide you on what needs to be configured and which settings to adjust.

Kindly check the settings of your Icon List widget. If you require our assistance with specific settings, please attach screenshots of the content you need help with, and we will provide appropriate recommendations.

Best regards,
Jack Richardson
The 8Theme’s Team

Hello @Rok,

Please note that each widget has its own settings, and the settings are not identical across widgets.

We have checked and found that a line-height of 1px was set for the categories (https://prnt.sc/ibtED6hZZdjc), which we have now corrected. We added the following custom CSS: https://prnt.sc/dzwoaRZcUdnD. Additionally, we set the spacing to 0 (https://prnt.sc/pjvZTpFemEjy).

Kindly check the result now -> https://prnt.sc/39NdkzIPgbGl.

Best regards,
Jack Richardson
The 8Theme’s Team