Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Cách thêm thông tin trên product thumbnail, Woocommerce bằng custom field

Chủ đề thuộc danh mục 'WordPress' được đăng bởi mamy1708, 28/9/15.

Lượt xem: 1,127

  1. mamy1708 Mới đăng kí

    Xin chào Anh(chi)!
    Bên mình có website wordpress xài woocommerce, ông sếp mình muốn thêm dòng chử "8-10 week delivery " vào cái thumbnail sản phẩm. Mình có tìm hiểu và tìm ra dc trang này. Có hướng dẫn nhưng làm thử thì lỗi code. Các bước làm như sau ah!
    This is a nice addition, but after some months we felt we needed some extra flash-tags like this one to offer our clients some important information about the product at home page without force them to click on the product link. If you have a lot of returning customers , that’s a good point because you can create a flash-tag for instance to announce a ‘coming soon’ product or an ‘updated’ product. After thinking about it, I decided ti implement a easy method to add extra flash-tags to our shop page. This process require some coding and ideally should be implemented as a plugin, but in the meanwhile, this small step by step will work [​IMG]

    • Step 1: The easiest way to control the flash-tag for each product is to use a custom field, so the first we need os to add a simple php function in our theme functions.php:

    add_action('woocommerce_after_shop_loop_item', 'my_print_coming_soon' );
    function my_print_coming_soon()
    {
    global $product, $post;
    if (get_post_meta($product->id, ‘product_coming_soon’, true)== 1)
    echo apply_filters(‘woocommerce_coming_flash’, ‘<span class=”coming_soon”>’.__( ‘Coming soon!’, ‘woocommerce’ ).'</span>’, $post, $product);
    }

    With this hook, if your product has a custom field called ‘product_coming_soon’ with value 1, then the tag will appear in our product thumbnail.

    • Step 2: Now, we need to style the flash-tag. This is just an example of how it looks on a custom version of woostore theme. let’s say we want our tag based on blue tones, so let’s code:

    ul.products li span.coming_soon {
    font-size: 16px;
    padding: 2px 9px 4px;
    }
    .coming_soon {
    background-color: #0000ff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(238, 130,130)), to(#0000ff)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, rgb(130, 130,238), #0000ff); /* Chrome 10+, Saf5.1+ */
    background-image: -moz-linear-gradient(top, rgb(130, 130,238), #0000ff); /* FF3.6 */
    background-image: -ms-linear-gradient(top, rgb(130, 130,238), #0000ff); /* IE10 */
    background-image: -o-linear-gradient(top, rgb(130, 130,238), #0000ff); /* Opera 11.10+ */
    background-image: linear-gradient(top, rgb(130, 130,238), #0000ff);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#96c42e', EndColorStr='#2ab536');
    border:1px solid #0000ff;
    position: absolute;
    top:5px;
    left:5px;
    padding:1px 6px;
    font-size:11px;
    text-align: center;
    font-weight: bold;
    color:#fff;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    -o-border-radius:20px;
    border-radius:20px;
    z-index: 999;
    text-shadow: 0 1px 0 rgba(0,0,0,0.1);
    -webkit-box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.4),
    0 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.4),
    0 1px 2px rgba(0,0,0,0.2);
    box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.4),
    0 1px 2px rgba(0,0,0,0.2);
    }

    At the end, simply adding a custom field to your product you will get this result:

    [​IMG]

    Vì em cũng ko chuyên về code, chỉ làm trên giao diện nên Anh chị nào có thể kiểm tra giúp em, chổ dòng code màu đỏ, báo là bị lỗi chổ này. Xin cám ơn và hậu tạ sau khi thành công!
    Link hướng dẫn ở đây ah scriptbox.io/woocommerce-tags-highlight/

    ...
  2. hochoi

    hochoi Banned

    Cái này bạn cần phải custom template của woocommerce hoặc sử dụng hook để làm, bạn tham khảo một số tài liệu của woocommerce tại đây, nó khá hữu ích cho bạn
    docs.woothemes.com/documentation/plugins/woocommerce/woocommerce-codex/
    hoặc
    wordpress.taisao.vn/search?q=woocommerce&start=10
  3. vnnshare.net

    vnnshare.net Banned

    Chả hiểu bạn nói gì
  4. pvandung2010

    pvandung2010 Thành viên cấp 1

    Vấn đề đơn giản mà bạn, bạn cứ khôi phục lại như ban đầu, vào vào theme đang xài -> woocommerce -> Single product -> product-images.php và bạn thêm text ở đây, rồi điều chỉnh len xuống cho đúng vị trí

Ủng hộ diễn đàn