WoodMart theme mega menu question

Dear Support Team,

I have a question regarding the mega menu of the WoodMart Megamarket theme. On a website I’m currently working on, I have 9 items in the mega menu and most of them are two-word phrases. This leads to space related problems in the menu – due to the phrases length, when the website is displayed on smaller screen resolutions, the menu goes into two separate lines (attached is a screenshot for your reference) with the last several menu items displayed on a second menu line. I need all menu items to be in one level. A quick and easy solution to my problem would be having each of the mega menu item phrases written on two separate lines. Attached is a screenshot from another website, that will give you a better idea about the solution I am looking for. Being able to have the menu item images/icons bigger than in the original theme would be perfect.

The website is currently under construction (with a under construction plugin) and will require for you to log in in order to check the situation yourself.

Please let me know whether there’s a solution for that issue!

Best regards,
Angel

Attachments:

You must be logged in to view attached files.

Hi angel.stankov,

Thanks for reaching to us and appreciate your patience.

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.

Regards,
Hung PD

Hi Hing PD,

I’m sending you the temporary admin login details to the Safe2Wear website. As you did not provide an e-mail address for that temporary login, I will use one of my e-mail addresses.

I hope I managed to explain what I need for the Mega Menu of the website. Let me know if there is any need for clarifications.

Best regards,
Angel Stankov

Hi angel.stankov,

Please add the following Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.wd-header-nav > ul > li {
    flex: 1 0 0;
    text-align: center; 
    margin: 5px 0; 
}

You also need to increase the header height as well.

Regards,
Hung PD

Hi Hung PD,

Thank you for your help. The code you provided fixed the issue I reported. As advised by you, I also increased the header height, so the first problem is solved and out of the way.

I have some other questions and problems to solve and I don’t know whether it’s more appropriate to start a new topic on the forum or to continue the conversation here. Please, excuse me if I’m doing the wrong thing. So, here’s a short list of my questions:

1. Despite the fact the “Enable short description” option is “ON” (“Elements” subsection of the “Single Product” section of the “Theme Settings” page), the short description text does not appear on the single product page. Attached you will find a screenshot. How can I fix that issue?
2. On the Shop page grid, products with longer product names cannot be displayed. Attached is another screenshot showing that only part of the product name is visible. A possible solution would be to have the product name displayed on two lines.
3. The problem described above occurs only when the product grid displays 3 or 4 items on each row. When 2 items are displayed on a single row, there’s enough space for the full product name, at least for most of the products. Do you think it would be possible to generally hide or disable the option for displaying 4 items per row in the grid?
4. Why are related products not displayed, despite the fact the option is activated?
5. Size charts are NOT displayed, despite the fact a size chart is created and selected for a product. Why is that? For example, you can check this product:

https://safe2wear.bg/product/bwolf-delta-%d0%bb%d1%8f%d1%82%d0%bd%d0%be-%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%bd%d0%be-%d1%8f%d0%ba%d0%b5-3/

6. I cannot control the position of the breadcrumb on the product page. Why is that?
7. I cannot control whether the stock progress bar is enabled or disabled – it is displayed no matter what option I choose.

I have some more questions, but I will stop here for now. Please, let me know if it’s more appropriate to start new support forum topics and ask questions there.

Thank you in advance for your help. Looking forward to hearing from you!

Best regards,
Angel

Attachments:

You must be logged in to view attached files.

Hi angel.stankov,

Thanks for your patience.

Admin details are incorrect, please double check. https://ibb.co/nNWDhtns

Regards,
Hung PD

Hi Hung PD,

It’s strange you couldn’t log in as I hadn’t modified the credentials. Yet, I changed the password for the XTemos user and I am sending you the new login detail.

Looking forward to hearing from you!

Best regards,
Angel

Hi angel.stankov,

Thanks for your patience.

1, 4, 5. You are using a Custom Single Product layout and product archive layout, which is built with WoodMart WooCommerce builder.

Navigate to Layouts > edit the single product layout and add Product short description element to show it and use Products (grid or carousel)element and ensure the Data Source is set to Related Products, you can use Size guide element as well.

Further, you can read more about the Layout Builder here: https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

2, 3. Please try using the below Custom CSS code and paste it to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section:

[class*="title-line-"] div.wd-product .wd-entities-title {
    max-height: calc(var(--title-line-count, 1) * var(--title-line-height, 2.4em));
    line-height: var(--title-line-height, 1.4em);
}

6, 7. You can see #1 answer for more details.

Regards,
Hung PD

Hello Hung PD,

Thank you very much for all your help on my questions so far! I have a few more questions at this stage:

1. On our work clothing website there are some products (clothes, shoes, etc.), that are in more than one colour. Many companies prefer such work clothes for their employees, as they correspond to their brand colours. For example – a jacket might be Red/Gray. For example:

https://safe2wear.bg/product/cxs-perseus-%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%bd%d0%be-%d0%bb%d1%8f%d1%82%d0%bd%d0%be-%d1%8f%d0%ba%d0%b5-2/

Generally, the color attribute label is selected using a color palette. I am not sure if this is a Woodmart related question, or if it is a general WooCommerce question, but do you think it is possible to have a two-color attribute label and if yes – how could that be done? It would be really helpful to have a two-color attribute label in the shop filter, for example. I am attaching a couple of screenshots for your reference.

2. Thank you for explaining layouts. It was really useful and now I can customise my pages. However, I have one question, related to the single product layout. At the bottom of the page, there is a “Products (grid or carousel)” element. For that element I can choose among many options, but I don’t see the option to show cross-sell products. Is it possible to show cross-sell items there?

3. And just one more question this time – it’s a bit difficult to explain, so let me give you an example:

This item:

https://safe2wear.bg/product/bwolf-anax-%d0%bb%d0%b5%d1%82%d0%b5%d0%bd-%d0%b3%d0%b0%d1%89%d0%b5%d1%80%d0%b8%d0%b7%d0%be%d0%bd/

and this item:

https://safe2wear.bg/product/bwolf-anax-%d0%bb%d0%b5%d1%82%d0%b5%d0%bd-%d0%b3%d0%b0%d1%89%d0%b5%d1%80%d0%b8%d0%b7%d0%be%d0%bd-2/

are practically the same model of clothing in different colours. While developing my online shop, I decided NOT TO use the colour of a product as a variation forming attribute, as for many reasons I wanted to have the different colours as different items. Yet, it would be really helpful for the users and their experience on the website, if while looking at one of the items there is a hint, letting them know that same model is available in various colours, and even if they could switch between the different color versions using some kind of image swatch, maybe a third party plugin. Is that possible?

Looking forward to hearing from you!

Best regards,
Angel

Attachments:

You must be logged in to view attached files.

Hello,

01. Unfortunately, it is not possible to create a dual-color variation swatch combination using the theme’s default settings. To achieve this, you would need to create separate attributes for each color, such as “Black” and “White,” and assign them individually.

02. Currently, cross-sells are designed by WooCommerce to display in the Cart page based on the products added. However, with Woodmart’s Layout Builder, you can create custom layouts for cart page

Inside this layout, you can use a Products Grid/Carousel widget and set its data source to “Cross-Sells”.

03. Enable the “Use images from product variations” in Theme Settings > Shop > Variable products: https://prnt.sc/SLKIoDeCW_F-

2. Define the image for the variation in the settings of the product – https://prnt.sc/nmOUHmnlVId0

3. Enable the “Text swatch” for the attributes – https://prnt.sc/-J5sJSTq4C3V

4. Navigate to Theme Settings > Shop > Variable products > set them as “Grid swatch attribute to display”: https://prnt.sc/YqWQY2EvNQ2j

When this option is enabled, the swatches will automatically use the images assigned to product variations: https://shrtlink.ai/0Up7

Best Regards,

Hello,

Thank you for your reply! Below are my comments on your answers:

01. That is really sad, but I guess the reason for this limitation comes from the WooCommerce functionality. I don’t think using separate attributes for each of the colours is not the solution I am looking for, because while filtering products on the products page, users cannot select multiple options, i.e. they cannot search and find products in a White and Black colour combination on the website.

By the way, what if I use an image swatch instead of colour palette swatch? Instead of selecting certain colours in the palette, maybe I could create custom circular thumbnails, corresponding to each of the colours and to each of the colour combos. Wouldn’t that solve my problem?

02. Regarding this question – I am attaching again a screenshot from my previous post. As you can see, there is no “Cross-Sells” option, so your suggestion won’t work in my case. Any other ideas?

03. Regarding your reply on my last question – non of the screenshots you are sending me could be loaded for some reason and I cannot see what you suggest. However, I am afraid you did not follow my thought and explanation. The two URL’s I had sent to you lead to two separate products, that are actually two different colour versions of one model of clothing. So instead of switching between variations based on the colour attribute, I’m rather asking whether it’s possible to somehow “link” two separate products and show the website users they are actually the same model of clothing, just in a different colour. I hope you understand what I mean.

Best regards,
Angel

Attachments:

You must be logged in to view attached files.

Hello,

01. For the attributes in the sidebar in archive pages, by default, the theme hides filters that don’t apply to the current selection. If you’d like all attribute filters to remain visible even after applying one, you can adjust this in the widget settings.

Please go to Appearance > Widgets, expand the WoodMart WooCommerce layered nav widget, and set the Query Type to “OR”. This will ensure that the attribute filter headings (like Color, Size, Brand, Condition, etc.) remain visible regardless of what has been selected.

Here’s a reference screenshot: https://ibb.co/44KWYwm

02. Please share the layout URL where you are trying to add the cross-sell products so I can further check on your site and give you a possible solution.

Note: Cross-sell products will show only on the cart page, not on the other product pages.

03. Enable the “Use images from product variations” in Theme Settings > Shop > Variable products:
https://postimg.cc/4K0cgmGy

Define the image for the variation in the settings of the product: https://postimg.cc/phYnnkj7

Enable the “Text swatch” for the attributes: https://postimg.cc/H8dXSFHw

Navigate to Theme Settings > Shop > Variable products > set them as “Grid swatch attribute to display”:
https://postimg.cc/FfxThbRd

When this option is enabled, the swatches will automatically use the images assigned to product variations: https://shrtlink.ai/0Up7

Best Regards,

[Author]

Posts