[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.
Copying the code in elementor didn't bring the expected result but adding it in Appearance> Customize > Additional CSS helped.$
Thank you 🙂
Cheers
Patrick
Manage Cookie Consent
We use cookies to optimize our website and services. Your consent allows us to process data such as browsing behavior. Not consenting may affect some features.
Functional
Always active
Required for our website to operate and communicate correctly.
Preferences
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
Statistics
We use these to analyze the statistics of our site. Collected information is completely anonymous.The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
Marketing
These cookies track your browsing to provide ads relevant to you.
