Kustomisasi Beranda Tema Toko WooCommerce [Panduan Utama]

Kustomisasi beranda tema etalase adalah kunci untuk setiap toko online yang dibangun dengan tema WooCommerce etalase. Penyesuaian diperlukan karena desain yang baik menarik pengunjung ke toko Anda, membangun kepercayaan pelanggan pada merek Anda dan mengubahnya menjadi pelanggan setia.

Dalam tutorial ini, saya akan menunjukkan beberapa penyesuaian beranda sederhana yang dapat Anda terapkan di beranda tema etalase Anda, untuk membuatnya lebih menarik dan meningkatkan pengalaman pengguna secara umum yang sama-sama berguna untuk meningkatkan pengoptimalan mesin telusur Anda.

Sebelum Anda membuat penyesuaian apa pun pada tema Storefront, disarankan untuk membuat tema anak Storefront terlebih dahulu untuk menghindari kehilangan perubahan saat tema induk diperbarui. Jika Anda juga ingin membuat lebih banyak penyesuaian pada tema Storefront, Anda dapat memeriksa panduan Kustomisasi Storefront yang saya bagikan di posting sebelumnya.

Kustomisasi Beranda Tema etalase

Tema WooCommerce Storefront memiliki lebih dari 200.000 instalasi aktif di komunitas WordPress. Beranda tema memiliki 6 bagian:

• Konten Halaman
• Bagian Kategori Produk
• Bagian Produk Unggulan
• Bagian Produk Terbaru
• Bagian Produk dengan Nilai Tertinggi
• Bagian Produk yang Dijual
• Bagian Produk Terlaris

Namun, sebelum kita pergi ke kustomisasi, Anda perlu mengatur beranda. Agar Anda dapat menampilkan bagian Beranda di beranda, Anda harus menetapkan template Beranda ke halaman Anda.

Tema Storefront secara otomatis membuat dua templat halaman tambahan, selain halaman WooCommerce default. Mereka adalah Beranda dan Lebar penuh. Di sini kita hanya akan membahas bagaimana Anda dapat mengatur template Homepage.

Templat Beranda

Template Beranda menawarkan cara yang bagus untuk menampilkan semua produk Anda, memberi Anda gambaran umum tentang produk dan kategori produk.

Pengunjung toko Anda pertama kali akan mendarat di halaman ini saat memasuki toko Anda. Tampilan beranda sangat penting karena pengunjung dapat dikonversi menjadi pembeli jika menarik.

Menyiapkannya sangat mudah karena Anda hanya perlu:

1. Masuk ke panel admin situs Anda sebagai administrator .
2. Buat halaman baru dan tambahkan beberapa konten untuk ditampilkan.
3. Kemudian, Anda harus memilih ' Beranda ' dari drop-down template di kotak meta Atribut Halaman seperti yang ditunjukkan di bawah ini:
4. Setelah memublikasikan halaman ini, Anda dapat mengaturnya sebagai beranda dengan menavigasi ke Pengaturan lalu Membaca .
5. Anda kemudian akan mencentang ' A static page ' dan kemudian memilih beranda yang dibuat dari dropdown ' Home page '.
6. Setelah Anda menyimpan perubahan, perubahan tersebut akan secara otomatis tercermin di front-end .

Setelah konfigurasi selesai, Beranda Anda harus memiliki beberapa bagian seperti yang ditunjukkan di bawah ini:

Di beranda, ditampilkan berbagai cluster seperti produk yang direkomendasikan, favorit penggemar, produk yang dijual, dan penjual terbaik. Cara elemen ini ditampilkan sama dengan urutan di back-end.

Setelah Beranda diatur, sekarang kita dapat masuk ke penyesuaian:

1. Hapus Gambar Kategori Produk dari Beranda

WooCommerce memungkinkan Anda untuk menampilkan produk serta kategori produk dengan gambarnya di beranda. Namun, jika Anda lebih suka kategori ditampilkan sebagai teks saja, Anda perlu menambahkan baris ini ke file functions.php tema anak Anda. Cukup tambahkan di akhir file function.php.

remove_action( 'woocommerce_before_subcategory_title', 'woocommerce_subcategory_thumbnail', 10 );

Inilah hasilnya:

2. Ubah Tautan URL di Logo

Secara umum, tema WordPress menautkan beranda situs di logo. Ini adalah fungsi standar untuk sebagian besar situs web, dan pengguna berharap mereka dapat kembali ke beranda setiap kali mereka mengklik logo.

Namun, bagaimana jika beranda berada di lokasi yang berbeda? Ini berarti Anda harus mengonfigurasi URL jika kami menginginkan tautan khusus. Untuk mengubahnya, kita perlu menambahkan kode berikut ke file functions.php tema anak:

 add_action( 'storefront_header' , 'custom_storefront_header', 1 );

fungsi custom_storefront_header () {

    remove_action( 'storefront_header' , 'storefront_site_branding', 20 );

    add_action( 'storefront_header' , 'custom_site_branding', 20 );

    fungsi custom_site_branding() {

        // SINI atur tautan logo atau judul situs Anda

        $link = home_url( '/link-kustom-saya/' );

        ?>

        <div class="situs-branding">

            <?php

                if ( function_exists( 'the_custom_logo' ) && has_custom_logo() ) {

                    $custom_logo_id = get_theme_mod( 'custom_logo' );

                    jika ( $custom_logo_id ) {

                        $custom_logo_attr = array('class' => 'custom-logo', 'itemprop' => 'logo' );

                        $image_alt = get_post_meta( $custom_logo_id, '_wp_attachment_image_alt', benar );

                        if ( kosong( $image_alt ) ) {

                            $custom_logo_attr['alt'] = get_bloginfo( 'nama', 'tampilan' );

                        }

                        $logo = sprintf( '<a href="%1$s" class="custom-logo-link" rel="home" itemprop="url">%2$s</a>',

                            esc_url( $tautan ),

                            wp_get_attachment_image( $custom_logo_id, 'penuh', salah, $custom_logo_attr )

                        );

                    }

                    elseif ( is_customize_preview() ) {

                        $logo = sprintf( '<a href="%1$s" class="custom-logo-link" style="display:none;"><img class="custom-logowaktu/a>' , esc_url( $tautan ) );

                    }

                    $html = is_front_page() ? '<h1 class="logo">' . $logo. '</h1>' : $logo;

                } elseif ( function_exists( 'jetpack_has_site_logo' ) && jetpack_has_site_logo() ) {

                    $logo = situs_logo()->logo;

                    $logo_id = get_theme_mod( 'custom_logo' );

                    $logo_id = $logo_id ? $logo_id : $logo['id'];

                    $ukuran = site_logo()->theme_size();

                    $html = sprintf( '<a href="%1$s" class="site-logo-link" rel="home" itemprop="url">%2$s</a>',

                        esc_url( $tautan ),

                        wp_get_attachment_image( $logo_id, $size, false, array(

                            'class' => 'lampiran logo situs-' . $ukuran,

                            'ukuran data' => $ukuran,

                            'itemprop' => 'logo'

                        ) )

                    );

                    $html = apply_filters( 'jetpack_the_site_logo', $html, $logo, $size );

                } kalau tidak {

                    $tag = is_front_page() ? 'h1' : 'div';




                    $html = '<' . esc_attr( $tag ) . ' class="beta site-title"><a href="' . esc_url( $link ) . '" rel="home">' . esc_html( get_bloginfo( 'nama' ) ) . '</a></' . esc_attr( $tag ) .'>';




                    if ( '' !== get_bloginfo( 'deskripsi' ) ) {

                        $html .= '<p class="site-description">' . esc_html( get_bloginfo( 'deskripsi', 'display' ) ) . '</p>';

                    }

                }

                gema $html;

            ?>

        </div>

        <?php

    }

}

Tautan khusus masuk ke baris 7 '( '/my-custom-link/' );' , di mana Anda akan menambahkan tautan khusus Anda dengan menggantinya dengan “ tautan khusus saya ”.

3. Hapus Sepenuhnya Kategori dari Beranda Toko

Anda mungkin ingin menghapus kategori di Beranda sepenuhnya. Fitur ini hanya menghapus kategori. Yang perlu Anda lakukan adalah menambahkan baris berikut ke file functions.php:

 function storefront_child_reorder_homepage_contant() {

remove_action('homepage', 'storefront_product_categories', 20 );

}

add_action('init', 'storefront_child_reorder_homepage_contant');

Inilah hasilnya:

4. Hapus Produk Terbaru dari Beranda Toko Anda

Segera setelah menambahkan produk baru, itu ditambahkan ke bagian ' Baru di ' di halaman depan. Ini adalah pengaturan default dalam tema Storefront. Namun, jika Anda terus-menerus menambahkan produk ke daftar Anda, mereka mungkin mengacaukan halaman toko. Selain itu, Anda mungkin juga ingin menampilkan informasi tambahan di bagian ini.

Untuk menghapus bagian ini, cukup tambahkan kode berikut ke file function.php tema anak.

 function storefront_child_reorder_homepage_contant() {

remove_action('homepage', 'storefront_recent_products', 30 );

}

add_action('init', 'storefront_child_reorder_homepage_contant');

Inilah hasilnya:

5. Hapus Produk Terlaris dari Beranda Toko

Untuk beberapa pemilik toko, produk terlaris mungkin bukan fitur yang diinginkan. Untuk menghapus bagian terlaris, cukup tambahkan kode berikut ke file function.php tema anak.

 function storefront_child_reorder_homepage_contant() {

remove_action('homepage', 'storefront_best_selling_products', 70 );

}

add_action('init', 'storefront_child_reorder_homepage_contant');

Inilah hasilnya:

6. Hapus Produk Unggulan

Dengan cara yang sama, pemilik toko mungkin ingin menonaktifkan bagian produk unggulan. Ini dapat dilakukan dengan menambahkan cuplikan kode berikut ke file functions.php tema anak:

 function storefront_child_reorder_homepage_contant() {

remove_action('homepage', 'storefront_featured_products', 40 );

}

add_action('init', 'storefront_child_reorder_homepage_contant');

Inilah hasilnya:

7. Cara Mengubah Warna Garis Horizontal di Halaman Depan Toko

Cukup tambahkan kode berikut ke file custom.css tema anak Anda:

 .page-template-template-homepage .hentry .entry-header,

.page-template-template-homepage .hentry,

.page-template-template-homepage .storefront-product-section {

perbatasan-warna: merah;

}

8. Menambahkan Gambar Latar Belakang ke Etalase Bagian Beranda tertentu

Tema Storefront default memiliki enam bagian yaitu, kategori produk, produk terbaru, produk unggulan, produk populer, produk obral, dan produk terlaris. Cukup tambahkan kode berikut ke file style.css :

 .produk-fitur-depan toko{

background-image: url(Tambahkan URL Anda di sini);

posisi latar belakang: tengah tengah;

background-repeat: tidak-ulangi;

ukuran latar belakang: sampul;

-o-background-size: penutup;

}

Inilah hasilnya:

9. Menambahkan Warna Latar Belakang ke Bagian Halaman Depan Toko

Anda mungkin ingin menambahkan warna latar belakang ke bagian Beranda. Untuk melakukan ini, Anda harus terlebih dahulu mengidentifikasi bagian yang ingin Anda tambahkan warna. Ini dapat dengan mudah dilakukan dengan menambahkan kode berikut ke file style.css :

 .produk-fitur-depan toko{

warna latar:#FFEB3B;

}

Inilah hasilnya:

10. Cara Menghapus atau menyembunyikan Judul Bagian Beranda

Untuk melakukan ini, Anda harus terlebih dahulu mengidentifikasi bagian yang ingin Anda hapus atau sembunyikan. Ini dapat dilakukan dengan menambahkan kode berikut ke file style.css :

 .storefront-recent-products .section-title {display:none;}

.storefront-product-categories .section-title {display:none;}

.storefront-featured-products .section-title {display:none;}

.storefront-popular-products .section-title {display:none;}

.storefront-on-sale-products .section-title {display:none;}

.storefront-best-selling-products .section-title {display:none;}

Inilah hasilnya:

11. Cara Mengubah Judul Bagian Beranda

Untuk melakukan ini, Anda harus terlebih dahulu mengidentifikasi bagian yang ingin Anda hapus judulnya. Daftar ini akan membantu Anda mengidentifikasi filter bagian beranda etalase:

• storefront_product_categories_args
• storefront_recent_products_args
• storefront_featured_products_args
• storefront_popular_products_args
• storefront_on_sale_products_args
• storefront_best_selling_products_args

Cukup tambahkan kode berikut di file function.php tema anak:

 add_filter( 'storefront_featured_products_args', 'custom_storefront_product_featured_title');

// Judul Produk Unggulan Halaman Depan

function custom_storefront_product_featured_title( $args ) {

$args['title'] = __( 'Judul Produk Unggulan Baru Di Sini', 'etalase' );

kembali $args;

}

Inilah hasilnya:

12. Cara Menaikkan Homepage Bagian Product Column Grid/Column

Cukup tambahkan baris kode berikut ke file function.php tema anak.

 add_filter('storefront_featured_products_shortcode_args','custom_storefront_featured_product_per_row' );




// kolom Produk Unggulan Unggulan

function custom_storefront_featured_product_per_row( $args ) {

$args['kolom'] = 2;

kembali $args;

}

Inilah hasilnya:

13. Cara Menampilkan Lebih Banyak Kategori di Beranda

Cukup tambahkan baris kode berikut ke file function.php tema anak.

 add_filter('storefront_product_categories_shortcode_args','custom_storefront_category_per_page' );




// Kategori Produk

fungsi custom_storefront_category_per_page( $args ) {

$args['angka'] = 4;

kembali $args;

}

Inilah hasilnya:

14. Cara Menambahkan Deskripsi di bawah Judul Bagian Beranda

Cukup tambahkan kode ini ke file function.php tema anak:

 add_action('storefront_homepage_after_featured_products_title', 'custom_storefront_product_featured_description');




fungsi custom_storefront_product_featured_description(){ ?>

<p class="element-title--sub">

<?php echo "Deskripsi bagian di sini";?>

</p>

<?php }

Inilah hasilnya:

15. Cara menghapus bagian produk berperingkat teratas dari Beranda Storefront

Ada dua cara untuk melakukan ini. Salah satunya adalah menginstal plugin yang akan membantu Anda untuk menghapus bagian ini. Anda dapat melihat plugin Homepage Control . Kita akan melihat cara yang lebih mudah untuk melakukan ini melalui kode.

Namun, Anda cukup menghapus bagian tersebut menggunakan pengait. Ini dilakukan hanya dengan menambahkan baris berikut ke file function.php tema anak :

remove_action( 'homepage', 'storefront_popular_products', 50 );

Selain itu, Anda dapat menghapusnya dengan menambahkan kode berikut di file style.css atau bagian CSS tambahan :

.storefront-popular-products .section-title {display:none;}

Inilah hasilnya:

16. Bagaimana Mengubah Judul Bagian Produk Berperingkat Teratas

Cukup tambahkan kode ini ke file function.php tema anak:

 add_filter( 'storefront_popular_products_args', 'custom_storefront_product_popular_title');

// Judul Produk Unggulan Halaman Depan

function custom_storefront_product_popular_title( $args ) {

$args['title'] = __( 'Produk Teratas', 'etalase' );

kembali $args;

}

Inilah hasilnya:

17. Cara Menampilkan Lebih Banyak Produk di Bagian Nilai Tertinggi

Default untuk Storefront menampilkan 4 produk di bagian Top Rated. Dalam contoh ini, kami akan meningkatkannya menjadi 12 produk. Cukup tambahkan kode ini ke file function.php tema anak :

 add_filter('storefront_popular_products_shortcode_args','custom_storefront_top_product_per_page' );




// Produk Unggulan Unggulan per halaman

function custom_storefront_top_product_per_page( $args ) {

$args['per_page'] = 12;

kembali $args;

}

Inilah hasilnya:

18. Cara Menghapus Bagian Produk Penjualan dari Halaman Depan Toko

Ada dua cara untuk melakukan ini. Salah satunya adalah memasang plugin yang akan membantu Anda menghapus bagian ini. Anda dapat melihat plugin Homepage Control . Untuk contoh ini, saya akan menggunakan satu baris kode.

Anda cukup menghapus bagian tersebut menggunakan pengait. Ini dilakukan hanya dengan menambahkan baris berikut ke file function.php tema anak:

remove_action( 'homepage', 'storefront_on_sale_products', 60 );

Inilah hasilnya:

19. Referensi Tindakan Kustomisasi Halaman Beranda Tema Storefront

Ini semua adalah fungsi add_action() yang tersedia yang digunakan pada tema Storefront. Itu menempelkan fungsi ke kait seperti yang didefinisikan oleh do_action

tajuk

• Beranda
• storefront_homepage – Executed inside <div class="col-full"> of the homepage content section

Kategori Produk

• storefront_homepage_before_product_categories – Executed before the <section class="storefront-product-categories"> homepage section
• storefront_homepage_after_product_categories_title` – Executed after the <h2 class="section-title"> product categories section title
• storefront_homepage_after_product_categories – Executed after the <section class="storefront-product-categories"> homepage section

Produk terbaru

• storefront_homepage_before_recent_products – Executed before the <section class="storefront-recent-products"> homepage section
• storefront_homepage_after_recent_products_title – Executed after the <h2 class="section-title"> recent products section title
• storefront_homepage_after_recent_products – Executed after the <section class="storefront-recent-products"> homepage section

Produk Unggulan

• storefront_homepage_before_featured_products – Executed before the <section class="storefront-featured-products"> homepage section
• storefront_homepage_after_featured_products_title – Executed after the <h2 class="section-title"> featured products section title
• storefront_homepage_after_featured_products – Executed after the <section class="storefront-featured-products"> homepage section

Produk populer

• storefront_homepage_before_popular_products – Executed before the <section class="storefront-popular-products"> homepage section
• storefront_homepage_after_popular_products_title – Executed after the <h2 class="section-title"> popular products section title
• storefront_homepage_after_popular_products – Executed after the <section class="storefront-popular-products"> homepage section

Produk yang dijual

• storefront_homepage_before_on_sale_products – Executed before the <section class="storefront-on-sale-products"> homepage section
• storefront_homepage_after_on_sale_products_title – Executed after the <h2 class="section-title"> on-sale products section title
• storefront_homepage_after_on_sale_products – Executed after the <section class="storefront-on-sale-products"> homepage section

Produk terlaris

• storefront_homepage_before_best_selling_products – Executed before the <section class="storefront-best-selling-products"> homepage section
• storefront_homepage_after_best_selling_products_title – Executed after the <h2 class="section-title"> best-selling products section title
• storefront_homepage_after_best_selling_products – Executed after the <section class="storefront-best-selling-products"> homepage section

Fungsi etalase

File: /inc/storefront-functions.php

• storefront_header_styles – filter the header styles
• storefront_homepage_content_styles – filter the homepage content styles
• Kelas etalase

Kesimpulan

Dalam artikel ini, saya telah menyoroti 18 ide kustomisasi beranda tema Storefront berbeda yang dapat Anda buat untuk Homepage tema WooCommerce Storefront. Kustomisasi ini telah diuji dan berfungsi seperti yang ditunjukkan pada tangkapan layar.

Jika Anda seorang pemula WordPress dan Anda tidak tahu di mana menemukan file functions.php, cukup ikuti langkah-langkah sederhana ini:

1. Masuk ke situs WordPress Anda dan akses Dasbor sebagai pengguna admin.
2. Dari menu Dashboard, klik pada Appearance Menu > Theme Editor Menu . Saat halaman Theme Editor terbuka, cari file theme functions dimana kita akan menambahkan function.

Ini sesederhana itu. Dari artikel tentang kustomisasi beranda tema etalase ini, Anda dapat melihat bagaimana tema etalase fleksibel dan Anda dapat menggunakan filter dan kait untuk membuat kustomisasi yang Anda inginkan. Untuk styling tambahan, Anda dapat menggunakan bagian CSS tambahan atau file style.css tempat Anda akan memasukkan kode CSS.

Artikel Serupa

1. 80+ Trik untuk Menyesuaikan Tema WooCommerce Storefront: Panduan Kustomisasi Tema Storefront Ultimate
2. Cara Menyembunyikan Produk di WooCommerce atau Menyembunyikan Produk berdasarkan Kategori atau Peran
3. Cara Mendapatkan Nama Kategori Produk Saat Ini di WooCommerce
4. Cara Mengatur Produk Unggulan Di WooCommerce
5. Cara Menyembunyikan Semua Produk Dari Halaman Toko di WooCommerce
6. Cara Menghitung Item yang Ditambahkan ke Keranjang Kode Hitung Keranjang WooCommerce
7. Cara Menyembunyikan Produk Tanpa Harga di WooCommerce
8. Cara Menyembunyikan Produk WooCommerce dari Hasil Pencarian
9. Cara Menggunakan Atribut Produk WooCommerce Langkah demi Langkah [Panduan Lengkap]
10. Cara Membuat Nomor Pagination di WordPress Tanpa Menggunakan Plugin