Home › Forums › WoodMart support forum › How to change Mobile Buttons like Shop, Cart and Hamburger Menu?
How to change Mobile Buttons like Shop, Cart and Hamburger Menu?
- This topic has 17 replies, 3 voices, and was last updated 5 months ago by
Aizaz Imtiaz Awan.
-
AuthorPosts
-
December 28, 2023 at 10:02 pm #525343
hendrikdobbertParticipantHow to change Mobile Buttons like Shop, Cart and Hamburger Menu?
December 29, 2023 at 3:48 pm #525505
Aizaz Imtiaz AwanKeymasterHello,
Navigate to WoodMart > Header Builder Header > Edit Current Header > Switch to Mobile Header > Configure Mobile Menu Settings.
You can configure the menu item from Appearance > Menu > Edit Mobile Menu and configure the menu items.
If you have any questions feel free to contact us.
Best Regards.
January 10, 2024 at 6:18 pm #528788
hendrikdobbertParticipantI mean the mobile menu on the bottom. With Shop, Wishlist, Cart and My account.
January 11, 2024 at 10:32 am #528938
Aizaz Imtiaz AwanKeymasterHello,
You can configure the mobile bottom navbar in the Theme Settings > General > Mobile bottom navbar. You can add and remove buttons, add your custom button and icon.
Best Regards.
January 22, 2024 at 11:52 pm #532434
hendrikdobbertParticipantI mean this Icons here:
Attachments:
You must be logged in to view attached files.January 23, 2024 at 3:35 pm #532690
Aizaz Imtiaz AwanKeymasterHello,
You want to change the icons of shop and wishlist in the mobile bottom navbar. If yes, Share the page url i will check and give you a possible solution.
Best Regards.
January 25, 2024 at 12:07 pm #533423
hendrikdobbertParticipantHere is the access.
January 25, 2024 at 3:47 pm #533558
Aizaz Imtiaz AwanKeymasterHello,
Add below Custom CSS code to Theme Settings > Custom CSS > Custom CSS for mobile:
.wd-header-wishlist .wd-tools-icon:before { font-family: "woodmart-font" !important; font-size: 14px !important; content: "\f156" !important; } .wd-toolbar-shop .wd-tools-icon:before { font-family: "woodmart-font" !important; font-size: 14px !important; content: "\f156" !important; }
Please use your own unicode character and change the icon.
Best Regards.
January 26, 2024 at 3:58 pm #533897
hendrikdobbertParticipantI want to upload my own Icon. Is this possible?
January 26, 2024 at 5:08 pm #533930
Aizaz Imtiaz AwanKeymasterHello,
Here is the list of all our theme icons (including Unicode characters):
$wd-icon-warning-sign: \f100; $wd-icon-twitter-brands: \f154; $wd-icon-github-brands: \f155; $wd-icon-pinterest-brands: \f156; $wd-icon-envelope-solid: \f157; $wd-icon-linkedin-brands: \f158; $wd-icon-mobile-alt-solid: \f159; $wd-icon-location-arrow-solid: \f160; $wd-icon-youtube-brands: \f162; $wd-icon-instagram-brands: \f163; $wd-icon-flickr-brands: \f164; $wd-icon-tumblr-brands: \f165; $wd-icon-dribbble-brands: \f166; $wd-icon-skype-brands: \f167; $wd-icon-vk-brands: \f168; $wd-icon-google-brands: \f169; $wd-icon-behance-brands: \f170; $wd-icon-spotify-brands: \f171; $wd-icon-soundcloud-brands: \f172; $wd-icon-copyright-regular: \f173; $wd-icon-facebook-square-brands: \f174; $wd-icon-whatsapp-brands: \f175; $wd-icon-odnoklassniki-brands: \f176; $wd-icon-vimeo-v-brands: \f177; $wd-icon-snapchat-ghost-brands: \f178; $wd-icon-telegram-brands: \f179; $wd-icon-facebook-f-brands: \f180; $wd-icon-viber-brands: \f181; $wd-icon-play-button: \f101; $wd-icon-360-deg: \f102; $wd-icon-comment: \f103; $wd-icon-paperclip: \f104; $wd-icon-header-cart: \f105; $wd-icon-heart: \f106; $wd-icon-check: \f107; $wd-icon-door-logout: \f108; $wd-icon-more-dots: \f109; $wd-icon-arrow-circle-left: \f110; $wd-icon-arrow-circle-right: \f111; $wd-icon-cross-close: \f112; $wd-icon-chevron-right: \f113; $wd-icon-chevron-left: \f114; $wd-icon-chevron-up: \f115; $wd-icon-edit: \f116; $wd-icon-social: \f117; $wd-icon-filter: \f118; $wd-icon-sort-by: \f119; $wd-icon-long-arrow-right: \f120; $wd-icon-long-arrow-left: \f121; $wd-icon-grid: \f122; $wd-icon-cart: \f123; $wd-icon-user: \f124; $wd-icon-newlatter: \f125; $wd-icon-bag: \f126; $wd-icon-scale-arrows: \f127; $wd-icon-compare: \f128; $wd-icon-chevron-down: \f129; $wd-icon-search: \f130; $wd-icon-quote: \f131; $wd-icon-envelope-o: \f132; $wd-icon-tik-tok-brands: \f133; $wd-icon-account-wishlist: \f134; $wd-icon-account-details: \f135; $wd-icon-account-download: \f136; $wd-icon-account-exit: \f137; $wd-icon-account-orders: \f138; $wd-icon-account-address: \f139; $wd-icon-account-other: \f140; $wd-icon-ruler: \f13f; $wd-icon-account-payment: \f142; $wd-icon-plus: \f143; $wd-icon-home: \f144; $wd-icon-blog: \f145; $wd-icon-shop: \f146; $wd-icon-cart-empty: \f147; $wd-icon-star: \f148; $wd-icon-star-empty: \f149; $wd-icon-caret-down: \f150; $wd-icon-caret-up: \f151; $wd-icon-caret-left: \f152; $wd-icon-caret-right: \f153; $wd-icon-menu: \f15a; $wd-icon-menu-active: \f15b; $wd-icon-menu-filters: \f15c;
You can create your own buttons and upload the images https://prnt.sc/ux_ocxz8ds9j
Best Regards.
January 26, 2024 at 6:01 pm #533954
hendrikdobbertParticipantWhere do I find the Menu for creating my own buttons?
January 27, 2024 at 10:06 am #534051
Aizaz Imtiaz AwanKeymasterHello,
Navigate to Theme Settings > General > Mobile Bottom Navbar > Custom Buttons:
https://ibb.co/FbJ99QyBest Regards.
September 29, 2024 at 7:08 pm #601099
led.onlinebgParticipantHi,
I have a question regarding creation the button ”Contacts” with icon for the mobile version, as you mentioned before on this topic there are the list of all the theme’s icons . How for example to visualise the below icon or I need the maps icon:
$wd-icon-account-address: \f139;Please advise.
Thank you.
Attachments:
You must be logged in to view attached files.September 30, 2024 at 10:48 am #601258
Aizaz Imtiaz AwanKeymasterHello,
But you can upload the custom button icon for this. For the theme icons, Navigate to Theme Settings > Typography > icons fonts.
Best Regards
October 1, 2024 at 12:40 am #601467
led.onlinebgParticipantHi,
thank you for the answer.
I found the icons but I dont know how to download it from there to use it for the Mobile bottom navbar Custom buttons that Im trying to create as ”Contact” with a map icon.Thnk you.
Attachments:
You must be logged in to view attached files.October 1, 2024 at 11:21 am #601567
Aizaz Imtiaz AwanKeymasterHello,
You can download the free icons from here and upload it on the website
https://www.flaticon.com/Best Regards
October 1, 2024 at 2:52 pm #601682
led.onlinebgParticipantHi,
thank you for the suggestion, but the icon comes too small. I even resized it to make it bigger but still mo changes.
Please advise.
Attachments:
You must be logged in to view attached files.October 1, 2024 at 3:47 pm #601718
Aizaz Imtiaz AwanKeymasterHello,
Please try using the below Custom CSS code and paste it to Dashboard >> Theme Settings >> Custom CSS >> Custom CSS for mobile section.
.wd-toolbar-link .wd-custom-icon img { height: 30px !important; }
Best Regards
-
AuthorPosts
- You must be logged in to create new topics. Login / Register