Zmena textu a tlačítka na stránke obchodu

Ak ste sa niekedy zamýšľali, ako si upraviť tlačidlo „Pridať do košíka“ na stránke výpisu produktov (archív, kategória a tag produktu), tak vám ukážem dve možnosti, ako si to môžte sami jednoducho upraviť.
Samozrejme, nerozprávame sa tu o zmene štýlu, ale o texte, alebo úplne vlastnom tlačidle.

# Zmena textu tlačidla „Pridať do košíka“ (Add to cart)

Text sa dá upraviť v prekladoch pre WooCommerce, ale v takomto prípade, po update prekladov sa vám pôvodný text vráti späť. Existujú aj iné možnosti, ale zo všetkých, je táto tá správna.
Ukážeme si ako zmeniť text pre variabilný aj jednoduchý produkt.

/**
 * Zmena textu v tlačidle "Pridať do košíka"
 * 
 * @author PeterB aka Viking
 * @url https://wp-admin.sk/woocommerce/zmena-textu-a-tlacitka-na-stranke-obchodu/#zmena-textu-tlacidla-pridat-do-kosika
 *
 * @param $text | string
 * @param $product | WC_Product
 *
 * @return string
 */

function viking_change_add_to_cart_text( $text, $product ) {
  
  // jednoduchý produkt
  if( $product->is_type( 'simple' ) ) {
    $text = 'Môj text pridať do košíka'; // <- tu zmente text pre jednoduchý produkt
  }
  
  // variabilný produkt
  if( $product->is_type( 'variabile' ) ) {
    $text = 'Môj text pre variabilný produkt' // <- tu zmente text pre variabilný produkt
  }
  
  return $text;
}
add_filter( 'woocommerce_product_add_to_cart_text', 'viking_change_add_to_cart_text', 10, 2 );

Pre zmenu textu v tlačidle, sme použili filter woocommerce_product_add_to_cart_text. Tento filter nám rovno ponúka $text čo je pôvodný text a $product, čo je objekt produktu.
…a teraz ľudia, ktorí vedia, čo všetko sa dá spraviť s objektom $product, určite jasajú… ALE pozor v premennej $text, môžte vrátiť iba obyčajný text, takže žiadne html a ani iné „skrášlenia“.
Preto tu máme druhú možnosť.

Ak si chcete naozaj personalizovať tlačidlo „Pridať do košíka“, tu je ukážka, ako na to.

/**
 * Vytvorenie vlastného tlačidla pre "Pridať do košíka"
 *
 * @author PeterB aka Viking
 * @url https://wp-admin.sk/woocommerce/zmena-textu-a-tlacitka-na-stranke-obchodu/#vytvorenie-si-vlastneho-tlacidla-pridat-do-kosika
 *
 * @param $btn | string
 * @param $product | WC_Product
 * @param $args | array
 *
 * @return string
 */
function viking_create_add_to_cart_button( $button, $product, $args ) {
  
  if( $product->is_type( 'simple' ) ) {
    $btn_text = $product->get_price_html();
    $btn_text .= ' <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>';
    
    $button = sprintf( '<a href="%s" data-quantity="%s" class="%s" %s>%s</a>',
                   esc_url( $product->add_to_cart_url() ),
                   esc_attr( $args['quantity'] ?? 1 ),
                   esc_attr( $args['class'] ?? 'button' ),
                   isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '',
                   $btn_text
    );
  }
  
  return $button;
}
add_filter( 'woocommerce_loop_add_to_cart_link', 'viking_create_add_to_cart_button', 10, 3 );

V tomto kóde, sme použili filter woocommerce_loop_add_to_cart_link. Tento filter nám ponúka premenné $button, čo je už vygenerované pôvodné tlačidlo, $product, objekt produktu a $arg argumenty, ako množstvo, css class a html atribúty.
Na začiatku sme si skontrolovali, že je to jednoduchý produkt. Potom sme si pomocou priradenia, vyskladali text do tlačidla $btn_text. V tomto prípade sme si pomocou metódy get_price_html() triedy WC_Product, ktorá nám vráti cenu, už naformátovanú v html. K tejto cene sme pridali ikonu z Font awesome košík. Výsledné tlačidlo teda môže vyzerať napríklad takto:

Na vytvorenie tlačidla sme použili php funkciou: sprintf(), ktorá nám pomôže vytvoriť string s „pozíciami“, kde sa dosadia jednotlivé premenné z deklarácie.

Za zmienku ešte stojí, že vo funkcii sme použili Null Coalescing Operator.
Napríklad: esc_attr( $args['quantity'] ?? 1 ). Iba v skratke… je to skrátený zápis, pre:

if( $args['quantity'] ) {
  esc_attr( $args['quantity'] );
} else {
  1
}

Takto si viete zmeniť tlačidlo „Pridať do košíka“, presne, ako potrebujete.

Tento snippet, patrí do functions.php, vašej aktuálnej témy.