Custom Product Layout for WooCommerce like Amazon - Flatsome Theme Tutorial & UX Builder

[@jamesr8635]

You all realise this is the only video on KZbin with real content about Flatsome product page. Seb, you are a saviour. Outstanding! Thank you so much 🙌

[@Sebdelaweb]

Thanks James! Good to hear you appreciate my videos.

[@gukkie87]

Genius! Never knew Flatsome could do so much..

[@Sebdelaweb]

Thanks! Happy to show you some more insights on the possibilities.

[@dennismargaris3910]

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

[@Sebdelaweb]

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?

[@BYS1106]

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!

[@Sebdelaweb]

That's so good to hear! Please share your link to show the result of your work :)

[@BYS1106]

@@Sebdelaweb okay.... the site is still under construction and this is my test site environment shopdemo.smart3.ch/produkt/blumengesteck-mit-roten-rosen/

[@siblisadik3875]

@@BYS1106 Can you please send me the code?

[@BYS1106]

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

[@siblisadik3875]

@@BYS1106 thank you. i got it.

[@zannakristal3754]

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 ..✨✨✨✨👏🔥🔥

[@Sebdelaweb]

Thanks Zanna! Love you taking the time to write me this energetic message 🚀

[@juniormoture4506]

Thanks for this tutorial. I was introduced to flatsome by a friend and am loving it

[@bluediamondleader]

super nice , finally i made it ... thank you

[@Sebdelaweb]

Great 👍

[@jamesr8635]

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

[@zannakristal3754]

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.

[@sam22482820]

Speechless !Thumb up ! Even you're not many subscribers but you're awesome!Support You I click your KZbin Ads on your youtube vedio!

[@leonel-pedro]

Thanks nice work, please continue.

[@michaelprior7459]

Thanks Seb for the clear and complete tutorial, it's much appreciated!!

[@Sebdelaweb]

Hi Michael 👋 Thanks for your thumbs up and that you are enjoying our videos.

[@045632]

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!

[@Sebdelaweb]

At the moment you can only style the Product Archives with the Flatsome Theme Options.

[@arunasdissanayake9814]

Thanks bro. looking forward for another great video.

[@arunasdissanayake9814]

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. [e-mail].

[@robertwilliam4368]

It is possible to add a bag icon to the add to cart button? If so, how? Thanks in advance

[@Rochas007]

Adoro este video! resuelves muchas de mis dudas, aprendo tanto que salto de alegria! Gracias por el contenido! sigue adelante! Gracias infinitas!

[@basedinbox]

I tried to follow this tutorial but when it comes to select Breadcumbs, product gallery, etc they wont show up in the list :/

[@CalligulasCat]

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.

[@aquilesesquivelmadrazo4315]

@@CalligulasCat You are a god!! Thank you, man. I've been stuck for 1 week trying to resolve this. I love you, man!!

[@behthiansu]

Thanks seb! Very useful!

[@Sebdelaweb]

Thanks again!

[@sopheakpang]

Really Awsome !!

[@sammesmartconcept9763]

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?

[@solomonayansola]

Thank you so much for this. Please kindly create a video for custom woocommerce dashboard.

[@foryoureyesonly1]

Awesome! I always like your work.

[@Sebdelaweb]

Thanks Azimuddin

[@mrbestcoupon6020]

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?

[@richardcox8592]

Any idea why my UX Builder doesnt have the option to add the bread crumbs?

[@biopawtastic]

GOOD VIDEO

[@Sebdelaweb]

Thanks! Appreciate that.

[@Dotsit]

Awesome video! This helped me out allot.

[@AmitCohenza]

Nice. Thank you. But where do you get those 'Product Page' Woocommerce Elements? Please advise.

[@YENIEXPO]

Yes I need to know the same please

[@xgpalex28]

Thanks!

[@eromance12345]

What a nice content! But why my flatsome has no Product Page (at 5:22) section on the elements? Do you have any idea?

[@SenseiGohan]

I don't have it too, I was looking for it. I think they made it payed on product adds-on

[@umutbaser3299]

So good.

[@Sebdelaweb]

Thanks Umut!

[@Yashsyn]

Hello and thank you for your effort. Is this possible to create a custom product catalog in flatsome?

[@BetCazador]

Why I can't find Product - Breadcrumbs or Products gallery anymore? Latest Flatsome update. Thanks

Thank you

[@Sebdelaweb]

Your welcome! Thanks

[@peter-zc6gw]

Is it possible to put in product specific accordions

[@lonnajordan8715]

Wow, great videos!

[@olanowak3029]

Hi! Why do i dont have all that custom blocks?

[@MJ-qe5lg]

How about adding a second button for one click checkout as well

[@_dh88]

Can you remove the absolute footer and change the header text color ?

[@imperialhighlandsupplies]

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

[@aksartist4846]

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)

[@proposal-hd6yw]

can you please do a full tutorial on flatsome side designing ?

[@dreamerstore420]

THANK YOU BRO !

[@Hassanali-uo8id]

The tutorial isn't showing on your website

[@blagojelukic]

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!

[@lajmoneyyoung]

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?

[@techgeek2923]

Can we make the image portion sticky and how???

[@ThangHoang-cr9xo]

hey why my product page not show???

[@JF-eq4of]

please can you helpwith the upsell part my wasnt uploading the upsell

[@migueleto_]

Hello Seb! I no longer see my zoom button in the product image can you help me please

[@amobichukwukenneth1399]

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

[@letiah7863]

So glad I found your channel! Does flatsome allow you add product variations in the custom product page mode?

[@camilopimentel792]

Why in the "ux builder" options it does not show me the "product page" tools ?

[@nicklaidman12]

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?)

[@nicklaidman12]

This is also what I mean...prnt.sc/sbk5c7

[@Sebdelaweb]

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

[@SenseiGohan]

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?

[@uzairsalman3305]

Can we make the Product image+gallery sticky like Amazon?

[@lagemadigital]

*Where can I found those Formats, I don´t have it*

[@italoassuncao]

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?

[@CGCursos_]

Hello all right, could you explain how to generate and insert short code of the theme Newsletter options? thank you very much

[@Alex-ds6oz]

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

[@045632]

How can I put the gallery on the left side vertically (instead of under the big image) ?

[@Sebdelaweb]

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.

[@Ruben_N_Tutos]

Hi! Why do i dont have all that custom blocks? :( i can't add nothing that you have

[@evolvecollections6045]

I replicated the same thing.. but when I made Sticky ADD TO CART on.. I doesnot work properly.

[@hajnal4755]

Hi Seb, what if these Product Page Elements are not showing up in the side at all? Thank you

[@Sebdelaweb]

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.

[@davidpham7150]

@@Sebdelaweb amazing, thank you!

[@Sebdelaweb]

@@davidpham7150 You're welcome mate, cheers!

[@siblisadik3875]

how to make image box smaller. image size is low so image is showing blury

[@roshancreative2336]

How to create upload file in flatsome products page.

[@abhishs5119]

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.

[@CloudInfluence]

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

[@Sebdelaweb]

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.

[@ghostpro007]

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 ?

[@Sebdelaweb]

Good question. Yes. You need to make separate UX blocks and assign them to the products.

[@KellyMacPepple]

This is great. Thank you. Can flatsome theme payment link to an Amazon store?

[@Sebdelaweb]

If you don't manage your products stock & payments on WooCommerce but on Amazon you can just create custom static product pages.

[@releafone7302]

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!

[@Sebdelaweb]

Make sure to open the custom product layout with the ux builder and not the ux block. Also update Flatsome to the latest version.

[@Sebdelaweb]

kzbin.info/www/bejne/sHXYg6efi8SXY7c

[@alibagheri507]

how to add specific product layout only for one product?

[@Sebdelaweb]

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

[@gangwalbhai680]

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

[@Sebdelaweb]

Its getting it from image variations.

[@imperialhighlandsupplies]

hello we use same custom product page but can you tell me what code we use for toggle short description READ MORE?

[@FredDiBiase247]

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

[@Sebdelaweb]

Do you mean the main website logo?

[@FredDiBiase247]

Seb de la Web yes

[@joel6672]

I dont have this "Product Page" in my UX Builder. I have to pay for that??

[@petermason7743]

You need to create as a “custom product page”. Follow the video tutorial, explains clearly how to do this.

[@TheHighFiveCompany]

Je verwijst in de video naar de code die in de tutorial gegeven zou worden, maar deze ontbreekt...

[@blagojelukic]

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

[@franciscogalvez7036]

Anyone has the code for this ux block?

[@Sebdelaweb]

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.

[@Alex-ds6oz]

Does not even work, I added the product price, does not even display a price at all...

[@davidpham7150]

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

[@Sebdelaweb]

awesome. thanks :)