במאמר הזה מסביר חיים בניסטי על השיטה המומלצת להוסיף כפתור ״הוספה לסל״ בליסטינגים באתרי חנויות – בלי צורך להוסיף תוספים מיותרים בשביל זה.
אממה? הקוד שחיים מספק הוא בעייתי בכמה מישורים:
- צריך להוסיף הרבה קוד CSS בשביל להגיע לתוצאה ויזואלית רצויה ומסודרת.
- הכפתורים היחידיים שמקבלים קיסטום ברמה הקוד, הם הכפתורים של המוצרים הרגילים – ולא מוצרים עם וריאציות וכדו׳.
לכן החלטתי לטובת הכלל לשפץ את הסניפט הזה ולהביא משהו יעיל + שיפוץ של השורטקוד.
למדריך המלא איך להוסיף את השורטקוד: במאמר של חיים.
השורטקוד שצריך להכניס:
[add_to_cart id="99" show_price="false" style="all: unset"]
המספר 99 הוא מספר פיקטיבי לצורך ההדגמה, כשבפועל הוא אמור להיות ״דינמי״ באמצעות התגיות הדינמיות של אלמנטור > ה ID של הפוסט.
הסניפט שצריך להכניס:
add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_loop_ajax_add_to_cart', 10, 2 );
function quantity_inputs_for_loop_ajax_add_to_cart( $html, $product ) {
// Simple product - set class to default classes
$class = implode( ' ', array_filter( array(
'product_type_' . $product->get_type(),
$product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
$product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
'elementor-button',
) ) );
$html = '';
$html .= sprintf( '%s%s',
$product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ? woocommerce_quantity_input( array(), $product, false ) : '',
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->get_id() ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : 'button' ),
esc_html( $product->add_to_cart_text() )
);
$html .= '';
return $html;
}
add_action( 'wp_footer' , 'archives_quantity_fields_script' );
function archives_quantity_fields_script(){
?>
את הסניפט תוכלו להכניס דרך תוסף Code Snippets (מומלץ), או דרך תבנית בת בקובץ functions.php.
אז איזה שיפוצים נעשו כאן?
- הוספנו את הקלאס הגלובלי של אלמנטור לכפתורים elementor-button כדי לקבל באופן אוטומטי את העיצוב של הכפתור מהגדרות העיצוב.
- שינינו את השורטקוד שלא יציג את קו המתאר המוזר שמגיע כברירת מחדל, ע״י שימוש בפרמטר "style="all: unset", (בעצם איפסנו את כל העיצוב המוזר).
- הוצאנו את הכפתור מתגית ה p שמגיע כברירת מחדל ע״י הוספת div עוטף עם קלאסים – שיהיה קל לקסטם אם נרצה.
- צמצמנו את ה css הרצוי למינימום ההכרחי.
- הוספנו את כל הקוד לסניפט אחד שאפשר להכניס בתוסף code snippets, כדי שלא נצטרך לשים כל קטע במקום אחר. All In One!