A Divi téma, a WooCommerce mellett, népszerű kombináció a látványosan lenyűgöző és nagy konverziós e-kereskedelmi webhelyek létrehozásához. Webhelye növekedésével azonban egyre nagyobb kihívást jelenthet látogatói számára, hogy megtalálják a keresett tartalmat vagy termékeket.

A Divi keresőmodulja nagyszerű eszköz, amely segíti a felhasználókat a webhelyen való navigálásban, de alapértelmezés szerint csak a bejegyzések és oldalak között keres. Emiatt nehéz lehet bizonyos WooCommerce termékek megtalálása a Divi téma alapértelmezett keresési moduljával , ezért ez az egyéni Divi kódrészlet rendkívül hasznos és szinte szükséges, ha WooCommerce + Divi e-kereskedelmi webhelyet üzemeltet!

Néhány lépéssel lehetővé teheti, hogy a Divi keresőmodul ne csak a posztokon és oldalakon találhassa meg a keresett tartalmat, hanem a WooCommerce termékeket is – nevük, leírásuk vagy   címke nevük alapján ! Ez jelentős időt takaríthat meg látogatói számára, lehetővé téve számukra, hogy gyorsan megtalálják a keresett termékeket, és végső soron növeljék az eladásokat a WooCommerce üzletében.

Kezdjük el!

WooCommerce termékcímkék

Kezdjük azzal, hogy elmagyarázzuk, mik azok a termékcímkék, és miért érdemes engedélyezni a címkék szerinti keresést.

A termékcímkék a WooCommerce hasznos funkciói, amelyek lehetővé teszik a termékek kategorizálását és rendszerezését kulcsszavak vagy címkék alapján. A WooCommerce termékcímkék alapvetően leíró kifejezések, amelyek segítenek a termékek csoportosításában a közös jellemzők alapján. Ha például ruhákat árul a webhelyén, létrehozhat olyan termékcímkéket, amelyek tükrözik termékeit, például az anyag típusát, a tervezőt vagy a stílust.

Technikai értelemben a WooCommerce termék_címkéje egy egyedi taxonómia, amely a termékekre jellemző. A taxonómiák a tartalmak csoportosításának egyik módja, és a WordPressben széles körben használják őket.

A címkék szerinti keresés engedélyezése nagymértékben javíthatja a felhasználói élményt webhelyén, és hozzájárulhat a konverziók és a bevétel növeléséhez. Alapértelmezés szerint a WooCommerce keresési funkciója csak a terméknevek és -leírások között keres. Ha azonban engedélyezi a címkék szerinti keresést, a felhasználók gyorsan és egyszerűen találhatnak termékeket meghatározott címkék vagy kulcsszavak alapján.

Például, ha egy felhasználó egy adott stílusú inget keres, egyszerűen beírhatja a megfelelő címkét a keresősávba, és megjelenik az összes, az adott címkét tartalmazó termék. Ezzel időt takaríthat meg, és a vásárlási élményt hatékonyabbá és intuitívabbá teheti ügyfelei számára.

Alkalmazza a Kódexet

Ebben a részben végigvezetjük a Divi kódrészlet webhelyén való elhelyezésének folyamatán,

1. Győződjön meg arról, hogy a Divi téma és a WooCommerce telepítve és konfigurálva van webhelyén.
2. Adja hozzá a Divi kereső modult az oldalához. Menjen arra az oldalra, amelyhez hozzá szeretné adni a keresősávot, és kattintson a „Visual Builder engedélyezése” gombra. Ezután kattintson a „+” ikonra egy új modul hozzáadásához, és keresse meg a „keresés” kifejezést a keresősávban. Válassza ki a „Keresés” modult az opciók listájából. A módosítások mentéséhez kattintson a modulbeállítások alján található zöld „Mentés” gombra.
3. Most engedélyezze a termékcímkék keresését úgy, hogy hozzáadja ezt a PHP Divi kódrészletet webhelyéhez. PHP-kód hozzáadható a functions.php fájlhoz az egyéni gyermektémán belül (további információ a gyermektéma létrehozásáról ).

/* Search Product Tags */
add_filter('posts_search', 'wpz_add_product_tags_to_search', 10, 2);
function wpz_add_product_tags_to_search($searchSql, $query = false) {

if ( is_admin() || ! is_a( $query, 'WP_Query' ) || ! $query->is_search ) {
return;
}
    if ($searchSql && isset( $_GET['et_pb_searchform_submit'] )) {

        global $wpdb;
        $searchSql = preg_replace(
            '/ (AND|OR) \\('.preg_quote($wpdb->posts).'\\.post_content (NOT )?LIKE \'(.+)\'\\)/U',
            '$0 $1 $2 EXISTS( SELECT 1 FROM '.$wpdb->term_relationships.' JOIN '.$wpdb->term_taxonomy.' USING (term_taxonomy_id) JOIN '.$wpdb->terms.' USING (term_id) WHERE object_id='.$wpdb->posts.'.ID AND taxonomy="product_tag" AND name LIKE \'$3\')',
            $searchSql
        );
    }
    return $searchSql;
}

add_action( 'wp_loaded', 'wpz_remove_default_search' );
function wpz_remove_default_search() {
    remove_action( 'pre_get_posts', 'et_pb_custom_search' );
    add_action( 'pre_get_posts', 'wpz_custom_search' );
}

function wpz_custom_search( $query = false ) {
    if ( is_admin() || ! is_a( $query, 'WP_Query' ) || ! $query->is_search ) {
        return;
    }
    if ( isset( $_GET['et_pb_searchform_submit'] ) ) {
        $postTypes = array();

        if ( ! isset($_GET['et_pb_include_posts'] ) && ! isset( $_GET['et_pb_include_pages'] ) ) {
            $postTypes = array( 'post' );
        }
        if ( isset( $_GET['et_pb_include_pages'] ) ) {
            $postTypes = array( 'page' );
        }
        if ( isset( $_GET['et_pb_include_posts'] ) ) {
            $postTypes[] = 'post';
        }
        /* BEGIN Add custom post types */
        $postTypes[] = 'product';
        /* END Add custom post types */
        $query->set( 'post_type', $postTypes );
        if ( ! empty( $_GET['et_pb_search_cat'] ) ) {
            $categories_array = explode( ',', $_GET['et_pb_search_cat'] );
            $query->set( 'category__not_in', $categories_array );
        }
        if ( isset( $_GET['et-posts-count'] ) ) {
            $query->set( 'posts_per_page', (int) $_GET['et-posts-count'] );
        }
    }
}

Mostantól megtekintheti az oldal előnézetét, hogy működés közben láthassa a keresősávot, és keressen a webhelyén található termékek között!

Nincs kódopció: Használja a Divi Shop Buildert

Ha a PHP kód helyett inkább Divi modulokkal szeretne dolgozni, a  Divi Shop Builder beépülő modulunk a tökéletes megoldás az Ön számára, és egy gombnyomással megvalósítja ezt a megoldást – ez már benne van a tagságban, ha éves vagy élettartamú WP Zone- tag. tagja , vagy itt vásárolhatja meg .

Ez a részlet (még mindig) működik?

Kérjük, tudassa velünk a megjegyzésekben, ha minden a várt módon működött.
Ha úgy gondolja, hogy ez a kód hasznos volt, szívesen fogadunk megjegyzést!

___

Licenc: Ez a részlet a Divi Theme kódját tartalmazza, szerzői jog: https://elegantthemes.com , módosította a WP Zone, 2023. április 13.. A GNU General Public License alapján licencelt, nincs garancia; kattintson ide a részletekért.