Großer Auftritt - kleiner Preis?Mehr erfahren

WordPress und Woocommerce Snippets für Deine Seite (Teil 2)

Zoom von Produktseiten entfernen

Der Zoom kann auf manchen Seiten hinderlich sein. Mit diesem Script entfernst Du ihn.

function remove_image_zoom_support() {
    remove_theme_support( 'wc-product-gallery-zoom' );
}
add_action( 'wp', 'remove_image_zoom_support', 100 );

Einfache, schnelle Übersetzung

Einige Plugins sind Toll, sind aber nur in englisch. Du kannst natürlich ein Übersetzungs Plugin installieren und die 5 Worte übersetzen, oder Du nimmst dieses Script:

add_filter('gettext', 'translate_text');
add_filter('ngettext', 'translate_text');
 
function translate_text($translated) {
$translated = str_ireplace('Apply a promo code', 'Du hast einen Gutschein?', $translated);
return $translated;
}

Kategorie anzeigen auf Produktübersicht

Mit diesem Snippet kannst Du auf der Produktübersicht bei jedem Produkt einen klickbaren Link anzeigen lassen. Superpraktisch für große Shops!

//Remove title hook and add in a new one with the product categories added
remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );
add_action( 'woocommerce_shop_loop_item_title', 'VS_woo_loop_product_title', 10 );

function VS_woo_loop_product_title() {
   
    $terms = get_the_terms( $post->ID, 'product_cat' );
    if ( $terms && ! is_wp_error( $terms ) ) :
    // only displayed if the product has at least one category
        $cat_links = array();
    foreach ( $terms as $term ) {
        $cat_links[] = '<a href="'.esc_url( home_url() ).'/produkt-kategorie/'.$term->slug.'">'.$term->name.'</a>';
    }
    $on_cat = join( ", ", $cat_links );
    ?>
    <div class="label-group">
        <div class="categories-link"><?php echo $on_cat; ?></div>
    </div>
 <?php 
 endif;
	
	echo '<h2 class="woocommerce-loop-product__title"><a href="' . get_permalink($post->ID) . '">' . get_the_title() . '</a></h2>';
}

Angebot in Prozent anzeigen

Zeige die prozentuale Ersparnis bei Deinen Angeboten.

add_filter( 'woocommerce_sale_flash', 'add_percentage_to_sale_badge', 20, 3 );
function add_percentage_to_sale_badge( $html, $post, $product ) {
    if( $product->is_type('variable')){
        $percentages = array();

        // Get all variation prices
        $prices = $product->get_variation_prices();

        // Loop through variation prices
        foreach( $prices['price'] as $key => $price ){
            // Only on sale variations
            if( $prices['regular_price'][$key] !== $price ){
                // Calculate and set in the array the percentage for each variation on sale
                $percentages[] = round(100 - ($prices['sale_price'][$key] / $prices['regular_price'][$key] * 100));
            }
        }
        // We keep the highest value
        $percentage = max($percentages) . '%';
    } else {
        $regular_price = (float) $product->get_regular_price();
        $sale_price    = (float) $product->get_sale_price();

        $percentage    = round(100 - ($sale_price / $regular_price * 100)) . '%';
    }
    return '<span class="onsale">' . esc_html__( 'Angebot', 'woocommerce' ) . ' -' . $percentage . '</span>';
}
WordPress und Woocommerce Snippets für Deine Seite (Teil 2) -Skripte -Boost my Shop

Füge einen Container rund um das Produkt

Produkte auf der Produktübersicht (archive) sind meist so gestaltet:

<li class="product">
   <a> </a>
</li>

Mit dem Script kannst Du nach dem öffnendem <li> ein <div> einfügen. Praktisch wenn man sehr viel Customization zu machen hat.

add_action ( "woocommerce_before_shop_loop_item", "after_li_started", 9 );

function after_li_started () {
    echo "<div class='DeineKlasse'>";
}

add_action ( "woocommerce_after_shop_loop_item", "before_li_started", 10 );

function before_li_started () {
    echo "</div>";
}

Produkt Attribute auf der Produktseite

In diesem Beispiel nehmen wir an wir hätten einen Webshop der Wein verkauft. Natürlich gibt es da viele Parameter nach denen der Wein beurteilt wird: Jahrgang, Rebsorte, Lage, Weingut,...

Mit diesem Script kannst Du Deine Attribute auf der Produktübersichtsseite im Produkt sichtbar machen..

add_action('woocommerce_shop_loop_item_title', 'wotom_show_attributes_title', 15);

function wotom_show_attributes_title()
{
 global $product, $post;

    $ab1 = $product->get_attribute ('pa_weingut');
    $ab2 = $product->get_attribute ('pa_rebsorte');
    $ab3 = $product->get_attribute ('pa_dac-lage');
    $ab4 = $product->get_attribute ('pa_jahrgang');
    
   


    echo "<div class='erste'><h1 class='shoppage_header1'>" . __($ab1,'woocommerce') . "</h1></div>";
    echo "<div class='zweite'><h1 class='shoppage_header2'>" . __($ab2,'woocommerce') . "</h1></div>";
    echo "<div class='dritte'><h2 class='shoppage_sub1'> " . __($ab3,'woocommerce') . "</h2></div>";
    echo "<div class='vierte'><h2 class='shoppage_sub2'> " . __($ab4,'woocommerce') . "</h2></div>";

    

}
WordPress und Woocommerce Snippets für Deine Seite (Teil 2) -Skripte -Boost my Shop

Fast Filter

Einfaches Script welches Inhalte nach bestimmten Kriterien Filtert oder eine Volltextsuche anbietet.

<div class="checkboxes">


<input id="#versichern" data-search-term="versichern" type="checkbox">
<label class="inline-checkbox" for="#versichern">versichern</label>

<input id="#investieren" data-search-term="investieren" type="checkbox">
<label class="inline-checkbox" for="#investieren">investieren</label>

<input id="#finanzieren" data-search-term="finanzieren" type="checkbox">
<label class="inline-checkbox" for="#finanzieren">finanzieren</label>

<input id="post-filter" type="text" placeholder="Suche nach PLZ, Ort oder Namen.">
	
</div>
jQuery("#post-filter").keyup(function() {

      // Retrieve the input field text and reset the count to zero
      var filter = jQuery(this).val(),
        count = 0;

      // Loop through the repeater divs
      jQuery('.berater-box').each(function() {


        // If the list item does not contain the text phrase fade it out
        if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {
          jQuery(this).hide('.berater-box');  // MY CHANGE

          // Show the list item if the phrase matches and increase the count by 1
        } else {
          jQuery(this).show(); 
          count++;
        }

      });

    });


jQuery.expr[":"].CIcontains = jQuery.expr.createPseudo( function (arg) {
	return function (elem) {
		return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
	};
});



jQuery('.fast-filter input[type="checkbox"]').change( function() {
	
	var thisID = jQuery(this).attr('id');
	
	jQuery('.fast-filter input[type="checkbox"]').each( function() {
		if( jQuery(this).attr('id') != thisID) {
			jQuery(this).prop('checked', false);
		}
	})
	
	if( jQuery(this).is(':checked') ) {
		var curr_text = jQuery(this).data('search-term');
		filterResults(curr_text);
	} else {
		filterResults('');
	}
	
	
})

function filterResults(curr_text) {
	jQuery('.card').hide();
	jQuery('.card:CIcontains("' + curr_text + '")').show();
}

Fast Filter Funktionsweise

>

SEOM Logo