Look better. Sell better ⚡️ With our pre-build Demos and Video Tutorials for Flatsome WooCommerce Theme. With 10+ years ofWordPress and Flatsome we absolutely love crafting pre-made designs and sharing video tutorials on RU-vid.
Is there a way to blur / cross out unavailable combinations? So let's say you sell a shirt in 10 colours but only black and white go from xxs to 7xl while the other colours go from s to 5xl, is there a way to blur out the unavailable sizes once a colour was selected?
Yes, it’s definitely possible to blur or cross out unavailable size combinations based on color selections. Many e-commerce platforms, especially WooCommerce (which works well with Flatsome), offer this feature through variation swatches plugins. These plugins make things clearer for customers by graying out or hiding unavailable options when they select a color or size. This prevents users from choosing out-of-stock items, making the shopping process smoother and helping them quickly find what’s available.
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!
Anyway to assign a default swatch option to override all if not defined? Sometimes we might create a custom attribute that is specific to the product from the product edit page. This attribute will not be stored in the attribute list. By lacking the option to override to ideally UX label, this causes the attribute to show as a dropdown.
Yes, it's possible to set a default swatch option to override undefined attributes. However, for custom attributes added directly on a product edit page (and not stored globally), you'll need to manually configure the swatches. Using a plugin like "Variation Swatches for WooCommerce" is a great solution-it lets you apply a default swatch setting universally. This way, even custom attributes show as swatches instead of dropdowns unless defined otherwise, keeping the product page consistent and user-friendly. Cheers!
Thanks. I had that plugin installed and was trying to move away from it to remove redundancies. Maybe the override can be considered for future flatsome updates
@@AnanM1991 That sounds great! Streamlining is definitely the way to go, and who knows, maybe Flatsome will take note and add that override option in the future. It would save everyone a bit of hassle. Here's hoping they keep improving!
Thanks for your help however, after copy and pasting license and checking box this appears: The purchase code is already registered on another site. Please go to your account and manage your licenses. WHAT??? Any help would be appreciated.
The best thing to do is to get in touch with Flatsome customer service directly. They can check the license status for you and help sort out any issues with the registration or transfer. Hope this helps!
Hi, 👋 thanks for your video. I have a question, how can I do to customize header for the cart page, checkout page and account page? I create an ux block for each pages but how can I set it on these pages? If you have made videos or guides for this could you please send them to me? thanks
Thank you for your kind words! To customize the header for the cart, checkout, and account pages using UX Blocks, you can create a separate UX Block for each page and assign them through the Flatsome theme options or by applying custom CSS. If a direct setting is available in the theme options, you can easily select the block for each page; otherwise, custom CSS might be required. While we don't currently have a video covering this specific process, we truly appreciate your suggestion. However, it doesn't fully align with our current content strategy. Thanks again for watching!
@@Sebdelaweb thanks for the answer, I create the Ux block for each pages. Where are the flatsome theme option to assign these block to woocommerce pages? Can you upload an image of it?
@@adrianatroiano7982 It’s good to hear you’ve got the UX blocks set up. To assign them to WooCommerce pages, head over to the Flatsome Theme Options. From there, go to WooCommerce > Shop or Product Pages, depending on where you want to place the blocks. If things don’t go as planned, it might be worth checking out the WooCommerce support forums or groups-someone there might have a helpful screenshot or two. Hope this helps!
Hello Seb, I would like to greet you and congratulate you on your great knowledge of the websites. I have been using the flatsome theme for several years, but I would like to know if you can add CSS code to the Instagram feed, so that it is like an infinite carousel that doesn't stop. Similar to what you have on your website. ty bro! respect from Panama.
Thank you so much for your kind words and support! I'm glad to hear you've been using the Flatsome theme for years. Yes, you can definitely add CSS to your Instagram feed to create an infinite carousel effect, similar to what I have on my website. Cheers!
Hey! Great to hear your category page turned out so well-awesome job! 😊 Now, about the basic shop page, it's a bit tricky since it uses a WooCommerce template, which doesn't allow for the same kind of direct customization that category pages do. But don't worry! You can usually adjust the shop page by using custom CSS, the UX Builder, or even by tweaking the shop page template in a child theme. Hope this helps!
Thanks a lot for sharing your idea with us! We always enjoy hearing from the community. While we can't guarantee it will be created, given our small team and the projects we've got on the go, we do appreciate your input. Please keep the ideas coming, and don't forget to subscribe to our RU-vid channel to stay in the loop with our latest updates.
I wonder what effect UX Blocks have on seo. They appear altogether as separate URLs like: domaindotcom/blocks/random-category-top-ux-block I guess you have to give a no index attribute to these pages, but won't this attribute in any way harm the category page on which we later place this ux-block?
I would like to know why I can't put a flatsome block in the top bar and in that block place a SLIDER type element and put for example TEXT BOX in each banner inside the slider. I implemented it like this but I can't get the text to appear, it's hidden and I don't understand the reason.
Hi there! Thanks for your comment. Just a quick note: you can’t add a Flatsome block directly to the top bar by default. But you can enable the top bar by going to Appearance > Customize > Header > Top Bar and ticking the "Enable Top Bar" option. After that, follow the steps in the video to create a text ticker using the Fade effect. Hope this helps!
Hello, I want to ask something. I purchased the Flatsome theme and is it possible to edit my account page with this theme? If not, can you help us customize it?
Absolutely! You can customize the My Account page using the Flatsome theme. Flatsome offers various options through its UX Builder and other customization features, enabling you to personalize the My Account page according to your requirements. For more advanced customizations or detailed guidance, you can explore the Flatsome community or refer to the Flatsome documentation. Hope this helps!
@@yldzabdullahx It’s great to hear such positive feedback. Thank you for reaching out and sharing your idea! We love hearing from our community and truly appreciate your suggestion. While we can't promise it will be created due to our small team and numerous ongoing projects, your input is highly valued. Please continue sharing your ideas, and don't forget to subscribe to our RU-vid channel to stay informed about our latest releases.
If the Product Variation Swatches in Flatsome work on desktop but not on mobile, it might be due to a theme compatibility issue, a plugin conflict, or a mobile-specific setting. Start by making sure your theme and plugins are up to date. Next, review the Flatsome settings to check for any mobile-specific configurations that could be affecting the swatches. If the problem continues, try disabling plugins one at a time to find any conflicts, or reach out to Flatsome support for help. Hope this helps!
Thanks for your reply. After I setup everything, it worked on desktop but not mobile. Then I reloaded and it didn't work on either. The settings were completely gone. It's a fresh install but I'm thinking it has to do with SG Optimizer and their aggressive caching. After clearing the cache and reconfiguring, it has been working fine.
Hey bro hi, I am using Flatsome and I followed every step...but as soon as I paste the code you suggested it doesn't work. Don't know if something has changed or what, my product text area is not getting populated. Dont know if its the code or anything else. Pls help Thanks
Hey! It looks like you're having trouble getting the ACF shortcode to populate the product text area in Flatsome. First, make sure the ACF field name and post ID are correct and match the product you're working on. Also, check that the ACF field type is compatible with the Flatsome text area, like text or textarea. If everything checks out but it’s still not working, try updating both ACF and Flatsome to their latest versions, as updates often fix these issues. If the problem continues, there could be a conflict with another plugin or theme customization, so try disabling other plugins temporarily to see if that helps. Keep me posted!
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!
Thank you so much for reaching out and sharing your idea! We love hearing from our community and appreciate your suggestion. While we can't guarantee it will be created due to our small team and many ongoing projects, your input is valuable to us. Please keep your ideas coming, and make sure you're subscribed to our RU-vid channel to stay updated on our latest releases.
Interesting what I did before was saving those sites into chrome's bookmark bar by categorizing into separate folder which likely project sites, inspirations, web3, for later use, Readings etc
It looks like you're already using Chrome's bookmark bar effectively with your folder system. Anybox could be a nice addition to your routine. It offers a few extra tools like tagging, a better search function, and the ability to sync across devices. It won’t replace your folders but can make everything easier to manage and find, all within a single, tidy interface. So, you get the best of both worlds-keeping your folders while adding a bit more flexibility to your setup.
I have uploaded each color as different products and add image swatches as color variation. Now the issue is how to land on blue color product page when the customer click on blue color swatch while being on black color product page..
You need to set up a function that redirects them to the blue product's specific URL. This usually involves linking each swatch directly to its corresponding product page. When the blue swatch is clicked, the page should automatically change to or redirect to the blue product's unique URL, making the shopping experience smooth. This can be done with a bit of JavaScript or by configuring your e-commerce platform to support URL linking for product variants.
@@sunnydp2966 I get that image swatches can be a bit challenging, especially if you're new to it. But no worries! With some good guidance and a little patience, you'll get the hang of it. There are lots of step-by-step resources and tutorials out there to help you. And remember, the Flatsome community is always around if you need a hand. Just take it one step at a time, and you'll be fine! 😊
Hi ! Sorry i posted already this comment on a much older video, but i use yoast seo and i don't know if on the settings i have to disabled UX Blocks or not. I use UX blocks for the bottom descriptions of my product collection (ecommerce / wooocommerce). If i disable uxblocks, i'm scared that google won't be able to read the description of my product collection. What should i do pleaseeeee 🙏🏼🙏🏼🙏🏼🙏🏼 Thank you for the video !!!
Hi ! Nice video ! I'm asking if instead of write my text on the bellow case on the backoffice to put the text bellow if i can just do a uxblock description of XXX collection and copy past the shortcode into this section. Moreover, just a quick question please. I use yoast SEO and there is in the setting the UX Block XML option to activate or not. Should i let it like that (activate) or should i desactivate it ? Thank you for your answer !!!
Thanks for your kind words! You're right-creating a UX Block description for the XXX collection and using the shortcode in the designated section should work just fine. As for the Yoast SEO UX Block XML option, it's best to keep it activated since it helps search engines index your content better. However, if you have particular SEO needs or run into any issues, you can always tweak the setting to suit your strategy. I hope this helps!
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.
Hi , quick question, Only my child theme shows up in my themes and is active , my website is live. Can I now download my flatsome parent theme without any issues. Thank you
Yes, you can download your Flatsome parent theme without any issues. Since your child theme is active and your website is live, downloading the parent theme will not affect the current state of your site. The child theme inherits the functionality and styling of the parent theme, so having the parent theme installed is necessary for the child theme to work correctly. Once downloaded, ensure the parent theme is in the correct directory (usually /wp-content/themes/) so that your child theme can properly reference it.
The reason this tutorial focuses on creating a floating header instead of a "sticky bar" is to offer a unique approach that provides continuous visibility of the navigation or important buttons without taking up as much screen real estate. A floating header can enhance user experience by ensuring key elements are always accessible without being obtrusive, which can be particularly useful for websites with a lot of content. Additionally, a floating header can offer more flexibility in design and functionality compared to a traditional sticky bar.
@@liviocf2461 For many people just starting out with building a webshop, working with Flatsome is much quicker to set up. Since Flatsome is more focused on ecommerce, the learning curve is much easier compared to learning the extensive builder from Elementor. Flatsome also prioritizes speed and performance. However, Elementor is a great builder that offers more possibilities in terms of customization and custom post types. With the upcoming release of Flatsome 4, it will become much more versatile, similar to Elementor. I chose Flatsome a long time ago and have become a specialist in it, so in a way, it's also my niche.
Yes, it's possible to create a pop-up that appears when users are about to leave your site by using JavaScript to detect the mouse leaving the browser window or the user attempting to close the tab. You can then trigger a modal or alert with your desired message or offer. Hope this helps!
To enlarge your logo, you need to adjust the CSS or HTML settings that define its size. You can add a CSS rule like .logo { width: 300px; height: auto; } to your stylesheet, or use an inline style in your HTML, such as <img src="path/to/your/logo.png" style="width: 300px; height: auto;" alt="Logo">. This ensures the logo displays at the desired size while maintaining its aspect ratio. Make sure there are no conflicting styles overriding these settings. Hope this helps!
I have had much better experiences with AIOSEO than with RankMeth or Yoast. I run 5 German shops and all of them are ranked 1, 2, or 3 for important keywords. For me personally, Aioseo is unbeatable in combination with Flatsome. Danke für Deine guten Videos. 👍
Can you write a list of innovations? what awaits us in the next version of Flatsome? What are your plans and ideas? I want some more cool chips for the elements, new elements!!! I upload a lot of entries to my portfolio, and there are a lot of them later, more than 2000, my page takes a long time to load, it would be cool if you added a setting so that you could choose how many publications to display on the page, and add (lazy loading) or "infinite scrolling". In any case, I am grateful to you for your work and your ideas! You are the best one who was able to make the right UX Builder, of all that I have seen! I also forgot to ask, there is a slug in the portfolio: /featured_item_category how do I replace it so that it is automatically substituted? well, that is, the category was substituted there, and the links were correctly formed. I remember you wrote about it somewhere before, but I didn't understand anything there. that would be like with the records. site/news/sport/post_name - well, you get it!
Thanks for reaching out! Unfortunately, Flatsome hasn't released much information about the new update, and it's still unclear when it will launch. I'm considering creating a support page to encourage them to speed up the development since we've been waiting for years now. Regarding the portfolio slug, they made a video about it here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-3cl6XCUjOPI.html
@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.
Hi Seb! I just finished watching your rebuilding Nike video, and now this one. There is so much information here, and everything you've taught has helped me in my new job developing websites. Thank you very much!
Thank you so much for your kind words! I'm thrilled to hear that you found the videos helpful and that they've made a positive impact on your new job. It's always great to know that the content is making a difference. :)
@@relaxonlysocial Hey mate! Ensure you’ve correctly imported Google Material Icons in your theme’s settings or custom CSS. Verify that you’re using the correct class names for Google Material Icons in your HTML or UX Builder. Clear your website and browser cache to ensure the changes take effect. Hoping this helps!
First, create an image field in ACF. Then, add an image to a post or page using this field. Finally, create a shortcode to display the image. I hope this helps!
Yes, it is possible to use the same UX Block for multiple categories with different content. You can achieve this by dynamically loading the content based on the category. However, if the content and design need to be significantly different for each category, creating separate UX Blocks might be more efficient.
