Home Forums WoodMart support forum Styling issues after Woodmart theme update

Styling issues after Woodmart theme update

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #420972

    PD11
    Participant

    Hi,

    I’m experiencing a lot of styling issues after the last update. It seems that some custom CSS is not working anymore and elements are back to default styling. I had a different styling for the category titles, product titles and breadcrumbs (different styles on devices also).

    I could use the advanced styling, but this styling for all devices. I’d like to have certain elements styled specific for mobile, but that can’t be done through the advanced styling.

    Could you please let me know how I can adjust the font sizeof these elements for mobile and desktop separately:

    – Product title (category page)
    – Product title (product page)
    – Breadcrumbs
    – Category title
    – Mobile filter element
    – Filter attributes

    Thanks,

    Paul

    • This topic was modified 2 years ago by PD11.
    #421022

    Luke Nielsen
    Keymaster

    Hello,

    It can be done through the theme presets in Theme Settings, create a preset with the rule as in the below screenshot:

    https://monosnap.com/file/q5UdFpZoPfhQx4ctK3IC96x5isB8RG

    After that navigate to Advanced typography (Typography -> Advanced) and create a rule with the style as you need.

    Kind Regards

    #421028

    PD11
    Participant

    Hi Luke,

    I don’t fully understand. How can I apply certain advanced typography only on mobile and some on desktop? I cannot select the preset in the advanced typography in the rules.

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

    PD11
    Participant

    Ah I think I understand how it works. You have to uncheck the inherit tickbox.

    Done that, but unfortunately I cannot change certain elements. For example the product title on category pages and the breadcrumbs. How are they called in the advanced styling settings? Because ‘breadcrumbs’ and ‘product grid title’ do not work.

    regards

    #421039

    Luke Nielsen
    Keymaster

    Hello,

    I give you an example with the “Single product title” in the Advanced typography. If you want some specific styles for the desktop version, you define them in the default Theme Settings (not in presets). In my case, it’s a single product title with an orange color.

    https://monosnap.com/file/Kaj5TkFahcuNTp8hZuXwhsqXO9AAqm

    If I want to change this title color on the mobile device, I define the condition for the preset that indicates that any theme settings in the preset will be overridden on the mobile device.

    https://monosnap.com/file/q1xVjV1Or9gkLsFjkkbMlX6iPtOvTq

    For Theme settings in the preset, I define the blue color for the product title.

    https://monosnap.com/file/l1HVjf7dUSjmEujUMFIBas7417Pbpo

    As a result, the orange color appears on the desktop device and the blue on the mobile device:

    https://monosnap.com/file/ez5X3jTig4NJo32un0fVJV9WCezBl0

    Kind Regards

    #421041

    Luke Nielsen
    Keymaster

    Try to use these rule items – “Breadcrumbs links” and “Single product title”.

    https://monosnap.com/file/yHsjRYTn32QqPqAz3xBzH4dwXCwQ81

    If you want to change the title only on the category page, you should create an additional condition or create another preset.

    Something like that: https://monosnap.com/file/ecbyMM34t0YAHyEoJkmbBgz1w1mgY9

    Kind Regards

    #421048

    PD11
    Participant

    Thanks, will check this!

    Another question – I noticed that more custom CSS is not working anymore. For example to control the width of the add to cart button on mobile. I’d like the button entirely visible instead of going out of bounce, like in the attached example. How can I prevent this from happening?

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

    PD11
    Participant

    Hi Luke,

    There seem to be an issue with the advanced styling. When I try ‘product grid title’, the product titles on the category pages are indeed smaller or bigger (depends on what I change in px). But after a few minutes when I visit the page again, the font size has changed to default again. Using the presets with an extra rule does not work either. And the option ‘breadcrumbs links’ is not working at all. The breadcrumbs are not changing. Do you have a solution for this and otherwise some custom CSS I could use? The product titles on the category pages on mobile are way to big 🙂

    By the way – it’s possible to change font size per device in the advanced typography settings (see screenshot).

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

    Luke Nielsen
    Keymaster

    Hello,

    May I request access to the admin dashboard so I can check these issues on your side?

    Yep, it’s possible to change font size per device and it’s working well via Advanced typography.

    Looking forward to collaborating with you!

    Kind Regards

    #421302

    PD11
    Participant

    Hi Luke,

    Sure, I’m happy you can help out this way. Please find login credentials in the extra information.

    cheers

    Paul

    #421620

    PD11
    Participant

    Hi Luke,

    Did you already checked the styling issues I’ve mentioned before? Is there anything you need from my side?

    cheers

    Paul

    • This reply was modified 2 years ago by PD11.
    #421625

    Luke Nielsen
    Keymaster

    Hello,

    1. The “Single product title” item works well:

    Advanced: https://monosnap.com/file/hdzJrQNDjg2ioCI1JlRMtDNcLbRbxP
    Result: https://monosnap.com/file/bw1r5HtZChi3BZmEHYgQbrFEU1bUr1

    2. The “Breadcrumbs links” item is related to the breadcrumbs of the Page title:

    https://prnt.sc/si-jHpN5IcnS

    3. Please, use this .wd-breadcrumbs .woocommerce-breadcrumb a custom selector for changing the breadcrumbs color on the product layout page.

    https://monosnap.com/file/gP9GcrvEuJQwqft06dlyKbSgZLs320

    https://monosnap.com/file/0tHlGbNTHDXgF9wVw0xtWOEqVhegDt

    Kind Regards

    #421628

    PD11
    Participant

    Hi Luke,

    Thanks for getting back to quickly! Clear about the breadcrumbs, that works well this way.

    Indeed, the product titles are working, but the product titles on category pages are not working (only on the product page, like your example). Could you please check that as well?

    And do you have a solution for the add to cart button on mobile like I mentioned earlier? Thanks!

    #421642

    Luke Nielsen
    Keymaster

    Hello,

    1. On my side the labels appear from both pages when I logged out:

    https://monosnap.com/file/MLTNH3gcUaSUAIKneH58xHGhPQ0xtH

    Try to clear the browser cache and then check the issue again.

    2. The product titles on the category page work well, also.

    Advanced: https://monosnap.com/file/XLCKHW0Ajehf2bkBy5HxJIdWZwVMfN
    Result: https://monosnap.com/file/6Rjvm174XbMI5YJLZtuTZxKV4VewCs

    As for the button, could you please explain in more detail the issue and attach a bigger screenshot of the problem for a better understanding?

    Thanks for your time and have a great day.

    Kind Regards

    #422556

    PD11
    Participant

    Hi Luke,

    Thanks. 1. is fixed, but number 2. is not fixed yet.

    The product titles are working on desktop, but it’s not working fine on mobile. I’v changed the font size to 8 (product grid title) on mobile and checked it on a mobile device in an incognito tab (so also not logged in). Sometimes the font size changes, but sometimes it does not change at all. Check the attached screenshots!

    Could you please check again? Thanks!

    #422565

    PD11
    Participant

    Upload files were too big.

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

    Luke Nielsen
    Keymaster

    Hello,

    I have checked the issue on the mobile device, on my side both pages have the same font size (check the below screenshots).

    https://monosnap.com/file/3AVEdwBJMzSYaYOjlDzrWJblvOuFvc

    https://monosnap.com/file/r7U723MXSDXFzn9N9thtPC51ITmtk4

    Please try to clear the cache/browser cache on your mobile device and check the issue again.

    Kind Regards

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