large space between displayed catalogs

  • I have a page that I am trying to display multiple catalogs on and one thing I cannot figure out is why there’s such a HUGE space between them on the page. I have tried everything I could think of, in WorPress, to correct it and nothing has worked. How can I get rid of that huge gap and have something that looks right?

    By the way: I LOOOOVE this plugin and it’s already allowed me to do so much that I am going to buy it, especially since I saw that it has WooCommerce integration. I’m actually going to wait just a little longer to see if you guys do a Christmas or New Years special. ??

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi therealcrazy8,

    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 catalogue-" .$id . " '>";

    and then add respective CSS accordingly, for example:

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

    PS: You’ll need to add the CSS to the “Custom CSS” box found by navigating to the “Catalogues” tab and selecting the respective catalog.

    Thread Starter therealcrazy8

    (@therealcrazy8)

    I actually ended up coming across a similar post with the same code, and unless I missed something, it made no difference. I did add the CSS to the Custom CSS box, and even changed the 500px to 100px and still saw no difference. I will try again just to make sure.

    Also, does “catalogue-1” need to become “catalogue-2”, “catalogue-3”, etc. based on what catalogue the css is being put into?

    Hi therealcrazy8 ,

    Also, does “catalogue-1” need to become “catalogue-2”, “catalogue-3”, etc. based on what catalogue the css is being put into?

    Yup, you should adjust the catalogue-# based on where the CSS is added.

    For the catalogue, we tried accessing the original link you posted (i.e. …/auto-draft/) but received a ‘page not found’ error. If you have any further questions in regards to the catalogue height, make sure to let us know the new catalogue URL ??

    Thread Starter therealcrazy8

    (@therealcrazy8)

    Sorry about that. I am working this into my woocommerce and ended up renaming that page to “shop”. I already did try what you recommended, but it still doesn’t seem t be working. If you could take a look at it, now thta you know the page, that would be awesome.

    Hi therealcrazy8,

    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: 1175px;
}

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

    
.prod-cat-container {
height: 800px !important;
}
.prod-cat-inner {
height: 800px !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.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘large space between displayed catalogs’ is closed to new replies.