Saya sedang mengusahakan pemalam teg produk untuk WordPress dan saya telah melakukan perkara berikut:

Ini ialah kod output yang anda lihat pada imej:

<a href="https://localhost/woo-metal/product/test-3/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">

  <div class="wb_badge-container">
    <span class="wb_badge wb_badge-rounded wb_badge-topright" style="background-color:#dd3333;color:#ffffff;">TEST</span>
  </div>

  <img src="https://localhost/woo-metal/wp-content/uploads/woocommerce-placeholder.png" class="woocommerce-placeholder wp-post-image" alt="Placeholder" decoding="async" loading="lazy" width="450" height="450">
  
  <h2 class="woocommerce-loop-product__title">Test 3</h2>
  
  <span class="price">

    <span class="woocommerce-Price-amount amount">
      <bdi>
        <span class="woocommerce-Price-currencySymbol">$</span>0.00
      </bdi>
    </span>

  </span>

</a>

Lencana mempunyai CSS berikut:

// ....
.wb_badge {
    z-index: 100;
    position: absolute;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
    min-width: 15px;
    min-height: 15px;
    font-size: 12.5px;
    font-weight: bold;
    text-align: center;
    word-break: break-word;
    -webkit-box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.75);
}

.wb_badge-topleft {
    top: 0;
    left: 0;
}
.wb_badge-topright {
    top: 0;
    right: 0;
}
.wb_badge-bottomleft {
    bottom: 0;
    left: 0;
}
.wb_badge-bottomright {
    bottom: 0;
    right: 0;
}
// ....

Saya mahu kedudukan bawah kiri atau kanan lencana diletakkan di hujung imej produk dan bukannya di bawah. Pada masa ini, menggunakan CSS saya, saya boleh meletakkannya di bahagian paling bawah di sebelah butang "Tambah ke Troli". Saya cuba menambah titik putus untuk menetapkan kedudukan relatif kepada beberapa elemen tetapi ia tidak berfungsi. Adakah anda tahu bagaimana saya boleh mencapai ini?