Clickable product thumbnail error
-
Hello, I would love some help please.
As the title suggests I have created a child theme for the first time and entered this code into functions.php
function myfunc_product_img_link_start(){ global $product; $link = apply_filters( 'woocommerce_loop_product_link', get_the_permalink(), $product ); echo '<a href="'.esc_url( $link ).'">'; } add_action('woocommerce_before_shop_loop_item_title', 'myfunc_product_img_link_start', 5); function myfunc_product_img_link_close(){ echo '</a>'; } add_action('woocommerce_before_shop_loop_item_title', 'myfunc_product_img_link_close', 15); I then added this to the customise CSS section li.product .product-thumb-wrap::before { display: none !important; } .custom_item_img_link::before{ content: " "; position: absolute; height: 100%; width: 100%; background: #fa6161; -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; opacity: 0; } li.product:hover .custom_item_img_link::before { opacity: 0.8; }It has worked my product images are clickable! However when I hover over the image before I click it a pink block appears which is the size of the entire image + writing together but appears starting in the middle of the image and goes to the right. Very odd.
I know very little so would love it spelling out to me.
Thanks so much!
-
This topic was modified 5 years, 4 months ago by
Steven Stern (sterndata).
-
This topic was modified 5 years, 4 months ago by
-
This topic was modified 5 years, 4 months ago by
-
It sounds like some sort of default hover effect related to linkifying the image. These can sometimes be offset due to positioning rules applied to the image. We’d use our browser’s element inspector to make more detailed recommendations, so we’d need a live link to a page demonstrating the problem. Or you could use the element inspector tool yourself to determine the cause.
Hello, @bcworkz
Thank you very much for your reply 🙂
I do have a hover effect plugin enabled called tp image flipper (lets you see the second image when you hover over with a mouse), originally this was causing some problems (double image on product page one being flipped one not) the owner kindly helped me to get rid of hestias natural tendency to provide an image to a product and this solved the problem.
I really need that plugin but I also really need to have clickable images so I hope that plugin is not responsible.
a live link does this mean my site would need to be live? as I have not launched it yet since I’m still tweaking things like privacy policies and I don’t want the site live with this weird image error. Is there any way around this? Like me screensharing on zoom? I am guessing a screenshot of the problem wont do> haha.
I have never heard of the element inspector tool but I will look it up thank you kindly,
Thank you!
Yes, the site has to be live for us to help with CSS issues. You could put it in maintenance mode afterwards to prevent further access until you’re ready. There are maintenance mode plugins for this purpose. But it’d still need to be live while we try to resolve this. I understand your reluctance to publish a faulty site though. It does create an impasse all the same.
You could temporarily disable the plugin to confirm that it’s the cause or not. You don’t necessarily have to give it up, but if we’re sure it’s the cause, maybe the plugin developers would be able to help you.
That element inspector tool is essential if you want to make adjustments in your site’s appearance. It does involve a learning curve to use it well and some knowledge of CSS is very useful. The tool can facilitate learning more about CSS. I think it can offer something for anyone tinkering with their site.
Eek you have made me excited. My website was close to being ready anyway. What I will do is finalise the basics like checking for error pages and setting up analytics tonight, and then tonight/tomorrow morning will launch the website and tag you on here if that is okay? @bcworkz
I will be incredibly grateful if you are able to solve this issue for me!
I may then leave the site open as I will just have a few background things to change like filling the content for the newsletter page and optimising SEO on a few pages etc.
I will also start researching elemetor inspector tool and see if I can start grasping the basics.
Side note, I did disable the plugin and the problem persists.
Thank you so so much.
I hope we sort this.
Best,
My site is now live, Impossibleclothes.com
I have noticed a few bugs such as products on the shop page on mobile not displaying at the correct size, but this is a separate issue I will figure out haha. Main issue is this red box around each product haha.
If you could help me out I would be much indebted. I cant wait to get this all sorted. Thanks so much! @bcworkz
I don’t mind @ references to me if I’m involved with the thread. You shouldn’t @ reference other members if they haven’t yet participated in a topic just to get their attention. It’s seen as overly needy and a bit spammy. That goes for any member, not just me. For the most part it’s not really necessary to @ reference anyone, they can choose to subscribe to a topic or not on their own. For me in particular, I’ll likely see your replies here before I see any notification. I don’t check email all that often.
A shiny new site going live is always exciting, even if there are some remaining issues. To fix the red block, add this to the Additional CSS customizer section:
.custom_item_img_link::before { background: unset; }To enlarge the related products cards on mobile product pages try this (in Additional CSS):
@media only screen and (max-width: 768px){ .woocommerce .products.columns-4 li.product .card-product { width: 100%; } .woocommerce ul.products.columns-4 li.product { width: 70%; } }Hello,
Oh, I do apologize. However, I did not @reference another mod, I only @ referenced you, I don’t know any other mods. I did not know that I didn’t need to @reference you so I apologize. I did not intend to iritate anyone or come across overly needy or spammy. I greatly value your help and expertise!
Oh my lord, what wizardry is this? Was this the element inspect tool that allowed you to fix the red box issue? It worked perfectly.
Thanks for the related product help too! My apologies tho, it is on the shop page on mobile that my products display at different sizes, before clicking onto the product. – I understand if you want to close or unsubscribe from this thread as you have indeed helped my initial issue in which I’m very grateful for! And I could make another post about the mobile shop page issue (after several more hours googling first of course :))
Basically my hoodies appear at a great size on the shop page on mobile but all other products are like zoomed out and look far smaller haha.
Thanks again so much!
Sorry, I meant there’s no need to @ reference any forum member you may have previously encountered, moderator or not. It’s OK to @ reference others who are participating in a topic, but it’s not really necessary. People can choose to be notified or not on their own.
I’ve found the need to walk away from some topics on occasion, but you’re not getting rid of me that easily 🙂
That’s right, the inspector tool allowed me to identify where the red box was coming from and come up with CSS that’ll prevent it from showing. It’s by no means a magic tool that solves problems, but it does display information that someone with adequate skills would need in order to solve almost any issue about a site’s appearance. For self-learners, it’s also a useful learning tool. You can see how others managed certain kinds of appearance and behavior. You can easily experiment with different CSS rules and immediately see the effect without having to go elsewhere to make changes. If experimenting goes badly, it’s all easily reset by reloading the page.
For the shop page, it’s a similar solution to enlarging a product page’s related item cards, except it’s for 3 card rows instead of 4. We can just add the related selectors to my earlier CSS:
@media only screen and (max-width: 768px){ .woocommerce .products.columns-4 li.product .card-product, .woocommerce .products.columns-3 li.product .card-product { width: 100%; } .woocommerce ul.products.columns-4 li.product, .woocommerce ul.products.columns-3 li.product { width: 70%; } }You can adjust the
70%to get any size card you find pleasing. The inspector tool is useful for quickly determining the perfect value. First modify the Additional CSS content to include the added selectors so you can see what 70% looks like. Narrow your browser window until you get a single column layout. Right click on any shop page product image, then pick the inspect option. The tool will open with the image’s HTML highlighted. Go up from there to find the card’s<li>tag, then click on it. All of that element’s CSS will be displayed. Find thewidth: 70%;rule. You can directly alter the70%to try out different values. The page appearance will change accordingly. Once you find the perfect value, go to the customizer and change the the value in Additional CSS to make it permanent. Changes in the inspector tool do not persist.Hello,
Oh, I see, no worries at all, I’m glad I know the correct etiquette now with WordPress forums 🙂 thank you.
Oh wow well to me this tool sounds incredibly useful almost like magic haha, I simply must put it on my to-do list and learn it! Thank you.
Amazing my mobile images now display perfectly thank you so much! I was up all night again last night googling for that 1 issue haha.
My site is almost complete eeek so exciting almost time to index haha. I just need to reduce my site load speed its at 10-15 seconds lol, I have been told its likely my 30 plugins of which many were uneccersary!. So I will play about deleting them and swapping them over :).
I looked at my aunties store last night, she used shopify, in a way im jealous since mines taken a good 200+ hours but on the other hand I have more ability to customise and I have learnt an awful awful lot and feel more connected to my business!
Thanks again so much!
Enjoy your evening.
Yes, remove unneeded plugins and themes. Not just deactivate, remove them entirely; except for the default Akismet and Dolly plugins. Keep an unused, unmodified version of a recent twenty* theme in place for possible debugging and crash recovery purposes.
Use a decent caching plugin to help with site speed. If it doesn’t also optimize JavaScript and CSS files, there’s a separate plugin that’ll do it automatically. Optimization can complicate making CSS adjustments. It should be disabled while you are making CSS adjustments.
The lighthouse developer tool in Chrome browsers (or here) will make useful suggestions for improving your site speed. Some suggestions may not be worth the effort to accomplish, but sometimes it’ll flag things that are relatively easy to accomplish.
Those “so easy anyone can do it” sites are a godsend for so many people, but they always frustrate me because the result looks like everyone else’s and I’m not allowed to make many adjustments that would separate it from the masses. Managing your own WP site certainly takes more time, but for me the endless flexibility is well worth the trade off. All those hours you spent aren’t wasted, I’ve no doubt you learned a lot in the process that will serve you well in the future. These sort of things do get easier over time, but there will be frustrations that seem unsolvable. Perseverance pays off, there is almost always a solution.
Ahh to delete them entirely is a great tip thank you! I have now got a good cache plugin which has reduced my site load time alot its between 3.7 and 5.7 seconds now. Gtmetrix has suggested a few tips to get the speed faster like avoiding large layout shifts, serving static assets with a more efficient cache policy and eliminating render blocking sources….. no idea what any of it is but ill start researching haha. I will deffo look at your ‘lighthouse developer tool’ first as this may be easier haha.
Haha, yes thats true! Can I ask, do you work for wordpress, and answer forums in your free time, and build websites for yourself? incredibly busy!
Thank you, what a positive message 🙂
Enjoy your evening!
I have removed several plugins and tried the inspector tool thing (too difficult for now but seems it could be very useful!) but sadly now when I go onto media or go onto my product page on WordPress 80% of my images don’t load. They are still present on my live store, but I can’t access them through the back anymore haha. I have tried deactivating all plugins and the issue persists. The issue also persists on different browsers (same laptop) and when I open wordpress on mobile. Very strange. If I reupload a new image it does work even if its the same image as the one that disappeared before….. Very peculiar.
I would love your input 🙂 Thanks.
GTMetrix and Lighthouse are variants of the same kind of tool. You’ll get similar recommendations either way. Some prefer one or the other. Correcting the render blocking notice can be difficult on WordPress sites, I recommend focusing on other issues raised. It looks like the main problem is long initial server response, which is often related to your hosting plan. You can try complaining to their tech support to see what they recommend. There could be some problem they’re able to fix, but typically they’ll try to sell you more server resource. Before going down that road, you might be better off with a different host whose basic plans perform better. Choosing a good host is not an easy process.
I’m saddened to hear of your image issues. Thankfully the front end images seem to be working well. After loading the backend media library and many of the thumbnails fail to appear, check your browser’s console for any JavaScript errors. Console is one of the developer tools. Close the media library, then switch to the network developer tool. Reload the library. What status is being returned for the image file requests? 200 status would be normal.
I don’t think anyone actually works solely for the dot org version of WordPress, it’s principally volunteer driven. The company Automattic oversees the entire project and a few Automattic folks spend part of their work time on the WordPress project. I don’t work for Automattic, I volunteer for the WP project. I’m retired and have a lot of free time, especially with the pandemic. Computer programming has been a long time hobby of mine, but it’s not my profession. I’ve developed themes for WordPress sites on occasion, but I’d rather someone else develop the actual content. I mainly like solving website problems more than building themes. People I know don’t have many problems, so I hang out here and try to solve the problems of complete strangers 🙂
FYI, offering to hire other members through these forums is not allowed, so don’t go there. Maybe that wasn’t your intention, but just in case, now you know.
Hello 🙂
Thank you very much for your reply once again! I am very grateful for the continued support!
Oh I see okay then what ill do is send bluehost an email and see if technical can help with the load times but also I will consider switching to another host which I have heard can be a nightmare haha.
On network I get: 304s, 404s and 500s and the good ones are 200s I think.
On console I get: Intervention: Images loaded lazily and replaced with placeholders (I did download a lazy image loader plugin but I then deleted it same day… perhaps it permanently messed something up?)
I also get ‘devtools failed to load source map when on the media page’, and when I’m on the products page (where thumbnails don’t load) I get ‘Tracking prevention blocked access to storage’.Oh, I see I did not realise you all work for free, well I am very grateful for your help! That’s awesome! Very altruistic. I bet you have seen a lot more people starting up websites during the pandemic! Oo theme development that’s cool, I obviously wouldn’t know where to start, well above my head (I am starting to get rather interested in all this website building and stuff though).
Honestly, that was not my intention and I don’t have any spare money anyway, these plugins have taken everything hahaha 😛
Forum traffic has definitely been up in the last year as more people tinker with their sites and run into issues.
I have some sites on Bluehost’s shared hosting, one notch up from the lowest price plan. Server response times are quite reasonable. Maybe they can move you to a different server. If your domain registration is with them, I don’t think you’d personally have to do anything, they’ll take care of it. Changing hosts is one of those things where it’s complicated and intimidating the first couple times, then it becomes easier until it seems like no big deal. One advantage of helping others is I gain experience and knowledge for myself.
If you have a lot of plugins, that can slow things down some. Several different status responses besides normal 200 indicates a server issue to me. The host should either fix the issue or at least move you to a better server. Best to try and make sure there’s nothing wrong within WP before escalating to their tech support though.
I recommend the Health Check & Troubleshooting plugin. After activation, go into troubleshooting mode. This deactivates all plugins and switches you to the latest twenty* default theme — for your view only. Anyone else visiting sees your normal site. Without your e-commerce plugin, a lot of your front end will appear broken, but the back end media library should work normally. If you still get strange statuses returned now, I’d be fairly certain there are server issues that need to be addressed.
If everything works properly in troubleshooting mode, then I’ve wrongly blamed the host and there is interference from one of your plugins or maybe your theme. Using the troubleshooting admin bar item, restore your theme and plugins, one at a time, testing images after each, until the problem returns. The last activated item will be the cause of the trouble.
Don’t forget to exit troubleshooting mode when you’re finished. Failure to exit can result in strange behavior that’s difficult comprehend. Don’t ask how I know this 😉
The topic ‘Clickable product thumbnail error’ is closed to new replies.