Тёмный

Custom Product Fields in WooCommerce Product Page - Flatsome Theme Tutorial 

Seb de la Web
Подписаться 7 тыс.
Просмотров 8 тыс.
50% 1

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

Хобби

Опубликовано:

 

5 сен 2023

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 40   
@citizen6610
@citizen6610 3 месяца назад
Thanks bro! I really like that you don't cut out the mistakes :)
@Sebdelaweb
@Sebdelaweb 4 дня назад
Thanks, bro! Authenticity matters, and I agree that mistakes are a natural part of the learning process. I appreciate your feedback! 🙂
@petertely
@petertely 10 месяцев назад
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
@RMS10071 10 месяцев назад
This is exactly the problem I’m facing now. How can I do this?
@petertely
@petertely 10 месяцев назад
@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
@Sebdelaweb 10 месяцев назад
Awesome! Thanks for sharing :)
@hajjimubarak
@hajjimubarak 6 месяцев назад
Thanks... I didn't think I needed this tutorial but it was helpful
@Sebdelaweb
@Sebdelaweb День назад
You're welcome. Thanks for watching! :)
@DANGQUOCNGUYEN
@DANGQUOCNGUYEN 9 месяцев назад
Perfect! It's easy to understand. THank you
@Sebdelaweb
@Sebdelaweb День назад
Thank you! I'm glad you found it easy to understand. Your feedback means a lot, cheers! :)
@wuxu--
@wuxu-- 5 месяцев назад
Thank you for sharing your knowledge!
@Sebdelaweb
@Sebdelaweb День назад
You're welcome. Cheers!
@boxbiru
@boxbiru 2 месяца назад
thx mate :)
@boxbiru
@boxbiru Месяц назад
update= not working to me
@beforemiroafter1265
@beforemiroafter1265 7 месяцев назад
Love your content; it's very helpful 🚀
@Sebdelaweb
@Sebdelaweb День назад
Thank you so much! Your support means a lot to me! Cheers!
@Cozyfurn
@Cozyfurn 2 месяца назад
thank you this video, that so helpful
@Sebdelaweb
@Sebdelaweb 3 дня назад
Thank you for the feedback! I'm glad you found the video helpful. Keep an eye out for more videos! :)
@aphiseththanyawutthonsiri5165
@aphiseththanyawutthonsiri5165 10 месяцев назад
Good vidio,Seb!
@Sebdelaweb
@Sebdelaweb 10 месяцев назад
Thanks amigo!
@jenniferohamara
@jenniferohamara 3 месяца назад
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
@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!
8 месяцев назад
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.
@HaifengZhu-pn3uq
@HaifengZhu-pn3uq 9 месяцев назад
is there any free plugin that can change the defaul dropdown select style of WooCommerce variable products into checkboxes?
@sachithmw
@sachithmw 27 дней назад
What is the way of adding image using ACF? can we you shortcode?
@Sebdelaweb
@Sebdelaweb 4 дня назад
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!
@adaskosb
@adaskosb 2 месяца назад
To display 4 images what kind of ach type will you recommned
@Sebdelaweb
@Sebdelaweb 3 дня назад
Depending on your needs, you can use either a two-by-two grid or a carousel/slider. Hope this helps!
@Dj-WannaBe
@Dj-WannaBe 4 месяца назад
@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
@boxbiru Месяц назад
up!!
@Sebdelaweb
@Sebdelaweb День назад
We'll update it soon. Stay tuned! :)
@boxbiru
@boxbiru День назад
@@Sebdelaweb niceeeee
@benamine2757
@benamine2757 9 месяцев назад
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
@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
@bharat-1k
@bharat-1k Месяц назад
Can I add coupons using the Custom Product Fields in the product pages?
@Sebdelaweb
@Sebdelaweb 4 дня назад
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! :)
@sinhphong9490
@sinhphong9490 7 месяцев назад
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
@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!
@nuramirza9934
@nuramirza9934 3 месяца назад
How safe is this plugin to use?
@Sebdelaweb
@Sebdelaweb День назад
ACF is considered a safe and powerful tool for WordPress developers when used correctly and maintained properly. Cheers!
Далее
Maybe a little TOO much gel 😂
00:12
Просмотров 9 млн
Custom WooCommerce Product Page for Flatsome Theme
29:35
Заварушка на пляже!
1:00
Просмотров 1,6 млн
CAA Conversion kit at ZAHAL 🎯
0:14
Просмотров 64 млн