Line break between category grid and products

Hey guys,

When displaying categories and products together it puts them all together(See screenshot). Is there a way move the products down 1 line? To see that there is a difference between the category blocks and the products?

Attachments:

You must be logged in to view attached files.

Hello,

As you have displayed the products and sub-categories as well in the product category page. There is no such option to move the products down 1 line. It requires customization and this is beyond our limitations and support policy.

Best Regards.

This looks horrible and the customers will not be able to tell the difference between categories and products. Is there no way to show the difference between the categories and products? Either start the products on a new line or show a solid line under categories.

Is there no way to make this look better? It looks shocking.

Hello,

Currently there is no such option in theme settings to display the difference between the categories and products.

WooCommerce has products and categories as a part of the same loop and unfortunately, there is no option to separate them now. We will consider such an improvement for our future updates.

Best Regards.

Here is a fix for this issue. Just insert this into the On document ready section of the Custom JS section in woodmart settings.

jQuery(‘<div style=”clear: both;vertical-align: bottom;width: 100%;height: 5px;”></div>’).insertAfter(‘.category-grid-item:last’);

Attachments:

You must be logged in to view attached files.

Hello,

Sounds really great!!..

It means your issue is resolved right?

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.

Best Regards.

Yes this solves it. Here is a better piece of code which avoids putting it on the home page as well. It will only put it on category showcase pages.

if( jQuery(‘body.archive’).length){
jQuery(‘<div id=”wd-5e90322a7d8e8″ style=”width: 100%; border-color: rgba(232, 232, 232, 1); border-bottom-width: 1px; border-bottom-style: solid; border-top-width: 1px; border-top-style: solid;” class=”title-wrapper woodmart-title-color-default woodmart-title-style-default woodmart-title-width-100 text-center woodmart-title-size-medium “><div class=”liner-continer”><span class=”left-line”></span><h4 class=”woodmart-title-container title woodmart-font-weight-“>PRODUCTS</h4><span class=”right-line”></span></div></div>’).insertAfter(‘.category-grid-item:last’);
}

Hello,

We are Glad that you found the solution by yourself. You are Great!!

Your solution might become useful for someone else.

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