Flatsome Temasında Basit Bir Boyut Kılavuzu Açılır Penceresi Nasıl Oluşturulur

Yayınlanan: 2022-06-29

Bir çevrimiçi giyim mağazanız varsa, Flatsome temasında bir beden kılavuzu önemlidir. Beden kılavuzu, müşterilerinizin beden ölçülerine göre kendilerine en uygun kıyafetleri bulmalarına yardımcı olur. Bu nedenle, ürün sayfanıza müşterilerin doğru beden kıyafetlerini seçmelerine yardımcı olacak bir beden kılavuzu eklemek iyi bir uygulamadır ve WordPress'teki en iyi açılır pencere eklentisidir.

Bu eğitimde, Flatsome temasına nasıl bir 'Boyut Rehberi' ekleyebileceğimizi göreceğiz. Müşteriler bu boyut kılavuzu düğmesini tıkladığında, ışık kutusunda bir boyut kılavuzu açılır. Boyut kılavuzunu Flatsome temasında, istediğiniz gibi düzenleyebileceğiniz ve ölçümleri ayarlayabileceğiniz bir demo kodu kullanarak uygulayacağız.

Adım Adım Flatsome Temasında Bir Boyut Kılavuzu Oluşturun

Aşama 1:

Öncelikle bir UX Bloğu oluşturmamız gerekiyor. Kontrol panelinde 'UX Blokları' seçeneğinin üzerine gelin ve 'Yeni Ekle'yi tıklayın.

Adım 2:

Kısa kodun [block id=”size-guide”] olması için bloğa 'Boyut Kılavuzu' adını verin.

ücretsiz woocommerce temaları

Aşama 3:

Seçmek için düzenleyicideki 'Metin' sekmesine tıklayın. Verilen kodu kopyalayıp editöre yapıştırın. Değerleri ihtiyacınıza göre özelleştirebilirsiniz. Şimdi UX Bloğu oluşturmayı tamamlamak için 'Yayınla'yı tıklayın. Tüm en iyi WooCommerce temalarında aynı varsayılan metin düzenleyici.

 [açıklık]

[title text="Boyut Kılavuzu"]

<div class="boyut kılavuzu">
<table class="boyut-kılavuzu">
<kafa>
<tr>

<th class="tooltip" title="Amerika Birleşik Devletleri">ABD</th>
<th class="tooltip" title="Birleşik Krallık">İngiltere</th>
<th class="tooltip" title="İtalya">BT</th>
<th class="tooltip" title="Fransa">FR</th>
<th class="tooltip" title="Almanya">DE</th>
<th class="tooltip" title="Japonya">JP</th>

</tr>
</thead>

<vücut>

<tr>

<td>2</td>
<td>6</td>
<td>38</td>
<td>34</td>
<td>32</td>
<td>7</td>

</tr>

<tr>

<td>4</td>
<td>8</td>
<td>40</td>
<td>36</td>
<td>34</td>
<td>9</td>

</tr>

<tr>

<td>6</td>
<td>10</td>
<td>42</td>
<td>38</td>
<td>36</td>
<td>11</td>

</tr>

<tr>

<td>8</td>
<td>12</td>
<td>44</td>
<td>40</td>
<td>38</td>
<td>13</td>

</tr>

<tr>

<td>10</td>
<td>14</td>
<td>46</td>
<td>42</td>
<td>40</td>
<td>15</td>

</tr>

<tr>

<td>12</td>
<td>16</td>
<td>48</td>
<td>44</td>
<td>42</td>
<td>17</td>

</tr>

<tr>

<td>14</td>
<td>18</td>
<td>50</td>
<td>46</td>
<td>44</td>
<td>19</td>

</tr>

<tr>

<td>16</td>
<td>20</td>
<td>52</td>
<td>48</td>
<td>46</td>
<td>21</td>

</tr>

<tr>

<td>18</td>
<td>22</td>
<td>54</td>
<td>50</td>
<td>48</td>
<td>23</td>

</tr>

<tr>

<td>20</td>
<td>24</td>
<td>56</td>
<td>52</td>
<td>50</td>
<td>25</td>

</tr>

<tr>

<td>22</td>
<td>26</td>
<td>58</td>
<td>54</td>
<td>52</td>
<td>27</td>

</tr>

<tr>

<td>24</td>
<td>28</td>
<td>60</td>
<td>56</td>
<td>54</td>
<td>29</td>

</tr>

</tbody>

</table><!-- /.size-guide-table -->

</div><!-- /.size-guide -->

[açıklık]

<p>

<small>Bu bir beden kılavuzu demosudur (bedenler yanlış olabilir).</small>

</p>

Flatsome temasında boyut kılavuzu

4. Adım:

Panoda, 'Görünüm'ün üzerine gelin ve 'Tema Dosyası Düzenleyici'yi tıklayın.

Adım 5:

'Tema Dosyası Düzenleyicisi' içinde, açmak için 'Tema İşlevleri'ne (işlevler. php) tıklayın .

6. Adım:

Şimdi aşağıda verilen kodu 'Theme Functions' (functions.php) dosyasına yapıştırın. Ardından, özelleştirmeyi kaydetmek için 'Dosyayı Güncelle'yi tıklayın.

Tema dosyalarınızda değişiklik yapmak için bir alt tema kullanmanızı şiddetle tavsiye ettiğimizi unutmayın . Tema dosyalarında herhangi bir değişiklik yapmadan önce web sitenizin yedeğini aldığınızdan emin olun.

Bu kodu resimde gösterildiği gibi 'Tema İşlevleri' içine yapıştırın.

************************************************************ **************************************************

 add_action('woocommerce_single_product_summary', function () {

echo do_shortcode( '[button text="Boyut Kılavuzu" size="xsmall" radius="99" link="#size-guide"][lightbox width="600px" padding="20px"][block][/lightbox ]' );

}, 12);

************************************************************ **************************************************

7. Adım:

Alternatif olarak, Beden Kılavuzu düğmesini yalnızca belirli kategorilerdeki ürünler için göstermeyi seçebilirsiniz. Bu durumda, 'Theme Functions'(functions.php) dosyasının içine bir önceki kod yerine aşağıda verilen kodu yapıştırın .

************************************************************ ************************************************************ **

 add_action('woocommerce_single_product_summary', function () {

// Düğmeyi yalnızca üründe bu kategorilerden biri varsa göster.

if ( has_term( array( 'tshirt', 'hoodies' ), 'product_cat' ) ) {

echo do_shortcode( '[button text="Boyut Kılavuzu" size="xsmall" radius="99" link="#size-guide"][lightbox width="600px" padding="20px"][block][/lightbox ]' );

}

}, 12);

************************************************************ ************************************************************ **

Adım 8:

Üzerinde çalıştığımız 'Tema Dosyası Düzenleyicisi' içinde , dosyayı düzenleyicide açmak için 'Stil Sayfası'na (style.css) tıklayın. En popüler ücretsiz WordPress WooCommerce temaları, tema dosyası düzenleyicisi kullanılarak düzenlenebilir.

9. Adım:

Aşağıdaki kodu 'Stylesheet'(style.css) dosyasının içine yapıştırın. Ardından , özelleştirmeyi kaydetmek için 'Dosyayı Güncelle'yi tıklayın.

************************************************************ ************************************************************ *******************************

 .size-rehber-table tr th,
.size-guide-table tr td {
metin hizalama: merkez;
genişlik: 100 piksel;
}

.size-guide-table tr:nth-child(çift) {
arka plan rengi: #fbfbfb;
}

.size-guide-table th {
arka plan rengi: #f5f5f5;
}

************************************************************ ************************************************************ ***********************************

Adım 10:

Şimdi herhangi bir ürünü açın ve fiyatın hemen altında oluşturduğumuz 'Beden Rehberi' butonunu bulacaksınız . 'Boyut Kılavuzu' düğmesine tıklayın .

Adım 11:

'Boyut Kılavuzu' düğmesini tıkladığınızda, boyut kılavuzu, ışık kutusunda açılır. 'Beden Rehberimizin' mükemmel çalıştığını görebiliriz .

Flatsome temasında boyut kılavuzu

Çözüm

Yukarıda belirtilen adımlarda, müşterileriniz için ışık kutusunda bir boyut kılavuzu açacak bir 'Beden Kılavuzu' düğmesini nasıl kolayca oluşturabileceğinizi ele aldık. Bu beden kılavuzu, müşterilerinizin mükemmel kıyafetlerini seçmelerini ve çevrimiçi mağazanızla daha fazla ilgilenmelerini sağlayacaktır.

Umarız bu eğitim size yardımcı olmuştur. Bunun gibi daha harika eğitimler için bizi takip edin! Flatsome temasına menü etiketlerinin nasıl ekleneceğine ilişkin eğiticimize göz atmaktan çekinmeyin.