Product Variation Swatches in Flatsome Theme Tutorial
HTML-код
- Опубликовано: 12 сен 2024
- In this tutorial we talk about the "Product Variation Swatches" for WooCommerce and Flatsome Theme. This option is released with the Flatsome update 3.14 and now you can show your product options with visual attractive buttons. Since this function is a native option of Flatsome you don't need any extra WordPress plugin.
------------------------------------
🌀 Watch this tutorial with tips & shortcodes:
www.sebdelaweb...
🌈 Checkout my pre-made designs for Flatsome Theme:
www.sebdelaweb...
👨💻 Hire Seb to re-design your Flastome shop:
www.sebdelaweb...
📷 Get inspiration and follow my journey on Instagram
/ sebdelaweb
🛠️ Need extra help or support with your Flatsome project?
Facebook group: / flatsome
Flatsome support: themeforest.ne...
Flatsome docs: docs.uxthemes....
Finally! Blew my mind that this was never on the theme to start with.
It is worth to mention that you can define doble color (by clicking the plus sign while choosing the first color) like black and white, red and blue etc. then the square / circle is divided and shows the two colors ;)
Wooow that's a cool feature! Didn't know that. Thanks.
Thank you! Explained perfectly and exactly what I was looking for!
You are welcome , :)
Awesome Seb, what a great addition.
I truly appreciate your support! Thank you for your kind words!
Great short tutorial and finally the cool feature built-in - thank you so much for sharing ... your are really inspiring. Keep on the good work!
Hello Brigitte Schweizer 👋 Always like your feedback and thumbs up. Reminds me to keep creating and sharing my videos.
@@Sebdelaweb Great and absolutely 🤩 and it’s much appreciated. So I can’t wait for the next ones 😉
🙏 Thanks!!!
Thanks Seb !
Everything is perfect except with "Use variation images" where for a product page containing for example the attributes "Color" and "Size", the image does not vary when clicking on the differents colors terms of the product if you have not selected at least one of the sizes (no problem on the collection page in the same configuration).
It would be great if this could be improved to avoid having to force a default size for each product sheet (which I find less good for the UX).
If it can help to do reverse engineering, in these last updates the old variation swatches plugin I was using (Villatheme - Variation Swatches) did not have this problem ; )
Thank you in advance Seb if you can make it to the dev team
Just what I was looking for, thank you!!
Awesome Amigo, Stay tuned for more videos like this. Appreciate
Hi Seb,
The new update is very promising. I would just like to propose a few changes if possible.
- When you activate the Variation swatches on the catalog page, you can only select 1 varation to show up. So for example, Product A has only color swatches and product B has only Small, Medium, Large size swatches. With the recent updates you cannot select both to show up, just one of the two. all other product variations swatches plugins have this option though. So maybe you can implement this aswell?
- This change is connected to the above one in some way. On my catalog page you can directly put products into your cart with the “add to cart” button. Before when I used plugins you could just select the color swatch and then click add to cart in the catalog page. But with your recent update if you select the color you want on the catalog page, you have to open up the product itself to go to the product page to put it in your shopping cart. Can you fix this? This will be easier and faster for customers to shop directly from the catalog page instead of opening every product and do it from there. It’s especially nice for returning customers.
Maybe you can pass this on to the team. Thanks!
Hey, thanks a lot for your feedback! I'm really glad you took the time to share your suggestions. You're absolutely right about showing both color and size swatches together-it makes things easier for customers when choosing between options. I'll make sure to pass that along to the team for future updates. And yes, letting people add items straight to the cart after picking a variation on the catalog page would really speed things up. It’s a great point and something we should definitely look into. Thanks again!
It works well...very nice! TY for sharing this awesome tutorial - the only caveat, - it's a lot of manual work, BUT...nice!
Thanks for your message. Good to hear you like our video.
Thanks! can you explain the other new features of the new release?
Thanks for your comment! The latest Flatsome update brings some handy new features. These include better performance for faster loading, more pre-designed elements and layouts for customization, and improved UX Builder with new modules. It also now works better with the latest WooCommerce and WordPress versions. Plus, they’ve added more responsive design controls, so it’s easier to tweak your site for different devices. Hope this helps!
Hi, how can you add more than one product image per colour variation?
same question!
Same question
Such a nice comment! To add multiple product images per color variation in WooCommerce, you can either use a plugin like "Additional Variation Images Gallery for WooCommerce" to easily assign images to each variation, or go the custom route with JavaScript or jQuery. The plugin is a straightforward solution that enhances the customer experience, while the coding approach involves adding all images to the gallery and filtering them based on the selected variation. Both options improve the user experience, with your choice depending on technical preference or ease of use. Hope this helps!
Thank you! This is very useful.
Awesome to hear!
Great , thank you
You're welcome. Have a great day! :)
Hi! Cool video. Does flatsome supports showing all the variation of the products (as individual products) in the category list?
Not yet , Hope they dig into it soon
Thank you!
You're welcome!
Thank you so much
Glad you like!
You are too easy to understand. & Nice work.
Hola Fréak ✌️Happy to hear that you like our videos.
This was due very longer in earlier updates but thank you anyways seb
amazing!
awesome!
I have a question about swathes at the shop page.
for example I have sizes for jeans and t-shirts
they are different type of variations.
How I will show them all ?
thanks
Thanks for your question! To show different size options for products like jeans and t-shirts on your shop page, you’ll want to set up attributes and variations in WooCommerce. Start by creating separate attributes for each category (like "Jeans Size" and "T-Shirt Size"), then assign the right sizes to each product. This way, when a customer checks out a product, they’ll only see the relevant sizes for that item. It keeps everything organized and avoids confusion. Simple and effective!
Very great content ! Love your channel! How can I filter colors, sizes etc. On the category pages?
Thanks Tina! Happy to hear you like our videos. You can filter these options with adding the right widgets to the shop tppr.me/m4Gog
Thanks for the great video Seb! My question is how does it show the variations of google shopping? Would it show only one variation of the product or would create different products on the feed for each variation. Thanks again :)
To be honest it was always Woocommerce , But you can always Give a try and see the result . Cheers !
Hi seb, i was wondering if there was a way to change the font color of the variations. it would be great to change it from the grey colour to something more visible. perharps a css i could use.
Hi! You can easily change the font color of the variations by adding a bit of CSS to your theme. Just go to the Additional CSS section and use this code: .variation-selector-class { color: #000000; } Replace "variation-selector-class" with your theme's actual class name for the variations, and switch out "#000000" with the hex code of the color you want. This will make the variations more noticeable on your site. If you're not sure about the class name, you can find it by inspecting the element with your browser's developer tools. Hope this helps!
Thank you for the update 🤠
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.
thanks
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!
have a question about swathes at the shop page.
for example I have sizes for jeans and t-shirts
they are different type of variations.
How I will show them all ?
Hard to explain , Try to read Woo Docs
Thx man!
how to hide label with stock 0?
Hey Seb! I love your content keep em coming lol. Hey question for ya, I want to set up a testimonial section on my website under the hero section. Should I use a section element in the UX builder or should I use a block element feature instead. What do you recommend? Thanks
Hi Ruben, if you wanna re-use the testimonials on different pages I would advice the UX Block element. But I use sections for all my different areas.
@@Sebdelaweb Thank you brother! In the last few days I have learned so much from watching your videos. I am a flatsome user for life now. It's so customizable. Hey maybe you can start a Udemy course to teach this. 😉
Thanks Ruben! Appreciate that. Maybe I do that, creating a course soon.
How to hide/ blur out of stock attributes (eg. sizes) only on category pages? so that on category page would be visible which sizes of which product are in stock now...
Hey Man , You can either try PHP snippet it's the best way and if you cant then go for css just to hide it .
I have enabled this, but my product page is not showing the swatches
If you follow all steps correctly It should work properly ..
how to do this with variable products and variations as u just did with a simple product....when i press into products attributes nothing shows altough i have hundreds of variable products with size and color variatoins inside individual products
Seb thank youuuuuuuuuuuuuuuuuuu)))))
Thank you for your videos! I would like to change the layout of the checkout page. according to GDPR.
Shopping cart-> contact information-> overview and send order. Maybe also a thank you page
HI Seb de la Web
Great video, thanks! Thumbs up for the yurt!
Question:
I have listed as separate product every color variation of the same product. Defined color and size attributes for each.
Example:
T-shirt Awesome (Attributes: Color: Blue; Size: S, M, L, XL)
T-shirt Awesome (Attributes: Color: Red; Size: S, M, L, XL)
So this way on the Categoty page, it is listed each color. Nice!
But when I open the T-shirt Awesome Blue product page, there is no information that this product is available also in Red.
How can I link these products together (easy and fast) to show color variations for the custumer on product page and to show all color swatches on Category page under product image?
So, on Category page, for T-shirt Awesome Blue it should show blue and red swatches and for T-shirt Awesome Red it should show blue and red swatches again.
When T-shirt Awesome Blue is clicked on, and enters product page, it shows somehow that in Red is also available, and takes you on Red product page when clicked.
Is it possible with the theme options to do this, or it needs additional plugin? If yes, than what plugin?
Thank you!
How do we add the swatch to a custom product page?
The swatches will be auto displays also on the custom product page. Just add the element "Add to cart tppr.me/DIqcJ
Is there a way to programmatically assign the attribute swatch options (shape, size, image etc) through the rest api ?
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.
@@Sebdelaweb this seems hard task to do for a noob like me :p
@@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! 😊
i got issue. in my case variation image as you said at 4:58 does not work
The UX options are not activating here at my woo atributes
Any help please . I followed the steps and activated the swatches but it didn't work.
Thanks 😄
Hey Seb, do you recommend making the UX blocks a "no index" and or "no follow" ? I recently did a website audit on my site and those errors came up. any input would help
Thank you for your awesome tutorial. Your all videos are very nice and easy to understand.
I have a question. How to add variation image gallery in flatsome (example: clothing products needs to display 4-5 images for each colour) . Do we need to use any plugin ? if yes , please suggest me one. if not, Kinldy guide me how to do in flatsome itself. Thank you.
Thanks! You can give this plugin a try: getwooplugins.com/plugins/woocommerce-variation-gallery/
@@Sebdelaweb Thank you so much for your reply. Let me try this plug-in.
Great! Good luck
Hi Seb I am having trouble.. registering my New Version 3.14.1
It is asking for a missing token..
I just bought the Theme today..Flatsome Theme
I can't set price to product? how can i change it? I just can set price of variant of product
Hi! If you make products variable you can only set the price on variation level.
how do i add an emi plans table (or) an emi plans popup on the product page?
What do you mean with EMI plans?
Works on desktop but not mobile, why?
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.
@@AnanM1991 That’s fantastic to hear! Thanks for letting me know.
Hi. The option to show variation on shop page is only for one only variation? Is there an option to show on shop page the different variations from different products? Just like the plugin that show a variation from every product even if it is different variation. Can i choose ux image so all the products with different variations but these different variations will be ux images show in the shop page?
I'm having the same problem on my website. When I use a plugin this is done automatically but when I turn on the swatches from theme, I can only select 1 variation. :(
@@TheBrahimB so if i have 50 products with one or two variations on each product then i can see that only in one product which i choose the variation?
@@TheBrahimB can you recommend the automatic plugin you've used in the past? Cheers
Yes, this is a bit of a downer for me too. I have multiple vendors, which all have different color palettes and color-codes, which i'd like to represent in my attributes.
It would be great, if there would be a solution to this big limitation ...
For some reason, I follow the steps but cannot place the variable flavors (in my case), the Simple product nor the variable product option allows me. Is there some kind of item I need to put in the UX Builder? Does anyone have the same problem?
I have same problem with you, can you fix it?
how do i update flatsome to the new update??
The color swatches don't appear in product catalog page after selecting the attribute in theme option.
I can see it only in product page.
Has anyone had this problem ?
You made sure you selected the attribute that needs to be displayed? tppr.me/fCmed • Flatsome Theme options > WooCommerce > Product Catalog
nice tutorial, but there are no attributes in my product section, and I have abouit 25 different attributes within all my products, how can I show them?
For the technical theme related questions It's better to ask Flatsome through the Facebook Group or create a support ticket.
sir can you tell me how to set New Label on my new products..I change the label sale to new but my sale products also turn to new..auto new that stated on new version doesnt work for me.thanks
With the latest version of Flatsome there is an automatic NEW label function. tppr.me/XrPvz
FS Theme Option ▸ WooCommerce ▸ Product Catalog
@@Sebdelaweb thank you sir
I did not understand the new update with color swatches.
I watched the video, but this means that it is only suitable for one product.
I have hundreds of products how will it work?
How will I display hundreds of products with the same colors?
For example, the black color is found in most of my products. Suppose the product is pants and I have a shirt product. How will it display the pictures of the pants and shirt in the color swatch?
They’re connected to attributes. These can be used across multiple products
Unfortunately the swatches only work if you use just 1, if you need to use both size and color it doesn’t work for some reason. Great content!
That's strange because we have used many different variations combined. Maybe you are facing a bug... You can always reports your issue here: facebook.com/groups/flatsome
@@Sebdelaweb oh okay, probably because my infinity scroll also doesn’t work. I will contact them
@@Sebdelaweb thanks for assisting
Are there any conflict if I use the Flatsome Theme + Elementor Pro to builder? (instead of Flatsome builder)
Hello Semeando Discípulos 👋 I never did this before to be honest. Let me know if you are facing any issues combining the two. Good luck :)
I'm using Symbiostock plugin, so I have no Attributes just Licenses, and I can't find these new options :/
Hello Hajnal 👋 If you need some extra support regarding Flatsome I suggest you post your question on the Flatsome Facebook group or leave a support ticket. The best with your project!
facebook.com/groups/flatsome/
uxthemes.com/support/
somehow its not working for me
I don't have templates in any of my products. Even though I updated to version 3.14.2
Hello Shew book 👋 If you need some extra support regarding Flatsome I suggest you post your question on the Flatsome Facebook group or leave a support ticket. The best with your project!
facebook.com/groups/flatsome/
uxthemes.com/support/
Does Flatsome supports variation image gallery? Our products have unique features for each variation. So can't include common image.
Hello Mohammed 👋You will need a plugin for this unfortunately. We used the followin plugin in the past: getwooplugins.com/plugins/woocommerce-variation-gallery/
@@Sebdelaweb Got it. Thanks
Your welcome! The best with you project.
I would like to set the color pattern in swatches but when clicked, change the featured image, like when use the image on swatches. Do you know how can we do that?
Hi Thales, I don't understand you English and the problem.
@@Sebdelaweb Sorry I wrote a little without thinking too much. After watching one of the flatsome videos, I found a solution to what was going on. The system allows changing the photo without it appearing on the swatch, using only the color option, but uploading the image and changing it on the click of the variable product, I hadn't noticed that.
Aaah great Thales. Glad you found the solution :) What's the project you working on? Do you have a website link?
Hey Seb,
We have just found this new functionality with your video. Activating the variation swatches in Flatsome/Advanced/Woocommerce and then setting the colors in the product attributes (just as you explain in this video) we get only white swatches. No colors. Refreshed and deleted all caches, but still nothing. Anything we have to do to get this running?
We'd love to hear from you on this.
Blessings Oliver
you have to go to the settings of each color you created and in the HEX selection you choose whatever color you want - as he does in 3:09 in the video
Thanks for your support on this Emilio.
when we make a new product and select variable product then go to attribute and make attributes then we make variations and at that moment these options should show but there is nothing there so how do we make all this of each and every variable product
Same problem here , I dont have attributes to choose, did you find a way?
@@RaffoSan in the main description of products u have attributes u forst have to create attributes from there and then u can select them in every product
Hello SpoonFul 👋 If you need some extra support regarding Flatsome I suggest you post your question on the Flatsome Facebook group or leave a support ticket. The best with your project!
facebook.com/groups/flatsome/
uxthemes.com/support/
Has anyone used this with Printify or Printful plugins? All my shirts have attributes generated by the Printify plugin, but the attributes are not attributes page 2:55.
Hello LBJ Media 👋We didn't used this with Printful to be honest. I remember Printful when I was selling merchandise. Great tool. Let me know if they work together.
You skipped douple colors. Also we are waiting image swatch demo
Sorry but didnt worked out for me....only thing happened was add the colors just the names in additional information....
How can each variation link to different product? For example i have created black nike t-shirt and yellow nike t-shirt! I want the color variation to link to different product is this possible? Please i need help
thanks
Hi Rahman Ahmadi Aqdam 👋 Thanks for your thumbs up and that you are enjoying our videos.
does not work for me :(