WPML and Menu

This topic has 16 replies, 2 voices, and was last updated 2 months ago by Hung Pham.

Viewing 17 posts - 1 through 17 (of 17 total)

Author

Posts
May 10, 2025 at 6:27 pm #659751

9skies
Participant

Hello,

I am unable to place my customized WMPL language switcher in the menu using the header builder. Once I do, it ignores all the properties set: no text, only flags, no dropdown. I tried addressing that by adding it to the Right top Menu, which worked, but only partially, because it returns an error if the page is not translated yet.

Is there a way to use the customized switcher in the header builder?

Thank you in advance

Attachments:
You must be logged in to view attached files.

May 12, 2025 at 10:32 am #659903

Hung Pham
Keymaster

Hi 9skies,

Thanks for reaching to us and appreciate your patience.

You are using WPML plugin and I suggest you translate the header as described in our article – https://xtemos.com/docs-topic/how-to-use-wpml-with-woodmart/#translating-header-builder

Regards,

May 13, 2025 at 6:47 pm #660436

9skies
Participant

Dear Hung Pham,

my request was regarding the theme ignoring my customization. Not about the translation. I couldn’t find any related material in the link provided. Please see the attachment of the original message.

Regards

May 14, 2025 at 4:26 am #660486

Hung Pham
Keymaster

Hi 9skies,

To assist you in the best possible manner, I kindly ask that you please provide me temporary wp-admin info (wp-admin URL, username, password) to the Private Content area, this will allow me to thoroughly investigate and address your concerns more efficiently.

Thanks for your patience.

Regards,

May 15, 2025 at 3:51 am #660754
9skies
Participant
Hello,

Sure, I will place it in private part.
- This reply was modified 2 months, 1 week ago by 9skies.
May 15, 2025 at 1:42 pm #660892

Hung Pham
Keymaster

Hi 9skies,

Thanks for details.

Please use WPML Languages element instead. https://ibb.co/L4FwPWT

Regards,

May 15, 2025 at 2:44 pm #660912

9skies
Participant

Dear Hung Pham,

The “WPML Languages element” not that good looking. I thought that if woodmart fully integrates WMPL it also takes the styling from the selector. Nevertheless, since there is no solution at the moment, please consider this as a possible update. Thank you for a great theme.

Best Regards

May 16, 2025 at 6:03 am #661058

Hung Pham
Keymaster

Hi 9skies,

Provide me with the mockup of the styles that you try to achieve and we’ll send proper instructions if it’s possible.

Regards,

May 16, 2025 at 8:21 pm #661289
9skies
Participant
Hello,

styles are as follows:
.wpml-ls-menu-item {
position: relative;
border-radius: 50%;
overflow: hidden;
}

.wpml-ls-menu-item > a {
width: 40px;
height: 40px;
}

.wpml-ls-menu-item .wpml-ls-flag {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
max-width: none;
object-fit: cover;
}

They are applied to WMPL>Languages>Additional CSS. Then a menu Item is added with the settings in screenshot 1. The result is screenshot 2. Problem with this approach is:
- It produces a weird text “WRONG MENU SELECTED when the page is not translated and WPML’s “skip language” option is selected. Screenshot 3
- It is inconvenient and invisible in a menu in administrative panel.
The problem with your header builder element for WPML is that it is not customizable from the header options, so it is not good looking. It still works fine.

In case you are wondering why I am not choosing “Link to home of language for missing translations” in WMPL – it is horrible, and ruins customer experience.

Please consider adding customization options to your WPML header element, or just give an option to assign a CSS class.

Thank you in advance.
Best Regards

Attachments:
You must be logged in to view attached files.
May 18, 2025 at 3:52 am #661407

Hung Pham
Keymaster

Hi 9skies,

Thanks for your patience.

1. Styling

According to the screenshot 2, it looks like same what as wanted. You only want to display flags without text? Please confirm me back.

2. Wrong menu selected

Navigate to WoodMart > Header builder > edit default header (highlighted star icon) or you can go through the admin bar directly https://prnt.sc/Ct9ehRDvvDV9 and remove Menu element https://prnt.sc/ZMlnASW5l8OY

Clear the cache and recheck the issue.

Regards,

May 20, 2025 at 3:05 pm #661881
9skies
Participant
Dear Hung Pham,

1. Flag without text, rounded, enlarged, cropped, centered. Please also refer to CSS provided.

2. If I remove the menu element, it will not be displayed at all. It is added to a menu from WMPL. Screenshot 1 from the previous message.

Regards
- This reply was modified 2 months ago by 9skies.
May 20, 2025 at 7:41 pm #661981

9skies
Participant

additional: it shows only the opposite language, it is like a toggle switch

May 21, 2025 at 6:05 am #662037
Hung Pham
Keymaster
Hi 9skies,

1. Please use below custom CSS:
```
.whb-col-right div:last-child span.nav-link-text{
    display: none;
}

.whb-col-right div:last-child .woodmart-nav-link img{
    width: 50px;
    border-radius: 50%;
    max-height: 50px;
}
```
2. Please follow below articles to translate menus:

https://wpml.org/documentation/getting-started-guide/translating-menus/
https://xtemos.com/docs-topic/how-to-make-woodmart-multilingual-with-wpml/

Regards,
May 21, 2025 at 6:50 am #662041

9skies
Participant

Like this (screenshot 1)?

Dear Hung Pham,

1. I am grateful for you trying to help me.
2. I understand that you deal with dozens of other requests at the moment.
3. I don’t expect Woodmart to make customizations for me alone at the price I paid for the theme.
4. The theme is great and well thought

Since I fully described the problem in my previous messages and this becomes repetitive, at this point, I am not expecting you to provide me with a solution anymore. It is not optimal or even impossible to make a toggle switch button for WPML from a dropdown using only CSS. JS is needed at least.

Therefore, what I am asking instead is to consider adding customization to Woodmart’s header element sometime in future, to make the theme even better.

Best Regards

May 21, 2025 at 9:38 am #662083

Hung Pham
Keymaster

Hi 9skies,

Thanks for your kind words.

You can create a future request here – https://woodmart.canny.io/feature-requests so our developer will consider it.

Kind Regards,
Hung PD

May 21, 2025 at 10:28 am #662123

9skies
Participant

Dear Hung Pham,

I will definitely do the request. Thank you for the link!

In case someone is looking for a workaround like me, this is the most I could get using CSS:

(please note that selectors like “.whb-z6jm64b142tjyutqayc3” should be replaced with your actual selectors for desktop and mobile, since the theme does not allow to set custom selectors for this exact element yet. You can play with the sizes to make it more round or oval)

/* WPML Language Selector Global */
.whb-z6jm64b142tjyutqayc3 > ul.menu > li.menu-item > a.woodmart-nav-link,
.whb-iewfohiv09ofh4iieg5r > ul.menu > li.menu-item > a.woodmart-nav-link,
.whb-z6jm64b142tjyutqayc3 div.wd-dropdown-menu ul li a,
.whb-iewfohiv09ofh4iieg5r div.wd-dropdown-menu ul li a {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
}

.whb-z6jm64b142tjyutqayc3 img.wd-nav-img,
.whb-iewfohiv09ofh4iieg5r img.wd-nav-img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 25px !important;
max-width: none;
max-height: none;
}

.whb-z6jm64b142tjyutqayc3 span.nav-link-text,
.whb-iewfohiv09ofh4iieg5r span.nav-link-text {
display: none;
}

.whb-z6jm64b142tjyutqayc3 > ul.menu,
.whb-iewfohiv09ofh4iieg5r > ul.menu {
display: inline-block;
vertical-align: middle;
}

/* WPML Language selector Mobile */

.whb-iewfohiv09ofh4iieg5r > ul.menu > li.menu-item > a.woodmart-nav-link,
.whb-iewfohiv09ofh4iieg5r div.wd-dropdown-menu ul li a {
width: 32px;
height: 32px;
}

Regards

Attachments:
You must be logged in to view attached files.

May 21, 2025 at 4:40 pm #662276

Hung Pham
Keymaster

Hi 9skies,

Thank you so much for sharing solutions.

Keep us in mind for future questions and concerns, we’re always here to help!

Regards,
Author

Posts