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

כפתור הוספה לסל בליסטינג של ג׳ט ובלופ של אלמנטור

תוכן הפוסט:

במאמר הזה מסביר חיים בניסטי על השיטה המומלצת להוסיף כפתור ״הוספה לסל״ בליסטינגים באתרי חנויות – בלי צורך להוסיף תוספים מיותרים בשביל זה.

אממה? הקוד שחיים מספק הוא בעייתי בכמה מישורים:

  1. צריך להוסיף הרבה קוד CSS בשביל להגיע לתוצאה ויזואלית רצויה ומסודרת.
  2. הכפתורים היחידיים שמקבלים קיסטום ברמה הקוד, הם הכפתורים של המוצרים הרגילים – ולא מוצרים עם וריאציות וכדו׳.

לכן החלטתי לטובת הכלל לשפץ את הסניפט הזה ולהביא משהו יעיל + שיפוץ של השורטקוד.

למדריך המלא איך להוסיף את השורטקוד: במאמר של חיים.

השורטקוד שצריך להכניס:

				
					[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 = '<div class="add_to_cart-button_shortcode schooliner yossi_david">';
	$html .= sprintf( '%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
					 $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 .= '</div>';
	return $html;
}

add_action( 'wp_footer' , 'archives_quantity_fields_script' );
function archives_quantity_fields_script(){
?>
<script type='text/javascript'>
	jQuery(function($){
		// Update data-quantity
		$(document.body).on('click input', 'input.qty', function() {
			$(this).parent().parent().find('a.ajax_add_to_cart').attr('data-quantity', $(this).val());
			$(".added_to_cart").remove(); // Optional: Removing other previous "view cart" buttons
		}).on('click', '.add_to_cart_button', function(){
			var button = $(this);
			setTimeout(function(){
				button.parent().find('.quantity > input.qty').val(1); // reset quantity to 1
			}, 1000); // After 1 second

		});
	});

</script>
<style>
	.add_to_cart-button_shortcode{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.add_to_cart-button_shortcode .quantity input{
		width: 100%;
	}

	.add_to_cart-button_shortcode .quantity{
		width: 25%
	}

	.add_to_cart-button_shortcode a{
		flex-grow: 1;
	}

	.add_to_cart-button_shortcode .added_to_cart{
		display: none;
	}
</style>
<?php
}
				
			

את הסניפט תוכלו להכניס דרך תוסף Code Snippets (מומלץ), או דרך תבנית בת בקובץ functions.php.

אז איזה שיפוצים נעשו כאן?

  1. הוספנו את הקלאס הגלובלי של אלמנטור לכפתורים elementor-button כדי לקבל באופן אוטומטי את העיצוב של הכפתור מהגדרות העיצוב.
  2. שינינו את השורטקוד שלא יציג את קו המתאר המוזר שמגיע כברירת מחדל, ע״י שימוש בפרמטר "style="all: unset", (בעצם איפסנו את כל העיצוב המוזר).
  3. הוצאנו את הכפתור מתגית ה p שמגיע כברירת מחדל ע״י הוספת div עוטף עם קלאסים – שיהיה קל לקסטם אם נרצה.
  4. צמצמנו את ה css הרצוי למינימום ההכרחי.
  5. הוספנו את כל הקוד לסניפט אחד שאפשר להכניס בתוסף code snippets, כדי שלא נצטרך לשים כל קטע במקום אחר. All In One!
<< למאמר הבא

למה חשוב שהאתר שלכם יהיה מהיר בשביל שתוכלו למכור יותר ולשפר את חווית הגלישה? | מאמר אורח

למאמר הקודם >>

פרמטרים של UTM – מה הם? למה הם חשובים ואיך להעביר אותם באמצעות טופס של אלמנטור?

מחפשים תוכן איכותי ומעניין בנושא דיגיטל ועסקים?

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

דברו איתנו ותתחילו להרויח!

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