[HELP] New User

  • Resolved achaitman

    (@achaitman)


    9 years, 8 months ago

    Is there a template CSS that I can use to modify to fit my store’s look? So far, I am having a lot of issues with only using the options within the plugin itself. Some of which are:

    clicking on an image increases the size to be very wide and distorts the image so it looks terrible on a computer monitor but on the phone it looks great.

    Other things that happen are when I use a search filter it will duplicate my categories and display them twice. Also, if I change how the items are displayed (thumbnail, list, or detailed) the items extend down below the page footer or get overlapped by it.

    I am very new to wordpress so if I could get any direction or guidance I would very much appreciate it. Thank you.

Viewing 15 replies - 1 through 15 (of 17 total)
1 2
  • Thread Starter achaitman

    (@achaitman)

    9 years, 8 months ago

    It appears setting my products per page to 10 and disabling infinite scrolling seems to have fixed the duplication issue. Now if I change to detail view the items go through the footer of the page.

    etoilewebdesign

    (@etoilewebdesign)

    9 years, 8 months ago

    Hi Achait,

    Glad to hear you got the first part sorted out.

    For the second thing you mentioned, can you send us a link to your website?

    Thread Starter achaitman

    (@achaitman)

    9 years, 8 months ago

    beta.lillianesjewelry.com

    etoilewebdesign

    (@etoilewebdesign)

    9 years, 8 months ago

    Hi,

    For some reason, a fixed height of 120px is being set to the “prod-cat-inner” class. Not sure why this is happening, but that is what’s causing your issue. The following custom CSS should correct this:

    
.prod-cat-inner {
height: auto !important;
}

    You can add this code to the Custom CSS box on the Edit Catalogue page.

    Thread Starter achaitman

    (@achaitman)

    9 years, 8 months ago

    That seems to have worked. Thanks!

    Any idea what I can do to fix the image stretching that occurs when I click on an item? If I do it on a computer the image is very distorted but if I do it from a phone it looks perfect.

    etoilewebdesign

    (@etoilewebdesign)

    9 years, 8 months ago

    Hi achaitman,

    Do you have “Thumbnail Support” enabled? If so, then it uses the same size image for the thumbnail and main image. This is normally fine. But it looks like you also have lightbox mode on. The image that shows in the lightbox mode tends to be quite a bit bigger, so, in that case, you’re better off disabling the thumbnail setting.

    Thread Starter achaitman

    (@achaitman)

    9 years, 8 months ago

    That makes it better but it still looks funny. like the picture is shifted down in the lightbox mode. any other suggestions? thank you so much for all of your help.

    etoilewebdesign

    (@etoilewebdesign)

    9 years, 8 months ago

    Hi,

    This is happening because it’s defaulting to 100% width and the aspect ratio of your image has a taller height than the aspect ratio of the lightbox. The following custom CSS will change it so that neither the height nor the width can exceed 100%, meaning you shouldn’t get the image “shift” you were talking about.

    #upcp-lightbox-div {
height: 80vh;
margin: 10vh 10%;
}
#upcp-lightbox-div-img-contatiner {
height: 100%;
}
#upcp-lightbox-div-img {
position: relative;
float: none;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
display: block;
margin: 0 auto;
}

    One thing to note, though, is that the transparent label that shows at the bottom of the image in the lightbox will stay at 100% width, regardless of the width of the image. If you wanted to change this, you’d have to add in JavaScript to dynamically resize this label to the size of the image.

    Thread Starter achaitman

    (@achaitman)

    9 years, 8 months ago

    Thank you so much for all of your help. I really appreciate it.

    My current obstacle is getting the contact form 7 integration with the catalog app. whenever i go to “contact us” while looking at an item it displays [contact-form-7 404 “Not Found”]

    Thread Starter achaitman

    (@achaitman)

    9 years, 8 months ago

    another issue i am having is on my product pages, such as: http://beta.lillianesjewelry.com/?page_id=21&SingleProduct=6

    the arrow to cycle through the different pictures has a white arrow but it is not over the grey icon. it is offset. i am struggling to find a solution.

    Plugin Author Rustaurius

    (@rustaurius)

    9 years, 8 months ago

    Hi,

    You can just use custom CSS to change that. Something like the following:

    .upcp-tabbed-button-left, .upcp-tabbed-button-right {
background-color: #f0a;
color: #fff;
}
    Thread Starter achaitman

    (@achaitman)

    9 years, 8 months ago

    .upcp-tabbed-button-left, .upcp-tabbed-button-right {
    background-color: #f0a;
    color: #fff;
    }

    I am not wanting to change the color to pink, the little white arrows aren’t centered on the blocks. is there a way to remove the blocks and only have the white arrows or move the arrows up slightly?

    etoilewebdesign

    (@etoilewebdesign)

    9 years, 8 months ago

    Hi Achait,

    You have two options here:

    1) To centre the arrows within their grey containers, just replace the code we sent you in our previous post with:

    
.upcp-tabbed-button-left, .upcp-tabbed-button-right {
color: #fff;
padding: 2px 17px 7px 10px;}

    OR
    2) if you want to have the arrows by themselves (i.e. with no grey background), you can use this instead:

    
.upcp-tabbed-button-left, .upcp-tabbed-button-right {
color: #fff;
background: none!important;
box-shadow: none;}
    Thread Starter achaitman

    (@achaitman)

    9 years, 7 months ago

    is there a way to disable the list view?

    etoilewebdesign

    (@etoilewebdesign)

    9 years, 7 months ago

    Hi,

    To disable the list view, you can use the the ‘excluded_layouts’ attribute (with a value of ‘List’) to your shortcode.

    For example: 

    
[product-catalog id='1' excluded_layouts='List']
Viewing 15 replies - 1 through 15 (of 17 total)
1 2

The topic ‘[HELP] New User’ is closed to new replies.