Reinvent the WooCommerce Elementor Single Product Template

Reinvent the WooCommerce Elementor Single Product Template - Elementor Pro Wordpress Tutorial

Рет қаралды 7,406

Күн бұрын

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 KZfaq 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

Пікірлер: 41

@Manifestoronaplain 9 ай бұрын

Great channel, priceless information and super authentic personality. Keep up the good work sir💙

@myloverelvis16 Жыл бұрын

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.

@websquadron Жыл бұрын

Fantastic!

@kakenetit2 Жыл бұрын

Excellent Video as always. Thanks! 👏

@andycosta68 4 ай бұрын

Amazing. Very helpful. Thank you.

@visualmodo Жыл бұрын

Truly good content!

@shaveenarosh7657 Жыл бұрын

Great Content

@fatstitchfabrics Жыл бұрын

can this be done with Pods as well?

@nassaublu Жыл бұрын

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.

@websquadron Жыл бұрын

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/

@CrystalRicotta Жыл бұрын

Fancy, so much more appealing

@websquadron Жыл бұрын

Totally right!

@Kejserjorn Жыл бұрын

Looks great! What about on mobile? Any great design ideas for that?

@websquadron Жыл бұрын

See this (it may disappear in a few days) on a mobile screen: staging14.websquadron.co.uk/product/pepsi-max-boring/

@DemirAydemir 25 күн бұрын

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 KZfaq URLs while importing rather than feeding ACF field with a shortcode? Thank you for your inspiring stuff, Mr. IMRAN SIDDIQ as always

@websquadron 25 күн бұрын

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.

@BmxAddict08 Жыл бұрын

i like woo commerce tutorials like this , would be nice to see in bricks dynamic archive pages tutorial how much you can customize

@websquadron Жыл бұрын

Good suggestion

@Lensbreak Жыл бұрын

How to have multiple videos instead of only one? Like a video gallery?

@websquadron Жыл бұрын

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.

@Lensbreak Жыл бұрын

@@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 :)

@barsk76 21 күн бұрын

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.🤙🤙

@websquadron 21 күн бұрын

Possibly yes. Would need some css styling but possibly…

@barsk76 21 күн бұрын

@@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 KZfaq. Yours can be first tho. Thanks for your reply.🙏🙏

@websquadron 21 күн бұрын

@barsk76 have you got a url of an example site so I can visualise it better

@user-oc9dj3sz2q 11 ай бұрын

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?

@websquadron 11 ай бұрын

Difficult to be sure without seeing it

@CarolineZhao-qr2hu 7 ай бұрын

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?

@websquadron 7 ай бұрын

This solution isn't great for variant products.

@CarolineZhao-qr2hu 7 ай бұрын

Very quick response, sir. So in this case, I mean variant product situation, it's better to choose product image widget using elementor pro?

@ayushmj Жыл бұрын

there is some issue with the thumbnail of the woo. it load very slow. any help?

@websquadron Жыл бұрын

That could depend on the size. Lazy load. Optimisation. Etc.

@myloverelvis16 Жыл бұрын

Riddle me this 🤪: Is there a way for the video to not display if an individual product does not have a video?

@websquadron Жыл бұрын

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.

@myloverelvis16 Жыл бұрын

@@websquadron Excellent! Thank you!