Huge space below the catalog

Hi ecodimteam,

We noticed you’re using Virtual Composer, which could be effecting the layout of the products.

If you try using the UPC shortcode on a page without Virtual Composer, do you get the same space issue?

To put it frankly, I do not know how to get only one page withou Visual composer.
I deactivated Visual Composer plugin and made new page https://newsite.carapax.ru/test/
with two catalogs.
And I see the same result. Both catalogs are the same length (although css for each of them is different).

• This reply was modified 5 years, 11 months ago by ecodimteam.

Hi ecodimteam,

It seems that both the catalogs on the page take same styling due to their classes being same. If you wanted to style them differently as you mentioned above, you could make a small change in plugin files to also include another CSS class mentioning catalogue id.

In the file “\wp-content\ultimate-product-catalog\Functions\Shortcodes.php”, you would need to replace the line that says::

$ProductString .= "<div class='prod-cat-container'>";

to:

$ProductString .= "<div class='prod-cat-container-" .$id . "'>";

and then add respective CSS accordingly, for example:

.product-cat-container.catalogue-1 {
height: 500px !important;
}

Hi,

There seems to be some copy-paste error, could you please replace the line with the following instead:

$ProductString .= "<div class='prod-cat-container catalogue-" .$id . " '>";

I replaced the line with new code, but result visually is the same.

I just went to the URL you gave us and can’t find a catalog from our plugin anywhere. Could you please send us a link to where you have our catalog on your site? If you have CSS from the theme or another plugin conflicting, then we’ll need to see what that is in order to try and suggest how to counter it.

Hello
I had to change main page.
Now page with catalog is https://newsite.carapax.ru/home-extended/

Hi ecodimteam,

We went through the link that you sent, if you go to the source code you will notice that the following CSS is injected directly into the .prod-cat-container and .prod-cat-inner classes of the plugin (either by visual composer or by any other element):

element.style {
    height: 11256px;
}

In order to override that CSS, you can add the following custom CSS code to your catalog:

.prod-cat-container {
height: 2000px !important;
}
.prod-cat-inner {
height: 2000px !important;
}

The height for different catalogs will vary depending on the number of products in the catalog. You can change the height value as per your requirements or you can add your catalogs to different pages.