[Resolved] Split: Product categories images should have the same height
This thread is resolved. Here is a description of the problem and solution.
Problem: If you're experiencing issues where product category images are not the same height across different language versions of your site, it might be due to custom CSS not being applied to the translated template. Solution: We recommend checking your default language category template for any custom CSS. If found, ensure this CSS is also added to the translated templates. Alternatively, for better management and consistency, add your custom CSS in a centralized location such as Elementor > Custom code, or Appearance > Customize > Additional CSS. Here is an example of CSS that you might need to apply:
.woocommerce ul.products li.product-category a img {<br /> width: 300; /* Ensures the image fills the container width */<br /> height: auto; /* Adjusts height to maintain aspect ratio if needed */<br /> aspect-ratio: 1 / 1; /* Forces a square format */<br /> object-fit: cover; /* Crops the image without distortion */<br />}
If this solution does not apply to your case, or if it seems outdated, we highly recommend checking related known issues at https://wpml.org/known-issues/, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If issues persist, please open a new support ticket at WPML support forum.
This is the technical support forum for WPML - the multilingual WordPress plugin.
Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.
I applied the changes to my live site and it worked 🙂 Thank you for that.
I mentionned at the beginning of our mail exchange that some changes in the product category pages are not synchronized and asked if this issue was related
Product categories images should have the same height. They have in English (site language) but not in the transalated pages although the templates and pages are translated.
you can see it here: hidden link hidden link
thanks, but as said I can not access wp-admin, it redirects to homepage.
<em><u>hidden link</u></em>
301 Moved Permanently
<em><u>hidden link</u></em>
302 Found
<em><u>hidden link</u></em>
301 Moved Permanently
<em><u>hidden link</u></em>
200 OK
Please check and make sure it works fine, so I can access it and login.
In your default language category template "Categories Lake", you are adding custom CSS, same CSS is not being added/ copied to the translated template.
Note, it would be better to add Custom CSS in one place, like Elementor > Custom code, or Appearance> Customize > Additional CSS. That way you have all in one place, and can adjust and keep track of it.
You can manually edit the translated template and add custom CSS there, or, as advised, add all of your CSS to one place, and adjust it how you need it.
.woocommerce ul.products li.product-category a img {
width: 300 /* S'assure que l'image prend toute la largeur du conteneur */
height: auto; /* Ajuste la hauteur pour maintenir le ratio si besoin */
aspect-ratio: 1 / 1; /* Force un format carré */
object-fit: cover; /* Recadre l'image sans déformation */
}
That was too easy for you 😉
Indeed I had to add a custom code as, after an update, image sizes were not the same anymore.
Thanks for your advice 🙂 I will do that.
Should I check the option "make appear as translated" in elementor?
I am not sure what you are referring to here, and what you want to check as appear as translated? >"Should I check the option "make appear as translated" in elementor?"
You probably mean custom post type translation settings, if so, do not change them. I assume it is set to Not translatable, and it should stay like that, so it applies to languages.
