Custom Product Layout for WooCommerce like Amazon - Flatsome Theme Tutorial & UX Builder
ฝัง
- เผยแพร่เมื่อ 14 ต.ค. 2024
- Inspired by Amazon we recreate a custom product layout with the successful 3 column layout. Give your visitors a great shop experience and customise everything with the Flatsome UX Builder.
------------------------------------
🌀 Tutorial: bit.ly/2vXzJwf
🔥 Website: www.sebdelaweb...
📷 Instagram: / sebdelaweb
Flatsome support:
👨💻 uxthemes.com/s...
📖 docs.uxthemes....
💬 / flatsome - แนวปฏิบัติและการใช้ชีวิต
You all realise this is the only video on TH-cam with real content about Flatsome product page. Seb, you are a saviour. Outstanding! Thank you so much 🙌
Thanks James! Good to hear you appreciate my videos.
Genius! Never knew Flatsome could do so much..
Thanks! Happy to show you some more insights on the possibilities.
Hi Seb I love all your videos.. I understand better from this tutorial
Ux blocks are utilized universally throughout the store..
Thankyou for pointing out the Layout - Custom Woo Feature
To use the UX Block.. Awesome your the Designer for Flatsome ..✨✨✨✨👏🔥🔥
Thanks Zanna! Love you taking the time to write me this energetic message 🚀
Mate your amazing , you helped me create a dream product category and made uxbuilder a peace of cake ! honestly i cant believe , how easy it is and how amazingly beatifull it end up ! THANK YOU
Awesome to hear Dennis! Thanks for taking the time to write us. Keep up the good work. Do you have a link to share with us?
Awesome ... I created a clone and went through your tutorial and I couldn't hardly believe that I can manage my own product page with Flatsome so easy. Just great work - thank you!
That's so good to hear! Please share your link to show the result of your work :)
@@Sebdelaweb okay.... the site is still under construction and this is my test site environment shopdemo.smart3.ch/produkt/blumengesteck-mit-roten-rosen/
@@BYS1106 Can you please send me the code?
@@siblisadik3875 what code do you want? I just followed seb's instructions and that's it. I can send the UXBuilder Code if you want in messenger ....
@@BYS1106 thank you. i got it.
Thanks for this tutorial. I was introduced to flatsome by a friend and am loving it
super nice , finally i made it ... thank you
Great 👍
Thanks nice work, please continue.
Thanks Seb for the clear and complete tutorial, it's much appreciated!!
Hi Michael 👋 Thanks for your thumbs up and that you are enjoying our videos.
Can you help with product category pages please. Maybe add some borders to the product. Change the add to basket button. Anything to change the horrible woocommerce layout. Only you can do this! Love your videos❤❤❤
Speechless !Thumb up ! Even you're not many subscribers but you're awesome!Support You I click your TH-cam Ads on your youtube vedio!
Adoro este video! resuelves muchas de mis dudas, aprendo tanto que salto de alegria! Gracias por el contenido! sigue adelante! Gracias infinitas!
Thankyou Seb your Tutorial brokedown many odf the features flatsome has to offer
Excellent.. I just can't seem to get Variation Swatch pro Version to work with the Theme.
also The Increase on Pixels in the Layout Page -under Flatsome Theme Options works very well.
Thanks bro. looking forward for another great video.
I got a couple of technical issues. I have no idea how to resolve those. Could you please give me your email Id so that I could explain it to you. Here is my one. Gaasanjeewad@gmail.com.
Awesome, thanks!
Please make a tutorial on creating a Custom Product Catalog page, that would be awesome!
I tried doing it myself but can't seem to make it work.
Thank you!
At the moment you can only style the Product Archives with the Flatsome Theme Options.
Thanks seb! Very useful!
Thanks again!
Really Awsome !!
Awesome! I always like your work.
Thanks Azimuddin
Awesome video! This helped me out allot.
Thank you so much for this. Please kindly create a video for custom woocommerce dashboard.
great video thanks, I'm usting the woocommerce one page checkout plugin, when I add this option to the custom product design it doesn't show the checkout form, how can I solve it please?
So glad I found your channel! Does flatsome allow you add product variations in the custom product page mode?
I tried to follow this tutorial but when it comes to select Breadcumbs, product gallery, etc they wont show up in the list :/
I just recently followed this tutorial and came across the same problem. The solution: As Seb shows at around 2:25 of the video, you need to set your custom UX block as the product layout. Then, go to one of your products and hit "edit with UX builder" The UX builder should now have way more options for you.
@@CalligulasCat You are a god!! Thank you, man. I've been stuck for 1 week trying to resolve this. I love you, man!!
It is possible to add a bag icon to the add to cart button? If so, how? Thanks in advance
please how do you get all the elements used to design the custom product page. the Woo product page element listed on your video my friend can't fine it on his own flatsome which plugin to install to get the elements up so he can follow up your step by step process please?
Nice.
Thank you.
But where do you get those 'Product Page' Woocommerce Elements?
Please advise.
Yes I need to know the same please
Wow, great videos!
Excellent..Not sure if has anything to do with Amazon :-)
Is it possible to make UX Builder Background white..that dark color is more like the coding thing
One thing i learned is that each section needs to be labeled like in photoshop`
it is very easy to mix everything up
hopefully, more tutorials soon
would like to see some tutorial for like a basic website ..like for mortgage adviser ...
all the best
now with this stupid virus have more time to learn new skills!
Hello and thank you for your effort. Is this possible to create a custom product catalog in flatsome?
What a nice content! But why my flatsome has no Product Page (at 5:22) section on the elements? Do you have any idea?
I don't have it too, I was looking for it. I think they made it payed on product adds-on
Any idea why my UX Builder doesnt have the option to add the bread crumbs?
Why I can't find Product - Breadcrumbs or Products gallery anymore? Latest Flatsome update. Thanks
GOOD VIDEO
Thanks! Appreciate that.
So good.
Thanks Umut!
Thanks!
Hi
Very interesting video.
I have 2 questions
I follow all your steps only customer reviews not show and SKU code both or not show
Please help
Hello, I didn't get woo commerce products page function in ux builder can you please let me know if you used any other plugin for those elements like ( product gallery, product breadcrumb)
Hi! Why do i dont have all that custom blocks?
can you please do a full tutorial on flatsome side designing ?
nice video, thank's a lot...please how can one show the unique ID of a product on d custom product page...eg using some thing like flatsome theme's shortcode [ux_product_title], have tried [ux_product_id] but it didn't work, thanks
How about adding a second button for one click checkout as well
THANK YOU BRO !
Hello all right, could you explain how to generate and insert short code of the theme Newsletter options?
thank you very much
Is it possible to put in product specific accordions
Hi can you please tell me why my woocommerce product page elememts are not all appearing ?
I couldn't pass thru the other steps I only get shop elements not the product page elements please help?
Hello Seb! I no longer see my zoom button in the product image can you help me please
Thank you
Your welcome! Thanks
This is great. Thank you. Can flatsome theme payment link to an Amazon store?
If you don't manage your products stock & payments on WooCommerce but on Amazon you can just create custom static product pages.
Hi! Why do i dont have all that custom blocks? :( i can't add nothing that you have
Can you remove the absolute footer and change the header text color ?
Why in the "ux builder" options it does not show me the "product page" tools ?
Same here, here is what I see prnt.sc/sbk4dl (also how can I display 1 product per row on mobile and 4 products per row on the desktop?)
This is also what I mean...prnt.sc/sbk5c7
Please make sure you set the UX Block as your custom product layout. Follow this documentation for more help: docs.uxthemes.com/article/245-how-to-create-a-custom-product-page
Hi @@Sebdelaweb
It's don't think they meant that Seb, I don't see woocommerce product page either I think they made it a paid option now 'Product Adds-on'
Any idea?
*Where can I found those Formats, I don´t have it*
please can you helpwith the upsell part my wasnt uploading the upsell
I can't place woo blocks in the custom layout. I installed the Woocommerce Blocks plugin but these options do not appear, as you did?
Hi, I notice that a lot of your sample pages (such as your product page pack) use rounded edges for the image gallery, the border of the reviews pannel etc. I'm trying to do the same thing on my Flatsome pages but can't figure it out. No CSS or HTML knowledge so I don't really know where I'm looking. Could you give some tips? Much appreciated
Hello CVI 👋Yes we use a lot of round corners. A lot can be done with the UX Builder, but some elements requires custom CSS. Maybe a good idea for a video tutorial on this subject. Thanks! Stay tuned.
Hi , can you please tell me how to make the thumbnails vertical? when i change the setting in the Product Gallery , the thumbnails click event is not working. I have created a custom layout for the single product page.
Can we make the Product image+gallery sticky like Amazon?
Hi Seb, what if these Product Page Elements are not showing up in the side at all? Thank you
Make sure you first connect the UX Block as your product page. Then open up a random product and then edit the page template. So don't open the UX builder through the UX Blocks section.
@@Sebdelaweb amazing, thank you!
@@davidpham7150 You're welcome mate, cheers!
How can I put the gallery on the left side vertically (instead of under the big image) ?
Disable your custom layout in the theme options and than you will get the gallery settings again. prnt.sc/sbossy After selecting the vertical layout you can set your custom UX Block again.
Can we make the image portion sticky and how???
I replicated the same thing.. but when I made Sticky ADD TO CART on.. I doesnot work properly.
Hoi! Kan je misschien een video maken voor meer gevorderde product pagina's en collectie pagina's? De standaard flatsome designs doen het niet echt voor mij en mijn ecommerce bedrijf. Ik heb echt pagina's nodig die meer lijken op debijenkorf.nl bijvoorbeeld maar ook nordstrom.com en farfetch.com, de designs die deze websites hebben mis ik in jullie woocommerce thema..
Help me please. I am not getting the option of the Woocommerce for the Product Page like creating breadcrumbs or Product rating. Only the Shop options. Thank you!
Make sure to open the custom product layout with the ux builder and not the ux block. Also update Flatsome to the latest version.
th-cam.com/video/zDuRtiV_d-U/w-d-xo.html
The tutorial isn't showing on your website
Hi, one question if each of my product has different contents and description images etc. Do i have to make separate ux blocks for each product page ?
Good question. Yes. You need to make separate UX blocks and assign them to the products.
hey can you please help me out how can you use image switcher when you hower on product image your image switch i also need to do this please help me
Its getting it from image variations.
how to make image box smaller. image size is low so image is showing blury
hey why my product page not show???
How to create upload file in flatsome products page.
Why is it that we can’t adjust the logo size 3 different ways meaning 1 for desktop 1 for mobile and 1 for tablet...
I’m having trouble in my customizer everytime I adjust it on mobile it adjusts for desktop as well
Do you mean the main website logo?
Seb de la Web yes
how to add specific product layout only for one product?
Hi Ali! At the moment it's not possible the connect a custom layout to one product. uxthemes.canny.io/flatsome/p/custom-product-layout
I dont have this "Product Page" in my UX Builder. I have to pay for that??
You need to create as a “custom product page”.
Follow the video tutorial, explains clearly how to do this.
hello
we use same custom product page but can you tell me what code we use for toggle short description READ MORE?
I forgot to tell you.. Maybe you can spend more time explaining those how you create Templates.. Like in this video Custom Product page..
Like in slow motion mode.. If you can
Please
Does not even work, I added the product price, does not even display a price at all...
@hajnal4755
@all
Hi Seb, what if these Product Page Elements are not showing up in the side at all? Thank you
=>
Make sure you first connect the UX Block as your product page. Then open up a random product and then edit the page template. So don't open the UX builder through the UX Blocks section.
awesome. thanks :)
Anyone has the code for this ux block?
So at the moment this creation is not available anymore on my server. Soon I will release a new custom product page layout tutorial. Stay tuned.
Je verwijst in de video naar de code die in de tutorial gegeven zou worden, maar deze ontbreekt...