[Hướng dẫn] Thêm hiển thị thông tin khi hover vào sản phẩm.

  • Admin
    Bài này sẽ giúp các bạn hiển thị thông tin sản phẩm khi hover vào cho theme Flatsome. Ví dụ bạn muốn hiển thị mô tả ngắn khi khách hàng hover vào box sản phẩm trên trang chủ trước khi đi vào trang chi tiết.

    [Hướng dẫn] Thêm hiển thị thông tin khi hover vào sản phẩm. Hien-t10

    Cách này bạn chỉ cần để code vào functions.php và style.css của childtheme để trong quá trình sử dụng, bạn update theme thì không mất nhé.

    Copy và paste đoạn code sau vào cuối file functions.php của theme flatsome của bạn.

    Code:
    function action_woocommerce_after_shop_loop_item( ) {
        global $product;
        echo '<a href=" '.$product->get_permalink().' ">
                  <div class="showinfo">
                      //show thông tin tại đây
                  </div>
              </a>';
        };
    add_action( 'woocommerce_after_shop_loop_item', 'action_woocommerce_after_shop_loop_item', 10, 0 );

    Một số trường quan trọng đó là:

    $product->get_name() : Tên sản phẩm;
    $product->get_price() : Giá khuyến mãi của sản phẩm;
    $product->get_regular_price() : Giá ban đầu của sản phẩm;
    $product->get_short_description() : Lấy mô tả ngắn của sản phẩm.
    Tiếp theo thêm đoạn css vào file style.css:

    Code:
    .showinfo {
        position: absolute;
        top: 0px;
        width:100%;
        height:100%;
        z-index:22;
        display:none;
        background: #fff;
    }
    .product-small:hover .showinfo{
        display:block;
        cursor:pointer;
        opaticy: 0.5;
    }

    Vậy là xong, Lưu tại các thay đổi và xem kết quả nhé.

    Một số trường khác nếu bạn muốn hiển thị thêm:


    'name' => '',
    'slug' => '',
    'date_created' => null,
    'date_modified' => null,
    'status' => false,
    'featured' => false,
    'catalog_visibility' => 'visible',
    'description' => '',
    'short_description' => '',
    'sku' => '',
    'price' => '',
    'regular_price' => '',
    'sale_price' => '',
    'date_on_sale_from' => null,
    'date_on_sale_to' => null,
    'total_sales' => '0',
    'tax_status' => 'taxable',
    'tax_class' => '',
    'manage_stock' => false,
    'stock_quantity' => null,
    'stock_status' => 'instock',
    'backorders' => 'no',
    'sold_individually' => false,
    'weight' => '',
    'length' => '',
    'width' => '',
    'height' => '',
    'upsell_ids' => array(),
    'cross_sell_ids' => array(),
    'parent_id' => 0,
    'reviews_allowed' => true,
    'purchase_note' => '',
    'attributes' => array(),
    'default_attributes' => array(),
    'menu_order' => 0,
    'virtual' => false,
    'downloadable' => false,
    'category_ids' => array(),
    'tag_ids' => array(),
    'shipping_class_id' => 0,
    'downloads' => array(),
    'image_id' => '',
    'gallery_image_ids' => array(),
    'download_limit' => -1,
    'download_expiry' => -1,
    'rating_counts' => array(),
    'average_rating' => 0,
    'review_count' => 0,



    demo nếu kết hợp Advanced Custom Fields

    Code:
    function action_woocommerce_after_shop_loop_item( ) {
        global $product;
        $canban = get_field('can_ban');
        echo '<a href=" '.$product->get_permalink().' ">
                  <div class="showinfo">
                  '.$product->get_name().' <br/>
                  '.$product->get_price().' <br/>
                   '.$canban.'
                  </div>
              </a>';
        };
    add_action( 'woocommerce_after_shop_loop_item', 'action_woocommerce_after_shop_loop_item', 10, 0 );


    --Chữ ký--
    www.danganhviet.com


    • - Tránh đặt tiêu đề các dạng như: Giúp em với, Code này hay nè, Vào xem nè anh em,...
      - Đăng bài phải có ảnh demo hoặc viết mô tả rõ ràng, code phải bỏ vào khung code
      - Không comment vô nghĩa, không spam, không chữi tục, không post link độc hại, không hide bài viết
      - Hạn chế viết tắt, viết chữ màu, chữ to, chữ in đậm
  • vietnamads
    Có demo nào cụ thể không anh admin ơi


    --Chữ ký--
    Advertising Vietnam - Biển quảng cáo ngoài trời - booking quảng cáo - dịch vụ quảng cáo online
Thông tin tác giả
Admin
ACP
Bài viết :
380
Points :
732
Like :
109
Punbb
Quản trị
Status :
test
Xem lý lịch thành viên http://hotrofm.forumvi.com
Thông tin tác giả
vietnamads
MEM
Bài viết :
7
Points :
10
Like :
1
PhpBB3
Xem lý lịch thành viên https://www.vietnamads.vn/digital-marketing
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết

<