Woo coding - single product page issues - html

apologies if this is completely the wrong place for posting but I'm a little bit lost...
I'm developing a WP and Woo commerce page that will have a HUGE number of images that when you click on each one it will pop up and you can demo it (this bit works at the moment)
But... once it's been added to the basket I want the 'add to cart' button to show as 'added' or something similar and for you not to be able to do anything else with it - at present if you try and click on the item again it shows the single product page (which I DO NOT want) as it screws up the whole point of the page I'm building.
Im a total novice with coding and just hash things together from google searches until something works... or breaks.
Is there anyone out there who can point me in the direction of how to achieve what I want or who might be interested in helping to fix my issues directly?
Thanks so much!

Related

Enabling click sound effectx

Full Disclosure, talk to me like I am stupid because, well, I kinda need to be guided.
I would like to create a series of web pages where the user would hear a sound when they would click on links whether it be photos or text links it doesn't really matter. The idea here is to generate an audio sound when a link is clicked. And I want that to be able to span across all clickable links in the HTML document. I am not sure how to do it and I'm not asking Google the right question because I'm learning how to do sounds for every other possible aspect of web development rather than this specific need. Might be because I haven't slept in 24 hours but I'm trying to create the Kobayashi Maru and it would be really cool if I could make the lcars computer sound effects.
So how can I make all the links play the same sound or ideally I'd like to be able to make sounds for active links and then a different sound for non active links but I would just settle for one sound effect right now. Could anybody please help me out?
I've tried various scripts but they are for specific objects

Dynamic html banner to display items from website

I'm not even really sure how to ask what I'm looking for. I've been digging around online but can't seem to find any relevant information. I'm wondering if someone can help or point me in the right direction.
I'm wondering how to create a dynamic html banner that pulls items from a website and displays them. When clicked they take you to the items on the site.
The best examples are sites like eBay and Amazon. They show multiple items from listings on the store. Kijiji also does them as shown in the attached image.
Can anyone tell me how this is accomplished or at least the name of these types of dynamic banners to help me in my search. Any help would be greatly appreciated.

Code for Reddit style image Carousel that's on home page

Has anyone got any idea on how to implement this carousel into my website? I am using WordPress and I am not sure how to go about this. I was told to use 'foo gallery' to achieve the same look however, it doesn't really feel the same and also didn't work on my site (for some reason).
I have tried to code some of this but I am awful at coding and I am mainly just spending my time watching youtube help videos if I am being honest!
I'll explain my neeed for this and what I would like it to do and then, if you could help me that would be great!
So like on reddit, I would like to implement this feature on my home screen to show off some of the 'Hot topics of the day'. Preferably, some code could automatically update the images and text each day depending on the comments/views left on a page - so the top 4 most viewed pages would be automatically added to the front page with a custom image (which I have created). However, that seems quite hard. So just the layout/template of the images (like the photo provided) AND there is a way for me to manually change the images and names each day would suffice. I would also like to have 4 photos which also act as buttons with the curved boarders.(again, like the image I have attached)
Just so it's clear, I do not want these images to be able to move off like a slideshow, I just want them to stay in place and be able to change either manually or automatically.
Maybe this is called something other than a carousel and would be easy to do... i dont know! So if you do, please let me know.
Furthermore, I appreciate this is a place mainly for code to be posted however, I won't post my code as it is useless! If anyone wants to share any code or contact me privately then that would be very much appreciated.
Thank you

How to find and manipulate an element generated by a widget in WordPress

I went through a ton of articles trying to find some sort of answer to this seemingly fundamental question about WordPress, but couldn't find a match. Forgive me if this has been gone over before.
I am new to WordPress and the company I work for uses it to build many of its sites for clients. They use Yoo Themes and UIKit for styling. I was recently tasked with moving a simple block of color with some text in it from the bottom of the page (just above the footer) to the top of the page (just before the header/navbar). I spent three hours trying to find which widget it was a part of only to be lost in a morass of vaguely descriptive widget bars in the customize panel. I found the one with the text in it, but after I moved it, the color bar remained.
My question is: is there a fast and hopefully easy way to tell what widget is displaying a particular element, or set of elements, and then upon finding it, moving it in the manner I described above?
I have used Chrome's DevTools which reveal the nests within nests that a WP site is, but it only got me to the "Top A" widget for the text, not the green bar area. This is super simple in straight HTML/CSS, but I am a little lost with WordPress.
Any help would be greatly appreciated.

navigation button images disappear on mobile when hit back button in browser

I'm an amateur web designer with HTML experience mostly. I'm building my own website for a hobby, and ran into this snag. I've only recently noticed it though, so I'm wondering if it has anything to do with the recent iOS update?
Like the title says, when I go to my website, everything is fine. Then I click on one of the links to the "Contact" page, let's say (or any of the links that take you to another page), and then hit the browser's back button to go back to the previous page, the button's image I had just clicked on ("Contact" button) has disappeared and I'm just left with the button's name I named it. This repeats for every button I click and then hit back in the browser. This only happens on mobile devices though (I've only had the opportunity to check on an Apple phone and iPad). It doesn't happen on my laptop. I've tried searching for answers to this, but can't find any. I've only just noticed this happening though, which leads me to believe it might be a software update issue? Although it's entirely possible I just never noticed before.
Here is my website so that anyone interested in helping can take a look and let me know what you think might be the problem/solution. Thank you very much for any help you may be able to provide.
https://www.atomicorchard.com/
It's okay on my end. Try optimizing your images and check your JavaScript. The problem may be occurred once that script is being executed. And try adding media queries.