Custom Product Fields in WooCommerce Product Page - Flatsome Theme Tutorial

Learn how to easily add custom fields in your WooCommerce Product Page. Using the plugin: Advanced Custom Fields and the #1 E-Commerce Theme Flatsome.
------------------------------------
🌀 Tutorial: www.sebdelaweb.com/woocommerc...
🔥 Website: www.sebdelaweb.com/
📷 Instagram: / sebdelaweb
Flatsome support:
👨‍💻 uxthemes.com/support/
📖 docs.uxthemes.com/
💬 / flatsome

[@citizen6610]

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

[@hajjimubarak]

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

[@DANGQUOCNGUYEN]

Perfect! It's easy to understand. THank you

[@wuxu--]

Thank you for sharing your knowledge!

[@beforemiroafter1265]

Love your content; it's very helpful 🚀

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

[@RMS10071]

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

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

[@Cozyfurn]

thank you this video, that so helpful

[@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 ?

[@sachithmw]

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

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.

[@adaskosb]

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

[@HaifengZhu-pn3uq]

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

[@bharat-1k]

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

[@aphiseththanyawutthonsiri5165]

Good vidio,Seb!

[@Sebdelaweb]

Thanks amigo!

[@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 ?

[@boxbiru]

thx mate :)

[@boxbiru]

update= not working to me

[@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!!

[@nuramirza9934]

How safe is this plugin to use?