Home Forums WoodMart support forum layout for mobile errors

layout for mobile errors

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #718227

    springorchid2008
    Participant

    Hi,
    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
    Cathy

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

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    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 priority

    You can check this from:
    Products > Edit Product > Product Categories

    Best Regards

    #718335

    springorchid2008
    Participant

    Hi, 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 brown

    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.

    —- 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,
    Cathy

    You can check this from:
    Products > Edit Product > Product Categories1

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

    springorchid2008
    Participant

    Hi, 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. thanks

    Please help to fix other bugs, thanks very much.

    Cathy

    #718380

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    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/mfGgLRKocyoNF3Prb4zllYtvc4H8vj

    Best Regards

    #718423

    springorchid2008
    Participant

    Hi,
    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
    Cathy

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

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    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

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