U administraciji web shopa baziranog na WooCommerceu postoji nekoliko opcija kako na stranici pojedinačnog proizvoda možete potencijalnim kupcima sugerirati kupnju dodatnih proizvoda.

Za tu svrhu postoje slijedeće opcije: “Bolji proizvodi” (Upsells), “Slični proizvodi” (Cross-sells) i “Povezani proizvodi” (Related products). Ovi pojmovi zvuče vrlo slično, zar ne? Zato ću sad definirati što spomenute opcije znače, kako se postavljaju te gdje i kako se prikazuju u front-endu. Za ilustraciju, koristit ćemo jednu od defaultnih WordPress tema, TwentyFifteen te WooCommerce plugin, u trenutku pisanja članka, aktualnu verziju 2.4.6.

Postavljanje i prikaz opcija “Bolji proizvodi”, Slični proizvodi” i “Povezani proizvodi”

U administraciji, u opcijama novih proizvoda vidite karticu “Povezani proizvodi”. Proizvodi mogu biti povezani na tri načina koje ćemo sada objasniti.

“Bolji proizvodi” (Upsells)

Bolji proizvodi su proizvodi koje preporučujemo umjesto proizvoda kojeg trenutno pregledavamo. Na primjer, proizvod koji je isplativiji i/ili bolje kvalitete. Ovisno o temi koju koristite, ovakvi proizvodi će se prikazivati na stranici pojedinačnog proizvoda ispod opisa.

“Povezani proizvodi” (Related products)

Povezani proizvodi se automatski generiraju , ovisno da li spadaju u istu kategoriju ili  koriste iste oznake (tagove). Povezane proizvode ne možete određivati u administraciji ali možete utjecati na kvalitetu rezultata pomoću grupiranja proizvoda iz iste kategorije ili pomoću mudrog korištenja oznaka. Ovisno o vašoj temi, povezani proizvodi će se prikazivati na stranici pojedinačnog proizvoda ispod opisa i “Boljih proizvoda” (ukoliko su isti definirani).

“Slični proizvodi” (Cross-sells)

Slični proizvodi služe promociji proizvoda pred sam kraj procesa kupnje. Slični proizvodi se prikazuju isključivo na stranici košarice. Ovisno o temi, prikazuju se ispod tablice s podacima o proizvodu.

Da rezimiramo, “Bolji proizvodi” (Upsells) i “Slični proizvodi” (Cross-sells) prikazivati će se isključivo ukoliko ih definiramo u adminu. Za razliku od njih “Povezani proizvodi” (Related products) će se prikazivati automatski u velikom broju tema.

Kako premjestiti “Povezane proizvode” u kartice (tabove) uz opis i recenzije ?

1. Prvo ćemo ukloniti Povezane proizvode s njihovog defaultnog mjesta.

 remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20);

2. Zatim ćemo kreirati novu karticu. Ukoliko želite promijeniti naslov kartice, promijenite tekst pod ‘title’. Pomoću prioriteta 40 odredili smo da će naša nova kartica po redu biti posljednja. Po potrebi promijenite.

add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );

function woo_new_product_tab( $tabs ) {

$tabs['related_products'] = array(
    'title'     => __( 'Povezani proizvodi', 'woocommerce' ),
    'priority'  => 40,
    'callback'  => 'woo_new_product_tab_content'
);
    return $tabs;
}

3. Zatim ćemo u novu karticu ubaciti Povezane proizvode.

function woo_new_product_tab_content() {
   woocommerce_related_products(4,4);
}

U ovom smo se slučaju poigrali s brojem proizvoda i njihovim prikazom. Naime, vrijednostima u zagradama smo odredili smo da će se prikazivati 4 proizvoda u 4 kolone.

Ako kao vrijednost upišemo woocommerce_related_products(6,3); prikazati će se 6 proizvoda u 3 kolone. No, ne bih vam sugerirao da pretjerujete s brojem povezanih proizvoda. Osobno, najelegantnije je prikazati jedan red proizvoda, neovisno o broju kolona.

NAPOMENA: navedeni kod se dodaje u functions.php datoteku vaše aktivne teme (po mogućnosti child temu).

Kako u potpunosti ukloniti prikaz “Povezanih proizvoda”?

U functions.php datoteku vaše teme (po mogućnosti u child temu) možete dodati slijedeći kod:

function wc_remove_related_products( $args ) {
	return array();
}
add_filter('woocommerce_related_products_args','wc_remove_related_products', 10);

Kako brisati, preimenovati, premještati i prilagoditi WooCommerce kartice pročitajte na službenoj WooCommerce stranici Editing product data tabs.