Skip Navigation

[Resolved] Woo images not aligning and rendered properly.

This support ticket is created 5 years, 4 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 22 replies, has 3 voices.

Last updated by Christian Cox 5 years, 3 months ago.

Assisted by: Christian Cox.

Author
Posts
#1164931

I am sending you a video link below:

hidden link

could you please see what is with images.
I want all images on an archieve page to be of same size.
i am experimenting with different image sizes as my users will be uploading different image sizes.
where can i send you my site's username and password for support?

#1165061

could you please see what is with images.
I want all images on an archieve page to be of same size.

Various size options are available. Here is the documentation for the wpv-woo-product-image shortcode: https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-woo-product-image

Please share the code you have used to build this View or WordPress Archive.

#1165380

where can i send you username and password details.
It's a demo site but i don't want to share credentials publicly here.

#1165613

You can provide login credentials in the private reply fields here.

#1165760

Unfortunately there is no simple way to achieve exactly what you want if you allow Users to upload images at different sizes. You would have to add custom code that manipulates the images to fit in a specific size. I think there are a few other options:
- Use CSS to create a wrapping box with a specific height and width, with overflow hidden, and display the image inside that box. The image will be cropped to the size of the wrapping box.
- Use CSS that sets the row height automatically. This will help the results display in a more consistent grid, though the images will not be consistent.
- Use custom code that validates the image size when Users upload it, and reject the image if it is not to those specifications. We have the cred_form_validate API to help with image size validation, and an example is available here: https://toolset.com/forums/topic/featured-image-size-validation-in-form/

#1166433

All of the images that I uploaded were showing fine when I was using my theme template files.
when I activated woo views and used your template it is showing like this.
In customizer woo images are set at 300 and 600 pixels and there are three options below 1:1 and custom aspect ratio and uncropped. which one should I choose? how woocommerce scales the images?
should I use post featured image or product image in loop editor?
There is no shop_catalog option showing when I edit an image in loop editor, only 150x150, 600 and custom are showing.
all of my user's pics are going to be at least 1024x1024 I think so because I have read somewhere even a 2 mp phone camera produces higher resolution than that.
could you please look at my website again and see what's wrong with the images on this page
hidden link

#1167169
Screen Shot 2018-12-16 at 11.46.14 AM.png

All of the images that I uploaded were showing fine when I was using my theme template files.
when I activated woo views and used your template it is showing like this.

Your theme includes custom HTML, CSS and JavaScript that handles sizing, centering, and interacting with product images, as well as responsive layout adjustments. When you activate the Toolset WooCommerce Views template, that custom code is overridden with your design in Toolset's templates.

I temporarily deactivated Toolset plugins to see how your theme's template was constructed, and I'm attaching a screenshot here. There is complex HTML, CSS and JavaScript involved, written specifically for your theme. If you want to replicate the theme's display in your own template, you can try replicating this markup generated by your theme. Then replace the content using Types and Views shortcodes. Otherwise, you'll be responsible for writing your own template code that handles image sizing, centering, interactions, and responsiveness.

#1167181

ok, I will try to add my own CSS styles.
could you please give me any CSS example to start with because I am not a coder.
I don't need any javascript, for now, I just want to show products.

#1167858

could you please give me any CSS example to start with because I am not a coder.
If you aren't a coder, I do not recommend you write your own CSS. It will be more practical to recreate your theme's code in the loop of your template.
https://css-tricks.com/snippets/css/

#1171263

I am using the shortcode [wpv-woo-product-image size='medium'] on the single product page and on the archive page
but there is a lot of difference between sizes.
for example, this is a link to the single product page

hidden link

below is a link for the custom taxonomy archive page

hidden link

another example
hidden link
here the image is almost similar to the single product page

one more thing I want to ask
while building a layout how to increase the height of one column and in the second column in the same row i want to add more rows.

#1172052

I am using the shortcode [wpv-woo-product-image size='medium'] on the single product page and on the archive page
but there is a lot of difference between sizes.

The same image is displayed in both places:
hidden link
Your theme has JavaScript and CSS in place that stretches or shrinks the image to different sizes on the single post and on the archive.

while building a layout how to increase the height of one column and in the second column in the same row i want to add more rows.
Use a Grid of Cells in the second column: https://toolset.com/documentation/user-guides/learn-creating-using-grids/
If you have questions about that, please open a separate ticket so we can discuss in more detail.

#1172178

doesn't views output "[wpv-woo-product-image size='shop_single']" renders the default woo image sizes?
anyways i have written to the theme support.
What is with loop editor CSS i never understood the loop editor code?
If i send you the theme files could you please have a look at it.

#1172265

ok the problem seems to be coming from views css i think. yith support has added the following css:

.js-wpv-view-layout .woocommerce-product-gallery {
opacity: 1 !important;
width: 100% !important;
}

.js-wpv-view-layout .woocommerce-product-gallery .onsale {
display: none;
}

.js-wpv-view-layout .out-div span.onsale {
left: 15px;
}

now i will try to make it look beautiful. I am watching some css tutorials.
Please check your css files.

#1172309

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hello,

Christian is currently on Holiday at the moment and won't be available until Thursday.

Thank you for the patience.

#1173494

doesn't views output "[wpv-woo-product-image size='shop_single']" renders the default woo image sizes?
Here is the documentation for this shortcode: https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-woo-product-image
There are several variables, including custom CSS and JavaScript applied by the theme.

What is with loop editor CSS i never understood the loop editor code?
Could you please restate your question? I do not understand what this means.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.