Hinzufügen eines benutzerdefinierten Symbols zu Produktpreisen

Question

Ich habe eine Zeile "Neueste Produkte" innerhalb der Homepage einer WooCommerce-fähigen WordPress-Website erstellt. Was ich jetzt erreichen möchte, ist ein Symbol auf jeder Seite der Preiseingabe einzufügen.

Ich bin mir bewusst, wie ich <i class="fa fa-circle fa-rotate-270" aria-hidden="true"></i> durch harte Codierung direkt in die Web-Datei hinzufügen kann, jedoch habe ich einen WooCommerce-Shortcode verwendet, um solche Produkte aufzurufen und bin mir daher nicht sicher, wie ich das jetzt erreichen kann. Die Short Ich verwende ist: [recent_products per_page="4" columns="4"]

Brauche ich einen Eintrag in die functions.php Datei zu machen?

Jede Hilfe in dieser Angelegenheit, würde sehr geschätzt werden.

Answer 1

Es gibt mehrere Möglichkeiten, es zu tun, und hier erhalten Sie 2 von ihnen ...

1) Die einfachere Methode (unter der Annahme, dass für einfache Produkte ist) ist eine benutzerdefinierte Funktion in woocommerce_price_html Filter angeschlossen verwenden Haken Sie Ihre Produkte Preise dieses Symbol angezeigt werden um:

add_filter('woocommerce_price_html', 'prepend_append_icon_to_price', 10, 2); 
function prepend_append_icon_to_price($price, $instance) { 
    // For home page only and simple products 
    if(is_front_page()){ 
     // Your icon 
     $icon = ' <i class="fa fa-circle fa-rotate-270" aria-hidden="true"></i> '; 
     // Prepending and appending your icon around the price. 
     $price = $icon . $price . $icon; 
    } 
    return $price; 
} 

der Kodex geht in function.php Datei Ihrer aktiven Kind Thema (oder Thema) oder auch in jedem Plugin-Datei.

Dieser Code wurde getestet und funktioniert.

---

2) Sie können auch eine benutzerdefinierte Funktion in wp_footer Aktion Haken gehakt verwenden, um mit jQuery Ihre Symbole rund um die Preise zu injizieren:

add_action('wp_footer', 'prepend_append_icon_to_price'); 
function prepend_append_icon_to_price() { 
    if(is_front_page()){ 
    ?> 
     <script> 
      (function($){ 
       var myIcon = ' <i class="fa fa-circle fa-rotate-270" aria-hidden="true"></i> '; 
       $('.home .woocommerce .price').prepend(myIcon).append(myIcon); 
      })(jQuery); 
     </script> 
    <?php 
    } 
} 

Der Kodex geht in function.php Datei Ihr aktives Kindthema (oder Theme) oder auch in einer beliebigen Plugin-Datei.

Dieser Code wurde getestet und funktioniert.