In the video in the UX builder, there's the option to select Content vs Product Page. Inside product page you can then select product gallery, price, etc. I've created a UX block but I can't see the info related to "Product page". Is there any extra step I need to follow so I can have these options? Thanks a lot.
To access the "Product page" options like the product gallery and price in Flatsome's UX Builder, make sure your UX block is set for product content. When editing, choose the "Product Page" block type or template. This will unlock product-related options. Also, double-check that your UX block is linked to a product layout or used on a product-specific page. Otherwise, those product elements won’t appear on regular content blocks.
I have problem i suddenly didn't have the purple icons i only see those with featured product with WOO on.. but i cant see gallery and all those icons anymore... they just display as p tags :s
To customize the pre-made pages, you can easily use the UX Builder in Flatsome. Just go to Edit Product > Edit product layout with UX Builder. This will open the product page in the builder, where you can adjust the layout, colors, fonts, and more to match your style. Hope this helps! 😊
To move the product gallery thumbnails to the left of the main image in WooCommerce, first check your theme's settings under Appearance > Customize > WooCommerce > Product Images, as some themes offer an option to change the thumbnail position. If no such option is available, you can add custom CSS, like flex-direction: column; to the gallery thumbnails, adjusting the width and margins as needed. For more control, you can also override the WooCommerce template files in a child theme to modify the layout directly. Hope this helps!
thanks for this video. a qustion: how can I add more woocommerce element to ux builder? (I have original theme, but my ux builder has 6 woocommerce element. I saw yours are more), but How?
Hi! Unfortunately, I don't have specific tutorials for the Portfolio tool in Flatsome. However, you can check out the Flatsome Community and Flatsome documentation they’ve got plenty of useful tips and guides that should help you get the hang of it. Plus, the community is usually pretty helpful if you run into any issues!
I have 2 problems...I have lost the editing option UX block from the above menu and I don't have all the purple woocommerce elements so I cannot create a product page. Do you have any idea how to fix it?
At first, the purple elements didn't appear for me too. It's because I have created the block and added something (section, row) BEFORE opening the customizer/woocommerce/product page and changed the layout to this custom block. So, first create the block, save it, open the customizer, change the product page layout, save it, open a product page and the options should appear. Hope it helps.
The purple options are not showing when I try to create it. Is it necessary to install any plugin to the theme? PS: I haven't set the product page to the custom
Hey , How are you doing ? I was wondering if you could be more specific about what problem you are facing ?? to do a custom design you need to set a custom product Layout
Thanks for reaching out. If you're not seeing the product Page Elements in the UX Builder, they might be disabled or hidden due to your theme or settings. To fix this, go to your theme settings and make sure the product elements are enabled. If your theme doesn't support these elements by default, you might need to add them using hooks or custom code. Check your theme's documentation for specific instructions or contact the theme's support team for more help.
If your custom product layout in the Flatsome Theme isn't working on your WooCommerce product page, a few common culprits might be at play: plugin conflicts, outdated theme or WooCommerce versions, or caching problems. To troubleshoot, start by making sure everything is up to date, then temporarily disable other plugins to see if one is causing the issue. Clear both your site's cache and your browser cache, and review any custom code that might be affecting the layout. These steps should help you pinpoint and fix the problem. Hope this helps!
@@Sebdelaweb I found the following solutions, if anyone else is interested: .nav-tabs+.tab-panels { background-color: #F2EBE7 } .woocommerce-tabs ul.tabs li.active a { background: #EBE3D7 !important; }
Yes, you can easily duplicate a product page in WordPress using the Flatsome theme by installing a plugin like "Duplicate Post" or "Product Duplicator for WooCommerce." These tools allow you to clone an existing product page with all its content, settings, and design, making it quicker to edit details like price, photos, and descriptions for similar products. This method saves time and ensures consistency across similar product pages. Hope this helps!
Hey Seb, so I created a custom product page template using this method. However, I created it by changing one product to the new custom template first so it wouldn’t break my other products whilst building. When I’d finished I went to customise and changed all product pages to the new template…and it didn’t change any of them. And it changed the one product I’d tested it with back to the old layout. Any knowledge on why that might happen?
Why are the "share" icons only show for mobile but not desktop? Also the twitter share icon produces an error. Also all share icons on mobile only send you to the browser version of facebook/twitter etc and not their Apps
To add upsell features to your Shopify theme, you can either install an upsell app from the Shopify App Store, like Bold Upsell or ReConvert, which offers easy configuration and various upsell options, or manually edit your theme's code by modifying the Liquid files (such as product.liquid or cart.liquid) to include custom upsell offers.
@@natasjawal Thank you for answering but I am allwas updating and still do not have it. Please make me a screen capture of your UX Builder extra icons Thanks
At first, the purple elements didn't appear for me too. It's because I have created the block and added something (section, row) BEFORE opening the customizer/woocommerce/product page and changed the layout to this custom block. So, first create the block, save it, open the customizer, change the product page layout, save it, open a product page and the options should appear. Hope it helps.
Just had a Question about the default Customization of the header Specifically the newsletter button. When you hover over it it pops a "our newsletter" Is there anyway to change the text there?
can you make a video on how to use youtube videos on product page for every product pagee with different video ...... anyone know this please help me out
If you need to ad videos on product page then you have to put those video in product detail because you are using same product page design for each product.
Hey Brother, now i need to know something. Maybe you wont see this. But Can you show us how to convert the Flatsome theme (where my website if fully built) to elementor pro. I want the usages of the elementor, but they dont work together anymore. Is there a way of converting the html thats compatible with elementor?
Flatsome is something I always prefer to work with with flatsome UX Builder You can do pretty much everything with touch of little CSS .TBH not really a Elementor fan.
If you're unable to find the "Product" tab in the Flatsome theme for WooCommerce, try navigating to your WordPress Dashboard and then go to "Products" on the left-hand menu to manage or add products. If this option isn't visible, ensure WooCommerce is properly installed and activated. There could also be a theme setting or plugin conflict causing the issue. Hope this helps!
In the video in the UX builder, there's the option to select Content vs Product Page. Inside product page you can then select product gallery, price, etc. I've created a UX block but I can't see the info related to "Product page". Is there any extra step I need to follow so I can have these options? Thanks a lot.
To access the "Product page" options like the product gallery and price in Flatsome's UX Builder, make sure your UX block is set for product content. When editing, choose the "Product Page" block type or template. This will unlock product-related options. Also, double-check that your UX block is linked to a product layout or used on a product-specific page. Otherwise, those product elements won’t appear on regular content blocks.
Great video as usual, thanks a lot Seb !
You're welcome :)
I have problem i suddenly didn't have the purple icons i only see those with featured product with WOO on.. but i cant see gallery and all those icons anymore... they just display as p tags :s
Hi, Seb thanks for the tutorial. How do you style the "BUY NOW" button to be full width like yours?
I purchased your products page pack but i don't like the way it's displaying products how can i customise the pre made pages?
To customize the pre-made pages, you can easily use the UX Builder in Flatsome. Just go to Edit Product > Edit product layout with UX Builder. This will open the product page in the builder, where you can adjust the layout, colors, fonts, and more to match your style. Hope this helps! 😊
Wow. Great Help, especially with the Variation products. Strangely my Flatsome shows Variants with buttons not with a drop down list....
You're welcome!
Thanks for this tutorial. It is helpful 😊
Glad it was helpful!
Help me! I don't find PRODUCT PAGE and Product Gallery on Elements
Make sure you only open the UX Builder with the button Edit Product Layout with UX Builder: tppr.me/qtVaZ
Hi.
How can I configure so that the additional photos appear on the left side and not below the main photo?
To move the product gallery thumbnails to the left of the main image in WooCommerce, first check your theme's settings under Appearance > Customize > WooCommerce > Product Images, as some themes offer an option to change the thumbnail position. If no such option is available, you can add custom CSS, like flex-direction: column; to the gallery thumbnails, adjusting the width and margins as needed. For more control, you can also override the WooCommerce template files in a child theme to modify the layout directly. Hope this helps!
thanks for this video.
a qustion: how can I add more woocommerce element to ux builder? (I have original theme, but my ux builder has 6 woocommerce element. I saw yours are more), but How?
go to product page then edit with UX builder from there and you will see more elements
Thank you From Egypt
Hi Seb, do you have any tutorials on how to use the Portfolio tool in Flatsome? Would be great if you're able to help with this. Thanks
Hi! Unfortunately, I don't have specific tutorials for the Portfolio tool in Flatsome. However, you can check out the Flatsome Community and Flatsome documentation they’ve got plenty of useful tips and guides that should help you get the hang of it. Plus, the community is usually pretty helpful if you run into any issues!
hey hello, a question, how do I put a line delimiting the menu area, that white stroke in the menu
I have 2 problems...I have lost the editing option UX block from the above menu and I don't have all the purple woocommerce elements so I cannot create a product page. Do you have any idea how to fix it?
At first, the purple elements didn't appear for me too. It's because I have created the block and added something (section, row) BEFORE opening the customizer/woocommerce/product page and changed the layout to this custom block. So, first create the block, save it, open the customizer, change the product page layout, save it, open a product page and the options should appear. Hope it helps.
@@DiogoPetermann Oh man, you are really amazing it works, it works, it wooooooooooorks ❤❤❤❤❤
thank you Seb!
Appreciate that.
The purple options are not showing when I try to create it. Is it necessary to install any plugin to the theme?
PS: I haven't set the product page to the custom
Hey , How are you doing ? I was wondering if you could be more specific about what problem you are facing ??
to do a custom design you need to set a custom product Layout
Amazing tutorial!
Appreciate that.
It is awsome but can we add te SKU on our product page?
Great to hear that , yes you can
Hey seb. Thank you for your tutorial. It was very useful
Awesome
i dont have the product Page Elements in the UX Builder - where can i add them ? do i need some hooks ?
Thanks for reaching out. If you're not seeing the product Page Elements in the UX Builder, they might be disabled or hidden due to your theme or settings. To fix this, go to your theme settings and make sure the product elements are enabled. If your theme doesn't support these elements by default, you might need to add them using hooks or custom code. Check your theme's documentation for specific instructions or contact the theme's support team for more help.
element not working ????
If your custom product layout in the Flatsome Theme isn't working on your WooCommerce product page, a few common culprits might be at play: plugin conflicts, outdated theme or WooCommerce versions, or caching problems. To troubleshoot, start by making sure everything is up to date, then temporarily disable other plugins to see if one is causing the issue. Clear both your site's cache and your browser cache, and review any custom code that might be affecting the layout. These steps should help you pinpoint and fix the problem. Hope this helps!
I don't have the product page elements on woocommerce
You have go to product page then go to edit with elementor you will find it from there
As usual, thanks for this tutorial
Thanks for tuning in! Your support keeps me going! :)
Hi.Can you make a video to change flasome's mobile menu to be more beautiful
I will try
How to change the background color from the product tabs??
When ever you want to do something Different then what Already UX builder and flatsome offering you always have to go for Custom Codes
@@Sebdelaweb I found the following solutions, if anyone else is interested:
.nav-tabs+.tab-panels {
background-color: #F2EBE7
}
.woocommerce-tabs ul.tabs li.active a {
background: #EBE3D7 !important;
}
is there a way to duplicate the product page for other similar products and just change the price, photos etc. since its less time
Yes, you can easily duplicate a product page in WordPress using the Flatsome theme by installing a plugin like "Duplicate Post" or "Product Duplicator for WooCommerce." These tools allow you to clone an existing product page with all its content, settings, and design, making it quicker to edit details like price, photos, and descriptions for similar products. This method saves time and ensures consistency across similar product pages. Hope this helps!
Gracias amigo, esto fue de gran ayuda para mi
Impresionante escuchar eso
Plz Make a Full eCommerce Website Tutorial 😍
Stay tuned we will bring something good very soon
HI ! Can you customize the member account page ??
Much Love Mate.
i do not see the custom option under layout my settings are totally different than yours
i think missed a step or you went a head in the process
Is het mogelijk om een invulveld bij een product te plaatsen zodat de klant bijv. een naam in kan vullen bij een product?
Hey Seb, so I created a custom product page template using this method. However, I created it by changing one product to the new custom template first so it wouldn’t break my other products whilst building. When I’d finished I went to customise and changed all product pages to the new template…and it didn’t change any of them. And it changed the one product I’d tested it with back to the old layout. Any knowledge on why that might happen?
Sounds like a caching thing.
Why are the "share" icons only show for mobile but not desktop? Also the twitter share icon produces an error.
Also all share icons on mobile only send you to the browser version of facebook/twitter etc and not their Apps
It could be the reason , You set it to For mobile only ?
hello
who i make UP SELL in this theme like Shopify please ?
To add upsell features to your Shopify theme, you can either install an upsell app from the Shopify App Store, like Bold Upsell or ReConvert, which offers easy configuration and various upsell options, or manually edit your theme's code by modifying the Liquid files (such as product.liquid or cart.liquid) to include custom upsell offers.
How do you add plus and minus button in add to cart
That option is available for woo commerce Plugin Just search Product add to cart and you will see this Quantity section along with add to cart button
Not found product gallery ?
Didn't get that
@@Sebdelaweb he is missing the woocommerce product ux elements.
Hi Seb, Why I do not have the WC product page UX Builder purple elements icons gallery? I mean all the extra below, Thanks
I also dont have them
@@j-9403 ((-:, Well what do I need to do so I can use these icons as we saw in the video? Do I need to purchase somewhere? Or not at all.
You need to be sure you have Flatsome updated to the latest version, the new widgets will appear then :)
@@natasjawal Thank you for answering but I am allwas updating and still do not have it. Please make me a screen capture of your UX Builder extra icons Thanks
At first, the purple elements didn't appear for me too. It's because I have created the block and added something (section, row) BEFORE opening the customizer/woocommerce/product page and changed the layout to this custom block. So, first create the block, save it, open the customizer, change the product page layout, save it, open a product page and the options should appear. Hope it helps.
How can i create unclickable Product images on the product page? Just the images without being clickable and zoomable? Thanks in advance
Hi Ahmet, you can disable this: Flatsome Theme Options > WooCommerce > Gallery tppr.me/vmxkn
Just had a Question about the default Customization of the header Specifically the newsletter button. When you hover over it it pops a "our newsletter" Is there anyway to change the text there?
I think you will need to work with a plugin like Loco Translate
@@Sebdelaweb thanks I'll look into that.
How to change shop page layout
can you make a video on how to use youtube videos on product page for every product pagee with different video ...... anyone know this please help me out
If you need to ad videos on product page then you have to put those video in product detail because you are using same product page design for each product.
Miss your vídeos
Soon we are coming back to you guys.
Hey Brother, now i need to know something. Maybe you wont see this. But Can you show us how to convert the Flatsome theme (where my website if fully built) to elementor pro. I want the usages of the elementor, but they dont work together anymore. Is there a way of converting the html thats compatible with elementor?
Flatsome is something I always prefer to work with with flatsome UX Builder You can do pretty much everything with touch of little CSS .TBH not really a Elementor fan.
@@Sebdelaweb I switched over to elementor when I first wrote the message. It works great and the integrations are great!
I can not find
the product tap
If you're unable to find the "Product" tab in the Flatsome theme for WooCommerce, try navigating to your WordPress Dashboard and then go to "Products" on the left-hand menu to manage or add products. If this option isn't visible, ensure WooCommerce is properly installed and activated. There could also be a theme setting or plugin conflict causing the issue. Hope this helps!