Woocommerce > Products > Display issues

[10foldDigital]

Hi,

Re: the main product thumbnails page:

Here is what it currently looks like: http://223.27.24.84/~helixandrew/street-boards-australia/

1. Is it possible to crop the product roll over image to match the same width as the product image, and reduce the space between each product like this: http://223.27.24.84/~helixperception/street-boards/

2. And possibly word wrap the price below the product title with the product title and price centered and add the currency code ie. AUD? (I have Woocommerce currency switcher and Geolocation based products installed, but it looks like something is preventing the code to appear).

I’ve played around with the woocommerce products > display settings, but can’t get my head around it.

Thanks in advance, you guys have been a huge help recently – its been much appreciated.

Cheers

Andrew

[David Martin – Support]

Hi,

1) Your custom CSS is causing this. I’d start by removing that or re-working it.

2) Looks like you have done this?

[10foldDigital]

This reply has been marked as private.

[David Martin – Support]

1) Have you got two board examples, currently I see this:

2) That is what I already saw on your site.

[10foldDigital]

Hi David,

1. Yes, this is an example of the old version – this shows how close the products are to each other, + the roll over is the same width as the product: http://223.27.24.84/~helixperception/street-boards/

2. Thats the old site, that had too many bugs from different developers, so I started from scratch and only took advice from your forums to keep it clean.

Thanks

Andrew

[David Martin – Support]

1) Can you disable the child theme, the styles are interfering with the product images:

2) This will do that for you:

.woocommerce ul.products li.product h3,
.woocommerce ul.products li.product .price {
    width: 100%;
    display: block;
    clear: both;
}

[10foldDigital]

Hi David,

1) Is that code from the old site (http://223.27.24.84/~helixperception) or the current one? (http://223.27.24.84/~helixandrew) I didn’t think I had the child theme installed on the current one and Bryan only worked on the old one “style-bryan.css”. If so, where can I uninstall it?

2) Great, the word wrap worked, what could be preventing the currency from not appearing?

Thanks

Andrew

[David Martin – Support]

1) Yes, apologies I was getting confused. This has no child theme: http://223.27.24.84/~helixandrew/

To clarify you want to:

a) Remove the product gutters from the products carousel?
b) The image is the same width as the 1st image product already, both are 150x200px

[10foldDigital]

Hi,

Its from the products thumbnails page http://223.27.24.84/~helixandrew/street-boards-australia/

I‘m trying to make the products (inc the roll over image) 105 x 325px with a 10px horizontal space between each image left to right, currently the images are 270 x 360px (based on the roll over) with about a 200px space between each image left to right. * If need be, I’d like to remove the wish list icon and change the roll over test to ’SELECT’ If thats what is preventing it?

If I change the size in Woocommerce > catalogue images, it doesn’t work.

Thanks

[David Martin – Support]

Can you create a mockup of the roll over, illustrating your spacings ect? – It sounds like it will require theme modification.

Each time you change the image size you need to rebuild your images using the mentioned plugin.

[10foldDigital]

Hi,

I’ve attached a mockup of the product sizing with distance between images and roll over that we’re trying to achieve.

I’ve tried entering these dimensions and regenerating the thumbnails, but this doesn’t seem to work.

Thanks

Andrew

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Thanks that helps clarify. I you now change the image dimensions to 100x300px and then use the plugin to rebuild the images. Once complete, add this:

.carousel-wrap .carousel-item, 
body .carousel-wrap ul.products li.product {
    padding-left: 0px !important;
    padding-right: 0px !important;
    min-height: 300px !important;
}

.product-carousel .owl-carousel .owl-item {
    max-width: 100px;
    min-height: 300px !important;
}
ul.products li.product .product-image > img {
  min-height: 300px !important;
}

[10foldDigital]

Hi,

Thanks for sending that through, I followed the steps and added the code, but something is still preventing the images to display in 100x300px. See link: http://223.27.24.84/~helixandrew/street-boards-australia/

Thanks

Andrew

[David Martin – Support]

You’ve changed the layout in the Products PB to not use the carousel, the code I provided was for that, I have changed the first product items back to the carousel version:

[10foldDigital]

Hi,

Yes, I noticed with carousel selected to ‘yes’ it worked, thank you very much.
Is there a way I can change the aqua arrows (to the left and right) of the carousel to a dark grey circle with white arrow?

Thanks