- This topic has 11 replies, 2 voices, and was last updated 1 year, 5 months ago by
.
-
Posts
-
I’ve been trying to get the new cart icon we chose to be consistent across our site. I have dug through menus, settings, code, etc. for hours trying to get things changed but I can’t seem to figure out how to make this happen. It feels like it shouldn’t be this hard. Can you help get this accomplished?
I am using this cart icon class: fas fa-cart-plus
I was able to change it on the header mini cart and product archive on desktop and mobile. I’ve attached images where I can’t figure out how to change the stock Store 47 demo site icon. It’s in the quick view (image 1) and on the main product pages (image 2). Inspecting code (image 3), I’ve noticed that the css contains this in reference to the icon: content: “\e8ba”;
I’m not sure what that means or how/where to change the content.
———————————————————-
I’m also having one more issue with the sticky header menu. On desktop it looks fine but on mobile it’s not displaying properly (image 4). Can you help center the text and icons vertically on mobile?
Thanks again for your continued support!
This field is Private Content.
Hello, @mrv63,
Firstly, thank you for providing such a thorough explanation of your issue. To address the problem with the cart icon not displaying properly on the product page and in the quick view, I implemented a simple CSS fix. This involved adding a line of code in PORTO >> Theme Options >> Skins >> Custom CSS. You can refer to these screenshots for guidance: https://postimg.cc/mhZMr2fw and https://postimg.cc/DWK437P1 . After making these changes, please refresh your browser cache to see the updates.
Regarding the mobile sticky header, I resolved the issue by adjusting the spacing from the top in Theme Options >> Header >> Sticky Header. For reference, please see this screenshot: https://postimg.cc/62Z9WZ63 . Once again, don’t forget to clear your browser cache to ensure the changes take effect on your site.
Best Regards,
PThemes Team.Thanks for the help and the detailed explanations and screenshots so that I understand better what’s going on and can change things on my own in the future! Regarding the sticky header, your solution is good for mobile but isn’t ideal for desktop as it now added the 10px padding to the desktop sticky header as well. If this is the only solution, I can live with it though.
I have another minor issue with a Product Label Plugin (Advanced Woo Labels). When I add a label to a product, it shows up on the product page but not in the product archive. I’m guessing this has to do with Porto not using standard WooCommerce hooks? Here is documentation (and attached photo) with information on how the plugin works:
————–
How to fix
So Advanced Woo Labels use standard WooCommerce hooks to display its labels inside WooCommerce products. It uses hooks like woocommerce_before_shop_loop_item_title, woocommerce_product_thumbnails, woocommerce_shop_loop_item_title, woocommerce_single_product_summary.
So the main reason why labels are not working with your theme – your theme doesn’t use any of these hooks ( or all of them ).
So to fix the issue it sounds logical to set plugin hooks that are working for your current theme. This can be done in several ways. We describe these ways from the simplest to the most difficult.
————–
Should I use the plugin’s Add Hook feature to fix this?
Hello, @mrv63,
For the sticky header if you just want to change for mobile you can simply use the below CSS code in the Porto >> Theme Options >> skins >> Custom CSS.
@media(max-width:575px){.header-reveal #header.sticky-header .header-main.sticky{padding-top:15px !important;}}Regarding the labels you are using a third-party plugin that I confirmed is not included in our compatible plugin list. By default, our theme provides the product label options in the Porto >> theme options >> woocommerce >> check this screenshot: https://postimg.cc/K3kk7xdz you can use the theme feature, else using the plugin requires additional customization that we cannot cover in our support policy. You can contact our customization team at: https://www.portotheme.com/customization/ I hope you can understand.
Best Regards,
PThemes Team.Thank you! The desktop sticky header looks much better now.
As far as the product label goes, the reason I cant use Porto for the product label is because there is no Free Shipping label to use or a custom label. I guess I will have to figure out a different strategy. Is there any other product label plugins you can recommend that ARE combatible with Porto?
Hello, @mrv63,
Initially, I’d like to express my gratitude for your understanding. However, it’s important to clarify that we refrain from recommending third-party plugins to our customers. This precaution is taken as such plugins may occasionally lead to conflicts and unforeseen issues on the site. We encourage you to explore various plugins independently to identify the one that best fulfills your requirements, albeit at your own discretion and risk.
Best Regards,
PThemes Team.Ok, well I have a question then. I put a product on sale and I’m not seeing the stock Porto product Sale label on the Product Archive. This is the same behavior as the 3rd party plugin I am using for the Free Shipping label.
Hello, @mrv63,
To solve your issue, I simply disabled this plugin “Advanced Woo Labels” and then set a product in sale after that the theme sale label started appearing on the site as you can see in this screenshot: https://postimg.cc/sv4xmkP9 Please check back to your site by clearing the browser cache.
Best Regards,
PThemes Team.Thank you for this!
I’m getting so close to finally finishing the website but unfortunately I’ve got another issue yet again.
My contact form on the Contact Us page (https://troutartsupply.com/trouttemp2024/contact-us) is not responsive. On mobile the fields are too wide and go off the screen (see attached image) and on desktop they fields don’t look wide enough (although this is less of an issue). The main problem is how it looks on mobile.
This field is Private Content.
Hello, @mrv63,
Apologies for any inconvenience caused. I’ve reviewed your site’s contact us page, and the form displays perfectly on mobile from my end, as evidenced by this screenshot: https://postimg.cc/qtKdnMNB . I recommend clearing your browser cache and revisiting your site to ensure everything appears correctly on your end.
Best Regards,
PThemes Team.I’ve tried 3 different mobile browsers and same issue across the board. Cache has been cleared multiple times. It does display properly if you use desktop browser developer tools and put it into a mobile view but that doesn’t help in real world scenarios.
While I have you, I have another question. I made a popup in the porto theme builder but I want to be able to pop it up when a user clicks either an icon or text link. How can I do that? I only see the ability to use Applied Conditions to make the popup happen automatically.
Hello, @mrv63,
1- Thanks for the information. I have checked your issue. To solve it I simply navigated to the Dashboard >> Porto >> Theme Options >> Skins >> Custom CSS >> I added this line of CSS code: https://postimg.cc/tZmVrL6T and your issue was resolved. Please check back to your site by clearing the browser cache.
2- I see, Actually, the thing is popup builder will trigger auto when the page loads there is no such option to change this behavior. but in our theme, there is a widget called Modal box that you can use to simply trigger the popup when someone clicks.
Check this article to understand how to use the modal box widget: https://www.portotheme.com/wordpress/porto/documentation/faq/home-newsletter-pop-up-mo%5B…%5D-removing-the-pop-up-modal-box-using-wpbakery-page-builder/
Best Regards,
PThemes Team.
- You must be logged in to reply to this topic.
