Custom Product Fields in WooCommerce Product Page - Flatsome Theme Tutorial

[@citizen6610]

Thanks bro! I really like that you don't cut out the mistakes :)

[@Sebdelaweb]

Thanks, bro! Authenticity matters, and I agree that mistakes are a natural part of the learning process. I appreciate your feedback! 🙂

[@hajjimubarak]

Thanks... I didn't think I needed this tutorial but it was helpful

[@Sebdelaweb]

You're welcome. Thanks for watching! :)

[@petertely]

Excellent video, Seb! To take it a step further, you can then create your own shortcodes to expand the display possibilities of the ACF fields. For example, you can easily create a condition for an element to display only if the ACF field value is not empty.

[@RhysCycle]

This is exactly the problem I’m facing now. How can I do this?

[@petertely]

@RMS10071 Hey there! To achieve conditional display of ACF fields in Flatsome's UX Builder, you can create a custom shortcode within your theme. Here's a step-by-step guide: 1. Add a Custom Shortcode : - Open your theme's `functions.php` file (I'd recommend doing this in a child theme so that updates won’t overwrite your changes). - Insert the following code: /** * ACF Shortcode: Conditionally displays a title and field value. * The title and value are displayed only if the specified ACF field has a value. */ function my_custom_acf_title( $atts ) { $atts = shortcode_atts( array( 'field' => '', 'title' => '', ), $atts, 'acf_conditional_title' ); if ( empty( $atts['field'] ) || empty( get_field( $atts['field'] ) ) ) { return ''; } return $atts['title'] . ' ' . get_field( $atts['field'] ); } add_shortcode( 'acf_conditional_title', 'my_custom_acf_title' ); 2. Use the Custom Shortcode in UX Builder: - Navigate to the page/post within UX Builder where you wish to display the ACF field. - Add the following shortcode: [acf_conditional_title field="name_of_acf_field" title="Your desired title:"] Replace "name_of_acf_field" with the specific name of your ACF field. Also, tailor "Your desired title:" to the actual title or prefix you wish to precede the field value with. This custom title will be displayed followed by the ACF field value, but only if the value is present. If it's empty, the entire output will be hidden. I hope this helps! Let me know if you have any questions. 👍

[@Sebdelaweb]

Awesome! Thanks for sharing :)

[@screencast7376]

Great video. What font was used on the topography?

[@Sebdelaweb]

Thank you! For the topography, we used Isidora Semi-Bold and Helvetica to achieve a clean and balanced look. These fonts complement each other well, with Isidora Semi-Bold adding a bit of weight and character, while Helvetica keeps the design versatile and readable. Glad you enjoyed the video! 😊

[@Famous_Flavours]

Looks like the shortcode feature is turned off when you now install. it says to use add_action( 'acf/init', 'set_acf_settings' ); function set_acf_settings() { acf_update_setting( 'enable_shortcode', true ); } But not sure where to add this?

[@Sebdelaweb]

Hey! To enable it, just add the code to your theme's functions.php file through Appearance > Theme Editor in WordPress or via FTP. Save the changes, and the shortcode feature should be good to go! Happy building! 😊

[@wuxu--]

Thank you for sharing your knowledge!

[@Sebdelaweb]

You're welcome. Cheers!

[@DANGQUOCNGUYEN]

Perfect! It's easy to understand. THank you

[@Sebdelaweb]

Thank you! I'm glad you found it easy to understand. Your feedback means a lot, cheers! :)

[@beforemiroafter1265]

Love your content; it's very helpful 🚀

[@Sebdelaweb]

Thank you so much! Your support means a lot to me! Cheers!

[@jenniferohamara]

Very helpful video, would really love to know how you customized the accordion like changing the icon and adding a background color. Is it possible to share? Thank you

[@Sebdelaweb]

Thank you for your kind words! To customize the accordion, you can change the icon by adding a tag with a Font Awesome class in the HTML and applying a CSS transform to rotate it when active. For the background color, you can use CSS to style the .accordion-header with your desired color and ensure the content section appears correctly. Hope it helps!

[@Dj-WannaBe]

@Sebdelaweb - can you please upadate the guide using the new version of ACF ? because they changed some things in the 6.2.5, and using the new get_field is a bit more complicated than before.

[@boxbiru]

up!!

[@Sebdelaweb]

We'll update it soon. Stay tuned! :)

[@boxbiru]

@@Sebdelaweb niceeeee

[@sachithmw]

What is the way of adding image using ACF? can we you shortcode?

[@Sebdelaweb]

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!

[@minhthienn4081]

Thank bro!

[@lorenzorotasperti]

Since some fields are repetitive, as you taught us in previous tutorials, isn't there a way to show the UX Blocks only on certain products or categories? Shipping information is often common to multiple products but not all. Is there a way to achieve this?

[@Sebdelaweb]

Thanks for your question! Yes, you can absolutely control where UX Blocks show up by setting conditions to display them only on certain products or categories. In the Flatsome theme, when you're editing a UX Block, you'll see the "Block Visibility" settings. This lets you choose specific conditions, like showing the block only for products in particular categories or targeting individual products. So, for example, you can have the shipping information appear only where it's needed, without adding it manually to each product. I hope this helps!

[@lorenzorotasperti]

@@Sebdelaweb hi seb! Thanks for the reply! I searched for what you say but the block visibility setting is nowhere... The only block visibility setting is for mobile / desktop view. Where did you find those settings exactly? you would be of great help to me. Thanks

[@nuramirza9934]

How safe is this plugin to use?

[@Sebdelaweb]

ACF is considered a safe and powerful tool for WordPress developers when used correctly and maintained properly. Cheers!

[@AmitSoni-ws8bb]

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

[@Sebdelaweb]

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!

[@Famous_Flavours]

@@Sebdelaweb I also have all the latest versions and it'd not working on flatsome

[@Sebdelaweb]

@@Famous_Flavours Hey! Thanks for reaching out. If you’re running into issues with ACF (Advanced Custom Fields) on Flatsome, you’re not alone. The upcoming Flatsome 4, with its new Supablox builder (built on WordPress’s block system like Gutenberg), promises more flexibility and better compatibility with tools like ACF. For now, in the current version, try ensuring all ACF fields are correctly assigned to the right templates or pages, as they can sometimes conflict with the UX Builder. With Flatsome 4, these challenges should hopefully be resolved!

[@benamine2757]

Thank you for the video, would be nice if there is a way to include download link for a ACF field type file in product page, so we don't have to add plugins for this. Is it possible ?

[@Sebdelaweb]

Thank you for your feedback! Yes, it's possible to include a download link for an ACF field type file directly on the product page without additional plugins. You can create a custom field in ACF for the file upload and then modify your product page template to display the download link using PHP code. For example, you can use

[@adaskosb]

To display 4 images what kind of ach type will you recommned

[@Sebdelaweb]

Depending on your needs, you can use either a two-by-two grid or a carousel/slider. Hope this helps!

[@Cozyfurn]

thank you this video, that so helpful

[@Sebdelaweb]

Thank you for the feedback! I'm glad you found the video helpful. Keep an eye out for more videos! :)

I have a question. What if I want to show normal Woo attribute inside an accordion like that? I have books and author attribute, it has to be attribute since i also need filtering by author, so I can't use ACF.

[@Sebdelaweb]

You can display WooCommerce attributes like the author in an accordion by using your theme’s builder (e.g., Flatsome’s UX Builder). Just add an accordion element to the product page and insert the Woo attribute with a shortcode, like this: [product_attribute attribute='pa_author']. Replace pa_author with your actual attribute slug. This keeps filtering working while keeping things tidy in an accordion. Hope this helps!

[@bharat-1k]

Can I add coupons using the Custom Product Fields in the product pages?

[@Sebdelaweb]

Adding coupons directly through Custom Product Fields in product pages is not a standard feature of WooCommerce or the Flatsome theme. However, you can display coupon information on product pages using custom fields and guide customers on how to use these coupons at checkout. I hope this helps! :)

[@HaifengZhu-pn3uq]

is there any free plugin that can change the defaul dropdown select style of WooCommerce variable products into checkboxes?

[@Sebdelaweb]

Great question! While WooCommerce doesn't offer a built-in option to change the dropdown for variable products to checkboxes, there are some plugins that can help. One free option to consider is Variation Swatches for WooCommerce. It allows you to change the dropdown style to checkboxes or swatches, depending on your needs. 🌟 Hope this helps! 🌟

[@sinhphong9490]

how can I add 2 buttons in the Product Page, that using URL from ACF? for ex: 1 link to amazone, 1 link to walmart, and the link will change for each Products I have. Can you plz make a tutorial ?

[@Sebdelaweb]

You can create a custom field in ACF and modify the product page template to display a button. We'll do this in the future. Stay tuned!

[@Famous_Flavours]

there's an update now you need to get ACF direct from the author as their plugin got illegally stolen and changed to secure custom fields

[@Sebdelaweb]

Thanks for the heads-up! Yes, it’s true-ACF has had issues with unauthorized versions being circulated as "Secure Custom Fields." For the latest, safest version, it’s best to download ACF directly from the official site or from WordPress.org. This ensures you avoid any tampered code and keeps your site fully compatible.

[@boxbiru]

thx mate :)

[@boxbiru]

update= not working to me

[@aphiseththanyawutthonsiri5165]

Good vidio,Seb!

[@Sebdelaweb]

Thanks amigo!