custom layout block gutenberg woocommerce
secara default tampilan block gutenberg sudah bisa kita ganti dengan css. akan tetapi ada kala nya kita harus menyesuaikan tata letak element nya.
dan hal ini tidak dapat dilakukan dengan menggunakan css.
hal ini bisa dilakukan dengan menggunakan jquery akan tetapi akan sangat sulit jika kita kurang memehami jquery
trus bagaimana solusi nya?
ternyata oh ternyata gutenberg / woocommerce telah mnyediakan hooks sendiri jika kita ingin merubah layout woocommerce
add_filter( 'woocommerce_blocks_product_grid_item_html', function(){return ' your custom markup' });
mudah bukan? eit belum ya? ha ha ha mari kita lanjut. let’s go
secara default layout block woocommerce gutengerg adalah seperti di bawah ini :
<li class=\"wc-block-grid__product\">
<a href=\"{$data->permalink}\" class=\"wc-block-grid__product-link\">
{$data->image}
{$data->title}
</a>
{$data->price}
{$data->badge}
{$data->rating}
{$data->button}
</li>
sudah paham kan layout nya. sekarang mari kita rubah sesuai keinginan kita pertama buka file functions.php. kemudian tambahkan kode di bawah ini
function my_product_block( $html, $data, $product ) {
$html = '<li class="wc-block-grid__product">
<div class="image-wrap">
<a href="' . $data->permalink . '" class="wc-block-grid__product-link">' . $data->image . '</a>
' . $data->button . '
</div>
<h3><a href="' . $data->permalink . '">' . $data->title . '</a></h3>
' . $data->badge . '
' . $data->price . '
' . $data->rating . '
</li>';
return $html;
}
add_filter( 'woocommerce_blocks_product_grid_item_html', 'my_product_block', 10, 3);
kode nya hampir sama dengan yang di atas kan
tapi coba perhatikan baik-baik di situ kita merudah dan menambahkan beberapa tag html. setelah selese merubah jangan lupa untuk di simpan ya.
selamat mencoba semoga berhasil. ada masalah tinggalakan komentar
