Formatting

Hi Joey,

1. You can use the “Show Catalogue Information” option (in the “Basic” area of the “Options” tab) to control this.

2. That’s happening because your image is wider than it is tall. If you wanted, you could try stretching your image with some custom CSS. For example:

div.upcp-thumb-image-div img {
max-height: 150%;
}

3. By default, it will show the category, tag and custom field values. There’s no option to edit its content. You can hide it with the following CSS:

.upcp-tabbed-addtl-info-menu, .upcp-tabbed-addtl-info {
display: none;
}

4. If you look at the source code for your page, you’ll see that this is because your theme is applying a global font weight of 400 to all spans. You could try just wrapping your contact tab title in a span.

i.e.

<span>Contact Details</span>

5. You don’t need the “custom-field” part in the shortcode, just [contactdetails].

6. You could use custom CSS to make the boxes, and the images within the boxes, bigger. For example:

.upcp-minimal-img-div {
height: 100%;
width: 100%;
}
.upcp-minimal-img {
max-height: 100% !important;
max-width: 100% !important;
width: auto !important;
height: auto !important;
display: block;
margin: 0 auto;
}

Hi Joey,

#2
The CSS cropping will only work if an image isn’t “too tall” or “too wide”.

Anyway, the image for “KOOKAI Striped Ponte Skirt” is a bit too tall (and/or not wide enough), so in cases like this, I’d try cropping off excess space from the top/bottom. Here’s a version of that is 1368 x 1778 (instead of the original 1368 x 2048):
Link to modified image

#4:
If you go to the Product Page tab, then you can replace the “Contact Details” Tab name text with this instead:
<span>Contact Details</span>

#5
Also on the “Product Page” tab, use this code in the Content text box:
[contactdetails]

#6
This CSS should be added to your Custom CSS box on the edit Catalogue page.

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

Hi Joey,

On what page(s) are you applying the related products/recent products widget?

I’m asking because widget code is a little different, so we’d need to add some extra CSS to make it match the other styles we added.

Hi Joey,

For the recent products widget on the homepage it actually won’t take the custom CSS that you specified on the edit catalogue screen because the catalogue isn’t being loaded on that page.

You could try adding the CSS to your (child) theme’s style.css file. Alternatively, many themes offer a custom CSS or “Additional” CSS option in the WordPress Customizer.

You would still need to use the same CSS as provided above.

.upcp-minimal-img-div {
height: 100%;
width: 100%;
}
.upcp-minimal-img {
max-height: 100% !important;
max-width: 100% !important;
width: auto !important;
height: auto !important;
display: block;
margin: 0 auto;
}

Hi Joelle,

It looks like the container for the images is a little too tall (in several cases, it seems to be covering the titles).

Here’s some CSS you can add to the bottom of your (child) theme’s style.css file:

.upcp-minimal-product-listing {
height: auto!important;	
min-height: 330px;}

For the link issue you mentioned on http://www.dressforchange.co/, what URL did you use in your Recent Products widget (i.e. in the “The URL of your catalogue:” section)?