הוספת שדות מיוחדים ACF למוצר Woocommerce

כדי להוסיף שדות מיוחדים למוצר, יש לפעול ב-2 שלבים:

  1. יש להקים את השדות המיוחדים ולהגדיר אותם
  2. יש לערוך את דף המוצר, לשלוף ולשבץ בו את השדות המיוחדים

כדי להוסיף שדות מיוחדים, יש להפעיל את התוסף "שדות מיוחדים פרו" ולבחור שדות מיוחדים > הוספת חדש

סוגי שדות נפוצים:

  • טקסט – שורת טקסט
  • קובץ – העלאת קובץ לספרית המדיה (יש לבחור "כתובת אינטרנט של הקובץ")
  • עורך ויזואלי – תוכן פתוח (טקסט ותמונות) בעורך ויזואלי

על מנת לשייך אותם למוצרים יש לבחור "סוג פוסט" > שווה ל > "מוצר".

מומלץ לשייך "מיקום" > "צד"

שיבוץ השדות במבנה העמוד

יש לערוך את דף המוצר woocommerce/content-single-product.php תחת עיצוב > עריכת תבנית.

לאחר הוספתם, יש להגדיר אותם מיד אחרי השורה (סביבות 20):

global $product;

כך:

// ACF Fields Loading
 $product01 = get_field( "product_who_is_it_for" );
 $product02 = get_field( "product_additional_details" );
 $product03 = get_field( "product_advantages" );
 $product04 = get_field( "product_advantages_video" );

את השדות אפשר לשבץ מיד אחרי המסגרת של תיאור המוצר, או מתחת למבנה הבסיסי של המוצר.

לשיבוץ מיד אחרי מסגרת תיאור המוצר, יש לשים את הקוד סביב שורה 160, לפני קטע הקוד הבא:

</div>

<?php echo mfn_share( 'header' ); ?>

לשיבוץ מתחת למבנה הבסיסי של המוצר (שיבוץ עמוד), יש לשים את הקוד החדש ממש לפני הקוד הזה (סביב שורה 170):

 <?php
 woocommerce_upsell_display();

כדי לפתוח פרלקסים לרוחב מלא של העמוד, יש לבצע התאמה מבחינת סגירת ה-divים בעמוד, כך יש להוסיף לפני תחילת הקוד של שיבוץ בעמוד, את הקוד הבא:

</div></div></div></div></div>

ולהוסיף את האיזון:

<div class="section_wrapper">

ממש לפני המוצרים הנלווים:

<?php
 woocommerce_upsell_display();

כדי לצמצם את המרווח בין האזור המובנה של ה-Woocommerce (מוצר) לבין ההרחבות שנוספו בקובץ, ניתן להשתמש בקוד ה-CSS הבא:

.single-product .woocommerce-content {
 margin-bottom:0px !important;
}

שימוש בקוד HTML ושליפת הפרמטרים

ניתן לשים קוד HTML כללי, בדרך כלל לא נכתוב מאפס אלא נדגום קוד HTML ממבנה קיים ב-BeTheme.

נוכל גם להתנות את הופעת הקוד בזה שיש תוכן באותם שדות מיוחדים.

כך לדוגמא – מבנה HTML (נלקח מדף מעוצב באמצעות ה-Muffin Builder):

<div class="section mcb-section mcb-section-7qk7zp4z5" style="padding-top:0px;padding-bottom:0px;background-color:#f5f5f5"><div class="section_wrapper mcb-section-inner"><div class="wrap mcb-wrap mcb-wrap-nt3nkgloq one valign-top clearfix" style=""><div class="mcb-wrap-inner"><div class="column mcb-column mcb-item-cjg7941x5 one column_divider"><hr class="no_line" style="margin: 0 auto 70px;">
</div><div class="column mcb-column mcb-item-t06cwi9eg one column_visual feature"><h2 style="text-align: center;">למי מתאים
<?php echo $product->get_title(); ?>
?</h2><p><?php echo $product01; ?></p>
</div></div></div></div></div>

שליפת הפרמטרים

כאשר את השדות שולפים באמצעות קוד PHP כך:

<?php echo $product01; ?>

ניתן לשלוף גם פרמטרים של המוצר, כך:

<?php echo $product->get_title(); ?>

חשוב לשים לב שעבור שדות מיוחדים, צריך לשלוף באופן מיוחד, כך –

שדה תמונה – שליפת הכתובת:

<?php echo esc_url($banner['url']); ?>

שדה של מערך – יש לשלוף באמצעות לולאה ולהציג מה שרוצים באמצעות פונקציית Switch, כך:

<?php 
 foreach ($productci as $cert) {
 // echo $cert ."<br />"; testing purposes
 switch ($cert) {
 case "first":
 echo 'First yep';
 break;
 case "second":
 echo 'Second yep';
 break;
 case "third":
 echo 'Third yep';
 break;
 case "fourth":
 echo 'Fourth yep';
 break;
 }
 }
 ?>

שדה קבוצה – שליפה של תת-שדות:

כאשר מדובר על שדה קבוצה, צריך לשלוף כל אחד מתת-השדות למשתנה משלו בראש העמוד, כך לדוגמא:

 $product09 = get_field( "product_recommendations" );
 $rec01 = $product09['product_recommendation_main'];
 $rec02 = $product09['product_video_rec'];
 $rec03 = $product09['product_recommendation_1'];
 $rec04 = $product09['product_rec_pic_1'];
 $rec05 = $product09['product_client_rec_1'];
 $rec06 = $product09['product_recommendation_2'];
 $rec07 = $product09['product_rec_pic_2'];
 $rec08 = $product09['product_client_rec_2'];

שדה חזרה – שדה עם כמות פריטים משתנה – יש להגדיר את הפרמטר בצורה דומה לשאר השדות, אך השליפה מתבצעת אחרת, באמצעות לולאה, כך:

 <?php 
 foreach ($product11 as $qai) {
 echo '<p><strong>' . $qai["product_question"] ."</strong></p><p>" . $qai["product_answer"] . "</p>";
 }
 //var_dump($product11); testing purposes
 ?>

דוגמאות שימושיות

קובץ מצורף למוצר (דוגמת PDF):

 if ($product02) echo '<br /><p><a href="' . $product02 . '" class="downloads" target="_blank">להורדת מידע על המוצר בקובץ PDF - לחצו כאן</a></p>';

סרטון מצורף למוצר (קוד לסרטון YouTube):

 if ($product01) echo '<div class="section mcb-section mcb-section-096085977 ffwm" style="padding-top:0px;padding-bottom:0px;background-color:"><div class="section_wrapper mcb-section-inner"><div class="wrap mcb-wrap mcb-wrap-b1fd12508 one valign-top clearfix" style=""><div class="mcb-wrap-inner"><div class="column mcb-column mcb-item-1628908ad one column_divider"><hr class="no_line" style="margin: 0 auto 20px;">
</div></div></div><div class="wrap mcb-wrap mcb-wrap-767599722 one valign-top clearfix" style=""><div class="mcb-wrap-inner"><div class="column mcb-column mcb-item-2feefcc36 one column_video"><div class="content_video iframe auto-wh"><iframe class="scale-with-grid" width="" height="" src="https://www.youtube.com/embed/' . $product01 . '?wmode=opaque&amp;rel=0" allowfullscreen=""></iframe>
</div>
</div></div></div><div class="wrap mcb-wrap mcb-wrap-1f16eb6c4 one valign-top clearfix" style=""><div class="mcb-wrap-inner"><div class="column mcb-column mcb-item-64bce83e5 one column_divider"><hr class="no_line" style="margin: 0 auto 30px;">
</div></div></div></div></div>';

טופס יצירת קשר למוצר (יש להוסיף את הקוד ולשבץ את הטופס באמצעות PHP ע"י do_shortcode ולא ישירות):

<div class="section mcb-section mcb-section-43085f2a8 no-margin-v makewhite centermobile " style="padding-top:0px;padding-bottom:0px;background-color:;background-image:url(https://www.el-raz.co.il/wp-content/uploads/2021/01/sub-2.jpg);background-repeat:no-repeat;background-position:center top;background-attachment:;background-size:;-webkit-background-size:"><div class="section_wrapper mcb-section-inner"><div class="wrap mcb-wrap mcb-wrap-5edb6f6a1 one valign-top clearfix" style=""><div class="mcb-wrap-inner"><div class="column mcb-column mcb-item-228679aa7 one column_divider"><hr class="no_line" style="margin: 0 auto 40px;">
</div></div></div><div class="wrap mcb-wrap mcb-wrap-8526dde45 one valign-top clearfix" style=""><div class="mcb-wrap-inner"><div class="column mcb-column mcb-item-5fc6be342 one column_visual bigtxt140 halfbottom"><p style="text-align: center;"><b>לפרטים נוספים וייעוץ על ידי מומחה </b>- מוזמנים להשאיר פרטים ונציג שלנו יחזור אליכם בהקדם</p></div><div class="column mcb-column mcb-item-ae6f99e14 one column_column"><div class="column_attr clearfix" style="">
 <?php echo do_shortcode( '[contact-form-7 404 "Not Found"]' ); ?>
</div></div></div></div><div class="wrap mcb-wrap mcb-wrap-3e1a87545 one valign-top clearfix" style=""><div class="mcb-wrap-inner"><div class="column mcb-column mcb-item-9b5cc7714 one column_divider"><hr class="no_line" style="margin: 0 auto 40px;">
</div></div></div></div></div>

קוד מותנה

הנה דוגמא לשיבוץ מבנה ה-HTML בתוך if, כך שהוא מוצג אך ורק אם השדה מולא:

 <!-- Who is it for? -->
 
 <?php if ($product01) echo '<div class="section mcb-section mcb-section-7qk7zp4z5 trilist textcenter" style="padding-top:0px;padding-bottom:0px;background-color:#f5f5f5"><div class="section_wrapper mcb-section-inner"><div class="wrap mcb-wrap mcb-wrap-nt3nkgloq one valign-top clearfix" style=""><div class="mcb-wrap-inner"><div class="column mcb-column mcb-item-cjg7941x5 one column_divider"><hr class="no_line" style="margin: 0 auto 70px;">
</div><div class="column mcb-column mcb-item-t06cwi9eg one column_visual feature"><h2 style="text-align: center;">למי מתאים
' . $product->get_title() . '?</h2><p>' . $product01 . '</p>
</div></div></div></div></div>';
 ?>

דוגמא נוספת לקוד מותנה, כאשר מספיק שאחד מ-2 שדות מולאו (קוד מותנה 2 שדות):

<?php if (($product05) || ($product06)) echo 'another example HTML code goes here and - ' . $product06; ?>

מודול שאלות ותשובות

בדרך כלל המודול של השאלות-תשובות, ממומש באמצעות שדה חזרה עם קבוצה של 2 שדות משנה (שדה שאלה + שדה תשובה).

יש לוודא את המבנה עם var_dump, ואז ניתן להשתמש בקוד המותנה הבא (מותנה בזה שיש שאלות ותשובות) שכולל גם מבנה אקורדיון:

<?php if ($product11[0]) {
 echo '<h2>שאלות ותשובות</h2><div class="section mcb-section" style="padding-top:0px;padding-bottom:0px;"><div class="section_wrapper mcb-section-inner"><div class="wrap mcb-wrap mcb-wrap-f085a6a7f one valign-top clearfix" style=""><div class="mcb-wrap-inner"><div class="column mcb-column mcb-item-87bfb6db9 one column_divider"><hr class="no_line" style="margin: 0 auto 10px;">
</div></div></div><div class="wrap mcb-wrap mcb-wrap-1fe99d458 one valign-top clearfix" style=""><div class="mcb-wrap-inner"><div class="column mcb-column mcb-item-ip8mas2gm one column_accordion"><div class="accordion"><div class="mfn-acc accordion_wrapper ">';
 
 foreach ($product11 as $qai) {
 echo '<div class="question"><div class="title"><i class="icon-plus acc-icon-plus"></i><i class="icon-minus acc-icon-minus"></i>' . $qai["product_question"] .'</div><div class="answer" style="display: none;">' . $qai["product_answer"] . '</div></div>';
 }
 
 echo '</div></div></div></div></div><div class="wrap mcb-wrap mcb-wrap-zwoh50lvj one valign-top clearfix" style=""><div class="mcb-wrap-inner"><div class="column mcb-column mcb-item-b7tm60h3z one column_divider"><hr class="no_line" style="margin: 0 auto 20px;">
</div></div></div></div></div>';
} ?>

ולסגנן את האקורדיון באמצעות הקוד הבא:

.accordion .question .title {
 font-weight:500;
 font-size:22px;
 padding-top:16px;
 padding-bottom:16px;
}

מודול רשימת קישורים

המודול המותנה הזה כולל גם אייקונים מותאמים אישית, וגם בדיקה האם הוגדר קישור (ואם לא, אז ציון הטקסט ללא קישור). כל הקישורים הוגדרו להיפתח בחלון חדש.

<?php if ($product12[0]) {
 echo '<div class="section mcb-section feature" style="padding-top:0px;padding-bottom:0px;"><div class="section_wrapper mcb-section-inner">
 <div class="wrap spacelist mcb-wrap mcb-wrap-uxjsmrfni one valign-top clearfix" style=""><div class="mcb-wrap-inner"><div class="column mcb-column mcb-item-dmk0c4pvb one column_divider"><hr class="no_line" style="margin: 0 auto 20px;"><h2>מחקרים</h2>
</div></div><div class="cicon1 column mcb-column mcb-item-kga9aqytm"><ul>';
 
 foreach ($product12 as $art) {
 echo '<li style="font-weight: 400;"><span style="font-weight: 400;">';
 if ($art["product_study_link"]) {
 echo '<a href="' . $art["product_study_link"] . '" target="_blank">' . $art["product_study_title"] .'</a></span></li>';
 } else {
 echo $art["product_study_title"] . '</span></li>';
 }
 }
 echo '</ul></div></div></div></div>';
} ?>

רפרנסים
https://www.codewall.co.uk/5-ways-to-loop-through-array-php/
https://www.php.net/manual/en/control-structures.switch.php
https://support.advancedcustomfields.com/forums/topic/how-to-get-field-data-from-a-group-inside-a-group/

 

 

x
סייען נגישות
הגדלת גופן
הקטנת גופן
גופן קריא
גווני אפור
גווני מונוכרום
איפוס צבעים
הקטנת תצוגה
הגדלת תצוגה
איפוס תצוגה

אתר מונגש

אנו רואים חשיבות עליונה בהנגשת אתר האינטרנט שלנו לאנשים עם מוגבלויות, וכך לאפשר לכלל האוכלוסיה להשתמש באתרנו בקלות ובנוחות. באתר זה בוצעו מגוון פעולות להנגשת האתר, הכוללות בין השאר התקנת רכיב נגישות ייעודי.

סייגי נגישות

למרות מאמצנו להנגיש את כלל הדפים באתר באופן מלא, יתכן ויתגלו חלקים באתר שאינם נגישים. במידה ואינם מסוגלים לגלוש באתר באופן אופטימלי, אנה צרו איתנו קשר

רכיב נגישות

באתר זה הותקן רכיב נגישות מתקדם, מבית all internet - בניית אתרים. רכיב זה מסייע בהנגשת האתר עבור אנשים בעלי מוגבלויות.