telah di uji coba , tidak semua template support jika ada hal yang menghalangi , apakah fitur fitur yg telah di pasang , atau di bagian div:post.body < < [kecil kemungkinan jika ini]
dan untuk mengaktifkan gambaricon nya , gunakan font awesome terbaru , jika tdk support , pakai boostrap , jika tak support lagi pakai icon material UI..
lihat saja scriptnya , dia support di icon mana , cari di google .
BUKA EDIT HTML ,
di atas </head>
<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
di atas </body>
<!--TOMBOL PESAN POP UP-->
<script>
//<![CDATA[
/*
* Wendy Code Checkout Form Whatsapp And Email
* Copyright (c) 2021 https://blog.choipanwendy.com
* No Licensed & Open source Code
* jQuery library
*/
// Tombol Buka Tutup
$('.tombol-bukatutup').click(function(){
$('.wendy-checkout-wrap').fadeToggle()});
var input_harga = $('#harga').text(); // Mengambil Harga Produk
$('.harga-s').text(input_harga);
// validasi Untuk Kolom mailjib Isi
$('.wendy-datainput .validate').each(function() {
title = $(this).attr('name');
label = $(this).parents('.wendy-datainput');
$('<span class="wendy-validasi"><b>' + title + '</b> diperlukan</span>').appendTo(label);
});
$(document).on('keyup', '.wendy-datainput .validate', function() {
if ($(this).val() != '') {
$(this).removeClass('focus');
$(this).parents('.wendy-datainput').find('.wendy-validasi').removeClass('show');
}
});
$(document).on('change', '.wendy-datainput select', function() {
$(this).removeClass('focus');
$(this).parents('.wendy-datainput').find('.wendy-validasi').removeClass('show');
});
$('.send_form').click(checkout);
function checkout() {
if ($('#namalengkap').val() == '') { // validasi Nama Lengkap
$('#namalengkap').each(function() {
$(this).addClass('focus');
$(this).parents('.wendy-datainput').find('.wendy-validasi').addClass('show');
});
$('#namalengkap').focus();
return false;
} else if ($('#nomorWA').val() == '') { // validasi Nomor Hp
$('#nomorWA').each(function() {
$(this).addClass('focus');
$(this).parents('.wendy-datainput').find('.wendy-validasi').addClass('show');
});
$('#nomorWA').focus();
return false;
} else if ($('#email').val() == '') { // validasi Alamat Email
$('#email').each(function() {
$(this).addClass('focus');
$(this).parents('.wendy-datainput').find('.wendy-validasi').addClass('show');
});
$('#email').focus();
return false;
} else if ($('#pembayaran').val() == 'default') { // validasi Pembayaran
$('#pembayaran').each(function() {
$(this).addClass('focus');
$(this).parents('.wendy-datainput').find('.wendy-validasi').addClass('show');
});
$('#pembayaran').focus();
return false;
} else if ($('#alamat').val() == '') { // validasi Alamat
$('#alamat').each(function() {
$(this).addClass('focus');
$(this).parents('.wendy-datainput').find('.wendy-validasi').addClass('show');
});
$('#alamat').focus();
return false;
} else {
/* Pengaturan Email */
var email = 'lalamunta@gmail.com', //Alamat Email Kalian
maillink = 'https://mail.google.com/mail/u/0/?view=cm&fs=1&tf=1&to=',
mailsubject = '&subject=Konfirmasi Pembelian ', //Subjek Email Namun Hanya Muncul Di SmartPhone Saja
maillink1 = '',
jarak = '',
maillink2 = '&body=Halo saya ingin membeli produk anda di website ,dengan keterangan berikut, apakah masih ada: ', //Pesan Pembuka di email
/* Pengaturan Whatsapp */
phone = '6287861537796', // Nomor Whatsapp Kalian
walink = 'https://web.whatsapp.com/send',
walink2 = 'Halo saya ingin membeli produk anda di website ,dengan keterangan berikut, apakah masih ada:'; // Pesan Pembuka di whatsapp
/* Dukungan Smartphone */
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
var maillink = 'mailto:',
jarak ='<br>';
maillink1 = '?cc=&bcc=',
walink = 'whatsapp://send';
}
/* Formulir Input Panggilan */
var input_nama = $('#namalengkap').val(), // Mengambil Input Nama
input_nomor = $('#nomorWA').val(), // Mengambil Input Nomor Hp
input_email = $('#email').val(), // Mengambil Input Alamat Email
input_pembayaran = $('#pembayaran :selected').text(), // Mengambil Input Pembayaran
input_alamat = $('#alamat').val(), // Mengambil Input Alamat
input_namaproduk = $('#nama_produk').text(), // Mengambil Nama Produk
input_harga = $('#harga').text(), // Mengambil Harga Produk
input_catatan = $('#catatan').val(), // Mengambil Catatan Pembeli
input_viaUrl = location.href; // Mengambil Url Saat ini atau link produk
/* URL Final Email */
var mail_link = maillink + email + maillink1 + mailsubject + input_nama + maillink2 + '%0A%0A' + jarak + jarak +
'DATA SAYA ' + jarak +
'%0A-----------------------------%0A' + '%0A' + jarak + jarak +
'Nama : ' + input_nama + '%0A' + jarak +
'No Hp : ' + input_nomor + '%0A' + jarak +
'Email : ' + input_email + '%0A' + jarak +
'Alamat : ' + input_alamat + '%0A' + jarak +
'Metode Pembayaran : ' + input_pembayaran + '%0A' + jarak +
'%0A-----------------------------%0A' + '%0A' + jarak + jarak +
'DAFTAR DAFTAR BELANJAAN %0A' + jarak +
'-----------------------------%0A' + jarak +
'Nama Produk : ' + input_namaproduk + '%0A' + jarak +
'Harga Produk : ' + input_harga + '%0A' + jarak +
'Catatan Pembeli : ' + input_catatan + '%0A' + jarak +
'Link Produk : ' + input_viaUrl + '%0A' + jarak +
'%0A-----------------------------%0A';
/* URL Final Whatsapp */
var whatsapp_link = walink + '?phone=' + phone + '&text=' + walink2 + '%0A%0A' +
'DATA SAYA ' +
'%0A-----------------------------%0A' + '%0A' +
'Nama : ' + input_nama + '%0A' +
'No Hp : ' + input_nomor + '%0A' +
'Email : ' + input_email + '%0A' +
'Alamat : ' + input_alamat + '%0A' +
'Metode Pembayaran : ' + input_pembayaran + '%0A' +
'%0A-----------------------------%0A' + '%0A' +
'DAFTAR BELANJAAN %0A' +
'-----------------------------%0A' +
'Nama Produk : ' + input_namaproduk + '%0A' +
'Harga Produk : ' + input_harga + '%0A' +
'Catatan Pembeli : ' + input_catatan + '%0A' +
'Link Produk : ' + input_viaUrl + '%0A' +
'%0A-----------------------------%0A';
/* Buka Jendela Email dan Whatsapp */
$('#to_wa').attr('href',whatsapp_link).attr('target','_blank');
$('#to_mail').attr('href',mail_link).attr('target','_blank');
/* Kosongkan Semua Kolom Jika Terkirim */
$('#namalengkap').val('');
$('#nomorWA').val('');
$('#email').val('');
$('#pembayaran :selected').text('Pembayaran');
$('#alamat').val('');
$('#catatan').val('');
}
};
//]]>
</script>
di atas ]]></b:skin>
/* FITUR TAMPILAN PRODUK */
/* css untuk post produk by wendy code */
.gambar-produk{float:left;width:40%;margin:0 25px 0 0}
.produk-kanan{float:right;width:55%}
.gambar-produk img{width:100%;margin:15px 0;border-radius:5px;box-shadow:0 2px 8px 0 rgb(60 64 67 / 11%)}
.gambar-produk a:nth-child(n+2) img{width:35%!important;height:100px!important;object-fit:cover;float:left;margin-right:10px}
.deskripsi-produk{overflow:hidden;width:100%;padding:20px 0;border-top:1px solid #eee}
.status-produk{margin:10px 0 20px;font-size:13px;background:#f4f5f9;display:inline-block;color:#444;padding:3px 15px;border-radius:5px}
.produk-kanan #beli-sekarang{color:#fff;font-weight:600;padding:10px 25px;display:inline-block;border-radius:5px}
.input-field{position:relative;margin:15px 0}
.input-field textarea{font-size:15px;padding:15px 0 15px 15px;display:block;width:94%;border:1px solid #f4f5f9;border-radius:7px}
.input-field textarea:focus{outline:none}
.input-field textarea:focus{border:2px solid #f89000!important}
.produk-kanan #beli-sekarang{background:#f89000;text-decoration:none}
.produk-kanan #beli-sekarang:hover,.marketplace a:hover{opacity:.8}
.harga-produk #harga{color:#f89000;font-weight:700;font-size:25px}.harga-produk strike{opacity:.5}
.marketplace{margin:20px 0 30px; display:flex;flex-wrap:wrap; line-height:1.6em}
.marketplace > *{display:block}
.marketplace > small{width:100%; margin-bottom:10px}
.marketplace > a{display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px; margin:0 8px 8px 0;border:1px solid #ddd;border-radius:3px}
.marketplace > a:last-of-type{margin-right:0}
.marketplace > a img{width:20px;height:20px;display:block}
@media screen and (max-width:768px){
.produk-kanan{width:100%;float:none}
.gambar-produk a:nth-child(n+2) img,.gambar-produk{width:100%;float:left}
}
/* table produk */
table.tr-caption-container{min-width:inherit;width:auto;margin:0 auto;border:0;position:relative}
table.tr-caption-container tr td{background-color:transparent;border:0;padding:0}
table.tr-caption-container tr:nth-child(2n+1) td, table.tr-caption-container tr:nth-child(2n+1) td:first-child{border:0;background:transparent}
table.tr-caption-container .tr-caption{display:block;font-size:12px;font-style:italic;color:#767676;background-color:transparent;border:0}
table{width:100%;margin:20px 0px;border:1px solid rgba(230,230,230,1);border-radius:7px;overflow:hidden;font-size:14px}
table th{background-color:transparent;padding:15px 20px;border:1px solid #ddd;border-left:0;font-family:Noto Sans;font-size:13px}
table th:last-child, table tr td:last-child, table tr:nth-child(2n) td:last-child{border-right:0}
table td{padding:15px 20px;border:1px solid #ddd;border-left:0;border-top:0;vertical-align:middle}
table tr:nth-child(2n+1) td{background-color:rgba(0,0,0,.01)}
.table{display:block;overflow-y:hidden;overflow-x:auto;border-radius:3px;scroll-behavior:smooth;}
/* rating produk */
.rating-produk i.icon-star-angka{font-weight:400;font-size:12px;margin-left:5px;vertical-align:1px}
.rating-produk{padding:0;width:55%;float:left;box-sizing:border-box;margin-top:10px}
b.widget-rating{display:block;margin-bottom:10px}
i.icon-star,.icon-star{font-weight:400;font-style:normal;display:inline-block}
i.icon-star:before,.icon-star:before{content:'';width:17px;height:17px;display:inline-block;margin:-2px;transition:all .3s ease;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z' fill='%23ffc53e'/%3E%3C/svg%3E") no-repeat}
i.icon-star.silver:before,i.icon-star.silver:before{content:'';width:17px;height:17px;display:inline-block;margin:-2px;transition:all .3s ease;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z' fill='%23a9acad'/%3E%3C/svg%3E") no-repeat}
/* css darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.darkMode table th,.darkMode table td{border-color:rgba(255,255,255,.1)}
.darkMode table{background-color:#1e1e1e;color:#fefefe}
.darkMode .input-field textarea,.darkMode .status-produk{border-color:rgba(255,255,255,.1);background:#2d2d30;color:#fefefe}
/*SELESAI*/
/*CATATAN atau dibawah ini , atau gunakan semuanya */
/* fitur post jualan*/
/*formulir checkout whatsapp dan email by wendy code*/
.wendy-checkout-content{position:absolute;top:50%;left:50%;padding:35px 10px 10px 10px;transform:translate(-50%,-45%);background-color:#fff;border-radius:.5rem;max-width:500px;width:90%;box-shadow:inset 0 2px 6px 0 rgba(49,53,59,.12);max-height:calc(100vh - 150px);overflow:auto;margin:auto}
.wendy-checkout-content:hover{overflow-x:hidden;overflow-y:auto}
.wendy-checkout-content .wendy-close{position:absolute;right:15px;top:3px;font-size:15px;}
.wendy-checkout-content .wendy-close:before{content:'Close';position:relative;right:2px;top:0;font-size:12px;color:#999}
.wendy-checkout-content .wendy-close a.tombol-bukatutup{width:auto;background:transparent;color:#999;padding:;text-decoration:none}
.wendy-checkout-wrap{position:fixed;z-index:999;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.5);display:none;}
#wendy-belanja{padding:5px;display:block}
#wendy-konfirmasi{display:grid;grid-template-columns:1fr 1fr;grid-gap:0 15px}
.wendy-datainput{position:relative;margin-bottom:5px;margin-right:5px}
.wendy-datainput select{padding:12px 0;color:#555;font-size:14px;width:100%;border:0!important;border-bottom:1px solid #ddd!important;outline:none;background:#fff}
.wendy-datainput input{font-size:14px;padding:12px 0!important;display:block;width:100%;border:none!important;border-bottom:1px solid #ddd!important}
.wendy-datainput input:focus{outline:none}
.wendy-datainput label{color:#999;font-size:14px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}
.wendy-datainput .focus{box-shadow:inset 0 -1px 0 0 #f89000!important}
.wendy-datainput .wendy-validasi{position:absolute;z-index:2;top:calc(100% + 20px);left:0;background:#f89000;color:#fff;padding:5px 10px;border-radius:3px;font-size:80%;box-shadow:0 5px 10px rgba(0,0,0,.08);transition:.4s;visibility:hidden;opacity:0;display:inline-block!important}
.wendy-datainput .wendy-validasi.show{visibility:visible;opacity:1;top:calc(100% + 10px)}
.wendy-datainput .wendy-validasi:after{position:absolute;bottom:100%;left:12px;content:'';border:8px solid;border-color:transparent transparent #f89000 transparent}
a.send_form{position:relative;display:inline-block;background:#f89000;color:#ffffff;padding:7px;border-radius:5px;text-align:center;font-size:13px;font-weight:400;text-decoration:none;margin-top:5px}
.img-produk{display:grid;grid-template-columns:1fr 2.7fr}
.img-produk img{max-width:150px;float:left;margin:10px 15px 0 0;border-radius:5px}
.info-produk{font-size:13px;margin-top:10px}
.info-produk i{color:#999;font-size:11px;margin:8px 0;display:block}
#nama_produk{font-size:20px;font-weight:600}
/*css darkmode sesuaikan classnya jika berbeda atau hapus bagian ini*/
.darkMode .send_form,.darkMode .tombol-bukatutup{color:#fff}
.darkMode .wendy-checkout-content,.darkMode .wendy-datainput select,.darkMode .wendy-datainput input{background-color:#252526!important}
/* selesai */
cari <data:post.body/> , letakkan tepat di bawahnya ,
terkadang kode di atas lebih dari 1 , tapi coba pada yang pertama saja .. sebab terkadang ada template hanya memiliki 1 kode semacam di atas .
<div class='wendy-checkout-wrap'>
<div class='wendy-checkout-content'>
<div class='wendy-close'>
<a class='tombol-bukatutup' href='javascript:void(0);'>✕</a>
</div>
<div class='img-produk'>
<img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl,150)' expr:title='data:post.title'/>
<div class='info-produk'>
<div id='nama_produk'><data:post.title/></div>
<br/>Harga :
<span class='harga-s'/>
<i>*Belum termasuk Ongkos kirim</i>
</div></div>
<div id='wendy-belanja'>
<div id='wendy-konfirmasi'>
<div class='wendy-datainput'>
<input class='validate' id='namalengkap' name='Nama' placeholder='Nama Anda' required='' type='text' value=''/>
</div>
<div class='wendy-datainput'>
<input class='validate' id='nomorWA' name='No HP' placeholder='No HP' required='' type='number' value=''/>
</div>
<div class='wendy-datainput'>
<input class='validate' id='email' name='Email' placeholder='Email' required='' type='text' value=''/>
</div>
<div class='wendy-datainput'><select class='validate' id='pembayaran' name='No Rekening'>
<option hidden='hidden' selected='selected' value='default'>Pembayaran</option>
<option value='1'>Mandiri</option>
<option value='2'>Gopay</option>
<option value='3'>OVO</option>
<option value='4'>QRIS Lainnya</option>
<option value='5'>Paypal</option>
</select></div>
<div class='wendy-datainput'>
<input class='validate' id='alamat' name='Alamat' placeholder='Alamat' required='' type='text' value=''/>
</div>
</div>
<a class='send_form' href='javascript:;' id='to_wa' title='Pesan via whatsapp' type='submit'>Pesan via whatsapp</a>
<a class='send_form' href='javascript:;' id='to_mail' title='Pesan via Email' type='submit'>Pesan via Email</a>
</div>
</div>
</div>
>br />sev template .
di ruang posting pasang kode ini ;
<!-- GAMBAR PRODUK-->
<div class='gambar-produk'>
<a href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWIEvA0TyH3xPwxhMCgARKy8gXqZqCpfF3wM8xSr1y3N312OX7HvPwV-NoOJ0zzn4qwBnxS3f00-2i7gbwwPcYk569rcXaC6QDggu4X2KEBKFZqsTgoWFsZXUHnsjDNcFLKzVCETAvBfMdnPs6nfXuDgC6TMmzeKMScAjWYzun_J8rkmu7fcMM15CZ5Kry/s320/c4.jpg' title='judul produk'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWIEvA0TyH3xPwxhMCgARKy8gXqZqCpfF3wM8xSr1y3N312OX7HvPwV-NoOJ0zzn4qwBnxS3f00-2i7gbwwPcYk569rcXaC6QDggu4X2KEBKFZqsTgoWFsZXUHnsjDNcFLKzVCETAvBfMdnPs6nfXuDgC6TMmzeKMScAjWYzun_J8rkmu7fcMM15CZ5Kry/s320/c4.jpg' title='1'/></a>
<a href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxHcwulFxxTkp7DOSksR7VARPSnMO50SwI0yNod6Gchhu_auPVTcOe7mx-octwNJhZtGG83TtgX80FRyYp1BTKWKpzXEO7R3K9FVMKTXOKGzTKAbQ04ydnZesoDvW1gEsQGwAr74n1Ys4sRzHqc54TDWXI8EjSsBuSq9qeBwRDiG6G_KfWOemOye-Z9pdi/s329/c5.jpg' title='judul produk'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxHcwulFxxTkp7DOSksR7VARPSnMO50SwI0yNod6Gchhu_auPVTcOe7mx-octwNJhZtGG83TtgX80FRyYp1BTKWKpzXEO7R3K9FVMKTXOKGzTKAbQ04ydnZesoDvW1gEsQGwAr74n1Ys4sRzHqc54TDWXI8EjSsBuSq9qeBwRDiG6G_KfWOemOye-Z9pdi/s329/c5.jpg' title='2'/></a>
<a href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj9i6mrzVbCQ1LNlvxgb-27nvNOxbNbammJe6BCPF1D0mz1W3nT7YlfXCwBfBotoJSq1azzVpC9wphDub-_DkTLvnqJLI6hvxBu0Cr2LG4fPSKBDXlSdbDZEq4cJQsv5nZA971kJZykapODNOHEOsafAXEy3N7Xu4UplJpLCM7jx9pY9pPclgJX-baV8Zk/s300/c6.jpg' title='judul produk'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj9i6mrzVbCQ1LNlvxgb-27nvNOxbNbammJe6BCPF1D0mz1W3nT7YlfXCwBfBotoJSq1azzVpC9wphDub-_DkTLvnqJLI6hvxBu0Cr2LG4fPSKBDXlSdbDZEq4cJQsv5nZA971kJZykapODNOHEOsafAXEy3N7Xu4UplJpLCM7jx9pY9pPclgJX-baV8Zk/s300/c6.jpg' title='3'/></a>
</div>
<!-- GAMBAR PRODUK-->
<div class='produk-kanan'>
<!--STATUS PRODUK -->
<div class='status-produk'>Promo</div>
<!-- STATUS PRODUK-->
<!--HARGA PRODUK-->
<div class='harga-produk'>
<strike>Rp.4.500.000</strike><br/>
<span id='harga'>Rp.3.000.000</span>
</div>
<!--HARGA PRODUK -->
<!--RATING PRODUK-->
<span class='rating-produk'>
<b class='widget-rating'>
<i class='icon-star'></i>
<i class='icon-star'></i>
<i class='icon-star'></i>
<i class='icon-star'></i>
<i class='icon-star silver'></i>
<i class='icon-star-angka'>4.0</i></b>
</span>
<!-- RATING PRODUK-->
<!-- CATATAN PEMBELI-->
<div class='input-field'>
<textarea id='catatan' maxlength='100' placeholder='Catatan'>
</textarea>
</div>
<!-- CATATAN PEMBELI-->
<a href='javascript:void' class='tombol-bukatutup' id='beli-sekarang' title='Beli Sekarang'>Beli Sekarang</a>
<!-- MARKETPLACE -->
<div class='marketplace'>
<small>atau Belanja melalui '<b>Market Place</b>' favorit anda :</small>
<a title='Tokopedia' href='#' target='_blank' rel='noopener'>
<img src='https://cdn.statically.io/favicons/tokopedia.com'></a>
<a title='Bukalapak' href='#' target='_blank' rel='noopener'>
<img src='https://cdn.statically.io/favicons/bukalapak.com'></a>
<a title='Shopee' href='#' target='_blank' rel='noopener'>
<img src='https://cdn.statically.io/favicons/shopee.co.id'></a>
<a title='Lazada' href='#' target='_blank' rel='noopener'>
<img src='https://cdn.statically.io/favicons/lazada.co.id'></a>
</div>
<!-- MARKETPLACE-->
</div>
<!-- DESKRIPSI PRODUK -->
<div class='deskripsi-produk'>
<h3>Deskripsi Produk</h3>
<!-- TABLE PRODUK -->
<table cellpadding='0' cellspacing='0' style='text-align: left;'>
<tbody>
<tr>
<td><b>Stok</b></td>
<td>3889</td>
</tr>
<tr>
<td><b>Merek</b></td>
<td>Tidak Ada Merek</td>
</tr>
<tr>
<td><b>Dikirim Dari</b></td>
<td>Jakarta Barat DKI</td>
</tr>
<tr>
<td><b>Ukuran</b></td>
<td>38 - 42</td>
</tr>
<tr>
<td><b>Warna</b></td>
<td>Hitam, Army</td>
</tr>
</tbody>
</table>
<!-- TABLE PRODUK -->
<!-- tuliskan deskripsi produk kalian di sini-->
</div>
selesai
sumber https://www.wendycode.com/ .. silahkan kunjungi agar lebih jelas .