Home / Forums / WoodMart support forum / layout for mobile errors
Home › Forums › WoodMart support forum › layout for mobile errors
layout for mobile errors
- This topic has 6 replies, 2 voices, and was last updated 1 month, 2 weeks ago by
Aizaz Imtiaz Awan.
-
AuthorPosts
-
May 12, 2026 at 10:40 am #718227
springorchid2008ParticipantHi,
I am trying to modify and adjust the layout for mobile side, some errors can’t find the way to fix:
1. the ” sort by” dropdown, how to edit the background color and text color?
2. the frontpage category title link color, where to change?
3. how to make the pagetitle subcategory show with the big icon pictures instead of plain text?
4. The breadcrumb for shop seems not correct, how to show as : SHOP–WOMEN–SILK PAJAMAS ?Looking forward to your kind early reply.
Best regards
CathyAttachments:
You must be logged in to view attached files.May 12, 2026 at 2:59 pm #718275Hello,
01. Try to add the following custom css code in Theme Settings > Custom CSS. Change the color code as per your requirements.
.woocommerce-ordering.wd-style-underline select option { background-color: #000000; color: #ffffff; }02. You can change the font by means of the Advanced typography option, which allows you to choose the item from a drop-down or insert your Custom CSS class. Please navigate to the Theme Settings > Typography > Advanced Typography.
Here is the documentation providing more detailed instructions: https://xtemos.com/docs/woodmart/advanced-typography-settings/
03. Try to add the following custom css code in Theme Settings > Custom CSS. You can upload the icon for the search category from Product > Categories > Large category icon.
.page-title .wd-nav-product-cat .wd-nav-img { --nav-img-height: 30px !important; --nav-img-width: 30px !important; }04. The breadcrumb structure in WooCommerce depends on the product category hierarchy assigned to the product.
To display the breadcrumb like:
SHOP > WOMEN > SILK PAJAMAS
Please make sure:
– The product is assigned to the Women category
– “Women” is set as the parent category (if using subcategories)
– The product is not primarily assigned to another category with higher priorityYou can check this from:
Products > Edit Product > Product CategoriesBest Regards
May 13, 2026 at 9:57 am #718335
springorchid2008ParticipantHi, Aizaz,
Really thanks for your kind reply. according to your response, there are still some troubles puzzled:01. Try to add the following custom css code in Theme Settings > Custom CSS. Change the color code as per your requirements.
.woocommerce-ordering.wd-style-underline select option {
background-color: #000000;
color: #ffffff;
}
— I made it done, but tried to add the hover style, failed. but now the hover background is the defult blue. I’d like to change it into brown02. You can change the font by means of the Advanced typography option, which allows you to choose the item from a drop-down or insert your Custom CSS class. Please navigate to the Theme Settings > Typography > Advanced Typography.
—- I have added the advanced typography with the category, but there is no setting for linked hover color. but now the category title hover color is white, no idear how to change it.
03. Try to add the following custom css code in Theme Settings > Custom CSS. You can upload the icon for the search category from Product > Categories > Large category icon.
.page-title .wd-nav-product-cat .wd-nav-img {
–nav-img-height: 30px !important;
–nav-img-width: 30px !important;
}
—- It works, but how to delete the title words next to the category image, or move the title under the image instead of inline with the images.04. The breadcrumb structure in WooCommerce depends on the product category hierarchy assigned to the product.
To display the breadcrumb like:
SHOP > WOMEN > SILK PAJAMAS
Please make sure:
– The product is assigned to the Women category
– “Women” is set as the parent category (if using subcategories)
– The product is not primarily assigned to another category with higher priority
—- I have checked every above items, there is nothing wrong with each sub-category and the product, but now, the bug is the breadthrum doesn’t show the parent categroy both for the sub-category product archive and the single product.5. In addtion, I need to change the hearder meau’s dropdow background and text color, together with the hover background and text color. maybe I need you help to write the Css once again. really appreciated.
Best regards,
CathyYou can check this from:
Products > Edit Product > Product Categories1Attachments:
You must be logged in to view attached files.May 13, 2026 at 10:15 am #718340
springorchid2008ParticipantHi, Aizaz,
The No.4 bug , relate to the breadthrum not show the parent category have fixed, just not select and check the SEO selection. so don’t care about it by now. thanksPlease help to fix other bugs, thanks very much.
Cathy
May 13, 2026 at 2:33 pm #718380Hello,
01. Try to add the following custom css code in Theme Settings > Custom CSS. Change the color code as per your requirements.
form.woocommerce-ordering select[name="orderby"]:hover { background-color: #ff0000; }02. Try to add the following custom css code in Theme Settings > Custom CSS. Change the color code as per your requirements
.wd-cat:hover .wd-entities-title, .wd-cat:hover .wd-entities-title a { color: brown !important; }03. To hide the category title text and show only the category image, please add the following CSS in Theme Settings > Custom CSS:
.page-title .wd-nav-product-cat .nav-link-summary { display: none; }If you want to move the title below the image instead of hiding it completely, use this CSS instead:
.page-title .wd-nav-product-cat li a { flex-direction: column; text-align: center; } .page-title .wd-nav-product-cat .nav-link-summary { margin-top: 8px; }04. Navigate to Theme Settings > Typography > Advanced > Choose the menu dropdown level from the drop-down and change the typography settings.
https://monosnap.ai/file/mfGgLRKocyoNF3Prb4zllYtvc4H8vjBest Regards
May 14, 2026 at 6:30 am #718423
springorchid2008ParticipantHi,
Really thanks for your help. Almost done, except two dropdown form style need your help more.
I hope to change the hover backgournd for each select option of the dropdown form, one is the header main navigation meau. another is the sort by of the archive page.
How to change the selector ‘s hover background into the beige or black?
Need your help for CSS.
Very appreciated for it.
Best regards
CathyAttachments:
You must be logged in to view attached files.May 14, 2026 at 11:11 am #718444Hello,
01. The hover background color for native
<select><option>dropdown items is controlled by the browser/operating system, so CSS support for changing the hover background of each option is very limited and may not work consistently across browsers.02. Try to add the following custom css code in Theme Settings > Custom CSS. Change the color code as per your requirements.
.wd-sub-menu li > a { border-radius: 6px; padding-left: 12px; padding-right: 12px; } .wd-sub-menu li:hover > a { background-color: #5e4d37 !important; /* beige/brown */ color: #ffffff !important; }Best Regards
-
This reply was modified 1 month, 2 weeks ago by
Aizaz Imtiaz Awan.
-
This reply was modified 1 month, 2 weeks ago by
-
AuthorPosts
- You must be logged in to create new topics. Login / Register