WooCommerce: שינוי תצוגת המוצרים שמוצגים ב UpSell / Related

כברירת מחדל של תוסף WooCommerce תצוגת המוצרים באזור ה Related או ה UpSell מופיעים ב 2 עמודות מתחת לכל מוצר. במקרים רבים אנחנו נרצה להציג את המוצרים באזורים אלו במספר עמודות שונה. לצורך כך צריך לעשות מספר צעדים שיאפשרו לכם לעשות את זה בצורה טובה.

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

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

1. השתמשו בתבנית בת אותה קיבלתם עם ערכת העיצוב שלכם (מה זה תבנית בת?)
2. יש לפתוח את הקובץ functions.php של תבנית הבת ולהוסיף את הקוד הבא:

/**
 *
 * Change number of related products on product page
 * Set your own value for 'posts_per_page'
 *
 */// Redefine wooCommerce related products
function woocommerce_output_related_products() {
	woocommerce_related_products(
		array(
			'posts_per_page' => 4,
			'columns'        => 4,
		)
	);
}

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_upsells', 15 );

if ( ! function_exists( 'woocommerce_output_upsells' ) ) {
	function woocommerce_output_upsells() {
		woocommerce_upsell_display( 4, 4 ); // Display 4 products in 1 row
	}
}
/** Change number of upsells in single product
 *  Set the first number to how many total and the second number to how many rows.
 */
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_upsells', 15 );

if ( ! function_exists( 'woocommerce_output_upsells' ) ) {
	function woocommerce_output_upsells() {
		woocommerce_upsell_display( 4,1 ); // Display 4 products in 1 row
	}
}

3. לאחר מכן, יש להתאים את ה CSS לרוחב של 100% כל אזור, כדי שהמוצרים יוצגו בצורה טובה, בשביל זה צריך להוסיף את הקוד CSS הבא ל > התאמה אישית > Live CSS. או פשוט לתוך הקובץ CSS של התבנית בת שנמצאת בתיקיה הזו: Child-Theme/asstes/css/style.css

@media (min-width:768px) {
.woocommerce .related.products, .woocommerce-page .related.products, .woocommerce .upsells.products, .woocommerce-page .upsells.products {
    width: 100%;
}
.woocommerce .related ul li.product, .woocommerce .related ul.products li.product, .woocommerce .upsells.products ul li.product, .woocommerce .upsells.products ul.products li.product, .woocommerce-page .related ul li.product, .woocommerce-page .related ul.products li.product, .woocommerce-page .upsells.products ul li.product, .woocommerce-page .upsells.products ul.products li.product {
    width: 25%;
}
}

עכשיו תחזרו לעמוד המוצר שלכם ותוכלו לראות שמוצגים 4 מוצרים בשורה.