Reinvent the WooCommerce Elementor Single Product Template - Elementor Pro Wordpress Tutorial
ฝัง
- เผยแพร่เมื่อ 7 ส.ค. 2024
- Join our 'How to Start a Web Design Business' Course - and use strategies to grow, get clients, and generate recurring income: websquadron.co.uk/how-to-star...
How about doing something different with Single Products to Reinvent the WooCommerce Elementor Single Product Template.
Additional plugins used for this:
wordpress.org/plugins/presto-...
wordpress.org/plugins/advance...
CSS for AutoScroll:
selector .swiper-wrapper{
transition-timing-function: linear !important;
}
Book your 1-2-1 Consultation: websquadron.co.uk/socials
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co.uk/web-design-...
🔗 All of our Important Links: websquadron.co.uk/socials/
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com/10565/3304295/
😃 Get Elementor Pro: be.elementor.com/visit/?bta=2...
😃 Boost your TH-cam Analysis: www.tubebuddy.com/websquadron
👕 Get our Merchandise: websquadron.co.uk/merchandise
🥹 Support us: paypal.me/Websquadron
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩💻 Visit websquadron.co.uk - แนวปฏิบัติและการใช้ชีวิต
![Create a Single Product Page using Elementor [Elementor WooCommerce Shop]](http://i.ytimg.com/vi/0PgjzWao0e4/mqdefault.jpg)
Great channel, priceless information and super authentic personality. Keep up the good work sir💙
Perfect timing! And what an awesome way to upscale the product page. PS, your latest advice has boosted my mobile speed significantly...and I haven't quite yet finished implementing all your awesome suggestions.
Fantastic!
Excellent Video as always. Thanks! 👏
Amazing. Very helpful. Thank you.
Truly good content!
Awesome and very helpful video, thank you! Somehow I did all the steps in the video, but the videos i add to presto player and then embed with the shortcode on the product page aren't working. What am I doing wrong?
Great Content
very useful thanks man. Would be great if you always show the mobile version aswell because its the most used mode by most customers.
can this be done with Pods as well?
i like woo commerce tutorials like this , would be nice to see in bricks dynamic archive pages tutorial how much you can customize
Good suggestion
Great video 🎉. Question: is there a way to make the thumbnails show full size replacing the video shortcode? So there would be the featured image and the thumbnails all displayed at the same size.
Would love to see this design you have in the video on mobile.
That would need some CSS added, and could be problematic if there are many images. See this (but it will only be up for a few days as it's a test site for the Mobile version): staging14.websquadron.co.uk/product/pepsi-max-boring/
Fancy, so much more appealing
Totally right!
Looks great! What about on mobile? Any great design ideas for that?
See this (it may disappear in a few days) on a mobile screen: staging14.websquadron.co.uk/product/pepsi-max-boring/
Excellent idea Sir. Really actionable. And I already did. My only concern now is how can you bulk manage different product videos, with this setup, there will be many posts needed in the Media Hub, and this forces me to create these many video posts first, then collect their shortcodes and map with products and then finally import and update many product with your collected shortcodes at once. Is there any direct way such as feeding ACF field with TH-cam URLs while importing rather than feeding ACF field with a shortcode?
Thank you for your inspiring stuff, Mr. IMRAN SIDDIQ as always
Would need testing and is only good with the right resources and admin time to add the video links. Not explored importing Excel Sheets with ACF fields... yet.
How to have multiple videos instead of only one? Like a video gallery?
You'd have to dd them one by one and then place accordingly. Trying to get them into a carousel playlist etc would take more work.
@@websquadron would it work maybe with a ACF repeater field? i have never used it so im not sure if thats made for such a use case. btw thanks for the quick answer, i rarely follow channels but yours i subscribed :)
Thank you so much for the tutorial. I have a question: Is it possible to show single product images vertically with the same size of featured image? What I mean; instead of adding video under the first image as you show at this tutorial, I would like to show the second image of the product same product and then underneath of it the third photo of the same product and so on. I mean if a product has 5 photo, I want to show them vertically and all will be same size as the featured image at Single Product Page. You know at Shopify many themes show first product image and then other images vertically placed underneath each other at the left side the screenand all are at same size and the right of the screen belongs to product details, at the card and other product meta info. Can we do that at Elementor Pro? Thanks in advance.🤙🤙
Possibly yes.
Would need some css styling but possibly…
@@websquadron I bet many wocommerce -elementor users want to make their single product page like shopify. If you can make a video tutorial that would be great. I didn't see any video at TH-cam. Yours can be first tho. Thanks for your reply.🙏🙏
@barsk76 have you got a url of an example site so I can visualise it better
how do you get the featured image to change to match the variation image when using product variations?
When you add your variations you have the option to add another image
@@websquadron I did that but the image isn't changing when I pick a variation now with the "featured image" or "product image" selected in elementor. Does it only work with the woocommerce gallery?
I'm trying to add a single product page into a page (site page) using a shortcode but the template doesn't seem to apply when using the product page shortcut. Would you know why it doesn't work that way?
Difficult to be sure without seeing it
there is some issue with the thumbnail of the woo. it load very slow. any help?
That could depend on the size. Lazy load. Optimisation. Etc.
Hi Sir, You are using image then choosing a dynamic tag product image. I tried like this way, but there was a problem. For Variant product type with multiple product image, the image won't change according to different tab. Do you know how to solve it?
This solution isn't great for variant products.
Very quick response, sir. So in this case, I mean variant product situation, it's better to choose product image widget using elementor pro?
Does this be r3plicated using divi builder?
Not sure
Riddle me this 🤪: Is there a way for the video to not display if an individual product does not have a video?
The shortcode will be empty if there is no value added in the Custom Field, thus there will be no video present. Just make sure that you lay it out well, so that the page looks good if there is or isn't a video, otherwise you'll have a big gap somewhere. Though that being said, the gap may just be 0px :) because there's no shortcode to return.
@@websquadron Excellent! Thank you!
Cool! First time I saw your video.