Problems with extra CSS for UPCP Product Cataloge

Hi mobilmeckaren,

For #1:
Are you referring to the catagories/subcategories boxes or the catalogue itself? We tested on our side and the catalogue/individual product pages are full width of their container.

For #2:
It seems that you have Catalog Overview enabled. The sidebar is designed to show in the catalogue itself only.
To disable this setting, go to “Options”->”Basic” and scroll down to the “Catalog Overview” and set it to “None”. That way, when a user clicks “Webshop”, they’ll see the catalogue with the sidebar immediately.

For #3:
Do you know which product causes this issue? We tried adding “Beskrivning” to the cart, but the cart message appeared in the side, with no unusual text and it didn’t seem to block anything:

Thanks for your reply! Sorry for not explaining more thoroughly.

For #1 I have this screenshot to show what I ment.
Why is it on left!?

#2 Is fixed with your help, Catalog Overview disabled works much better for me. Thanks.

#3 It only appears on mobile units, I just noticed.

Looking forward to your reply. Thanks!

About #1 – looks even worse when I’ve disabled Catalog overview because now users cant see the categories pictures they slide out too much to the left! (Edit: For the mobile version of the page- i use WPtouch plugin for mobile version maybe its some type of crash between the two plugins?

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

Hi mobilmeckaren

We see that each of your thumbnails had a set with you can change this by assigning them percentage values in the custom css field.

Hope this helps.

Best regards.

Could you guide me how to do that? ?? I’m not good with CSS.

Hi mobilmeckaren,

As a test, could you reenable the “Catalog overview” mode, then enter the code below into the “Custom CSS” box on the Edit Catalogue page:

.upcp-overview-mode {
display: flex;
max-width: initial;
justify-content: center;}

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

Did it, the pictures ended up beside each other instead of on top of each other!.. so i changed it back.

I’ve decided to remove category images. But I still have problems.
All I need help with now is on how to fix this
Problem
Because the “add to cart” / blue text “l?gg till i Kundvagnen”
Its different on each item depending on how long the item description is..

On mobile units this is even more messy because the “l?gg till i kundvagne / add to cart” button is even OUTSIDE the box for the item…

So how do i make it so each item in the webshop has the add to cart button localized at the bottom of each product, without bugging when i make longer descriptions?
Best regards Sion

Hi mobilmeckaren,

Can you add this code to the ‘Custom CSS’ box in your Catalogue:

.prod-cat-item.upcp-thumb-item.upcp-thumb-adjust-height {
    height: auto!important;
    flex-direction: column;
    display: flex;}

.upcp-thumb-details-link {
    margin-top: auto;}

Yes, I’ve done it now. This made so the add to cart text appears at the absolute bottom of all products, both in mobile units and on computers, which is what I wanted.
However on my computer the problem remains of me having to name the products with short names or else some “boxes/products” are bigger than the others, just like i complained about in the beginning. So this almost fixed it but not completely.

Hello @mobilmeckaren,

If you go to Options > Basic > Catalog Page Display and enable Auto-Adjust Thumbnail Heights, does it resolve the height issue?

From there you might need some custom css to align things. We can do this after you have enabled the Auto adjust option.

I also noticed that some of your products ordered in an interesting way. Have a look here. You might need some custom css for this as well. We will see after you enabled the Auto adjust option.

Besides that issue, was there anything else?

I’ve had Auto-Adjust Thumbnail Heights on this whole time. The products ordered like this after the last change i made that you asked me to do.

Yes, another problem: on mobile units now the “add to cart” button ends up underneath the product price, i want it to the right of it.

Also another problem is that all products have like a grey area around the images, do i have to make all product images transparent or is there any way to change that background color to white instead?

And.. I’m wondering how to change these icons: Icons
I want to make them into text instead of those Images, or possbily put my own images there.
Last but not least: is there any way to make the “detail” showing of the products “add to cart” function not bug like this:
Problem
Thank you.

Hi @mobilmeckaren,

It seems like the Custom CSS we provided earlier is conflicting with the layout.
Could you remove the following custom css:

.prod-cat-item.upcp-thumb-item.upcp-thumb-adjust-height {
    height: auto!important;
    flex-direction: column;
    display: flex;}

.upcp-thumb-details-link {
    margin-top: auto;}

Could you add the following custom css:

.upcp-thumb-title {
    min-height: 105px;
}

After making those changes, the product price issue on mobile devices resolved itself, as you can see here. Do you see the same thing?

You can add the following custom css to make the image background white:

.upcp-catalogue-link {
    background: white;
}

You can definitely change those view icons using the following custom css:

.Black-thumb-icon {
    background: url(https://img.icons8.com/ultraviolet/40/000000/domain.png);
}
.Black-list-icon {
    background: url(https://img.icons8.com/ultraviolet/40/000000/domain.png);
}
.Black-details-icon {
    background: url(https://img.icons8.com/ultraviolet/40/000000/domain.png);
}

You can add the following custom css to solve that list issue with the details view add to cart button:

.detail-display .upcp-details-text {
    width: 100%;
}

After adding the

.upcp-thumb-title {
min-height: 105px;
}

And removing the

.prod-cat-item.upcp-thumb-item.upcp-thumb-adjust-height {
height: auto!important;
flex-direction: column;
display: flex;}

.upcp-thumb-details-link {
margin-top: auto;}

It looks really good on the computer but on the phone it messed up again so the add to cart button is outside of the boxes. EDIT: However its now on the right of the amount instead of below, which is good.

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

Details view didnt fix with

.detail-display .upcp-details-text {
width: 100%;
}