Bỏ qua đến nội dung chính

Cách thêm văn bản trên sản phẩm WooCommerce trên Divi

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 600.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Trong một hướng dẫn trước, chúng tôi bạn đã giới thiệu Divi. Dành cho những ai chưa biết, Divi là một chủ đề WordPress cao cấp được thiết kế bởi nhóm Elegant Themes cung cấp các dịch vụ khác nhau trên WordPress và thiết kế các plugin và chủ đề.

Divi là một chủ đề đáp ứng và sau này tương thích với một số plugin khác trong số các plugin khác mà chúng tôi có WooC Commerce. Hôm nay chúng tôi sẽ chỉ cho bạn cách cung cấp một hình ảnh động khác nhau cho các sản phẩm WooC Commerce của bạn.

Đôi khi phong cách của WooC Commerce có thể hơi không phù hợp, đặc biệt nếu phong cách CSS của bạn hơi khác một chút. Hướng dẫn này, sẽ là một chút kỹ thuật (một chút CSS và không có gì khác), sẽ cho phép bạn sửa nó.

Các hướng dẫn khác về chủ đề Divi

Chúng ta hãy bắt đầu.

Sửa đổi một biểu tượng cho văn bản qua chuột

Theo mặc định, khi bạn sử dụng WooC Commerce với Divi và di chuột qua một sản phẩm, bạn sẽ thấy một biểu tượng "+" nhỏ là phông chữ (make-icon) được đề xuất bởi Divi và như sau:

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

Thật dễ dàng để thay đổi điều đó cho một biểu tượng khác trong cài đặt, nhưng nếu bạn muốn thêm một văn bản, đó có phải là một điều khác không? Tôi sẽ chỉ cho bạn cách đạt được điều này với các đoạn CSS ngày nay và tôi cũng sẽ bao gồm một mã tùy chọn để thêm vào trang web của bạn.

Đây là những gì chúng ta sẽ có một khi hoàn thành:

Tại sao lại sử dụng văn bản thay vì một biểu tượng?

Tôi có thể nghĩ ra một số lý do có thể khiến bạn làm điều này:

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

Để xác định cung cấp một cái nhìn độc đáo cho cửa hàng của bạn: Tất cả những gì bạn có thể làm để phân biệt trang Divi / WooCommerce của bạn với một trang khác luôn là một điều tốt.

Sử dụng một từ như "Xem" hoặc "Mua" có thể dẫn đến nhiều chuyển đổi hơn: Mọi người cần phải làm những gì tốt nhất cho trang web của họ và bạn có thể tận dụng thử nghiệm A / B tích hợp trên Divi để giúp đỡ điều đó.

Nguồn cảm hứng

Gần đây tôi đã duyệt một trang web có văn bản trên sản phẩm lơ lửng. Tất nhiên tôi đã thấy các trang web thương mại điện tử khác có các từ thay vì các biểu tượng trên sản phẩm lơ lửng, vì vậy đó không phải là khái niệm mới. Tôi chưa bao giờ phải làm điều này theo chủ đề Divi, và khi tôi thấy điều đó, tôi đặt ra cho mình một thử thách và nhận ra rằng thực sự dễ dàng để thực hiện điều này. Với rất ít mã cần thiết, bạn chắc chắn không ảnh hưởng đến hiệu suất của blog.

Thực hiện chuột trên văn bản

Bước 1: Lớp phủ màu

Trước tiên chúng ta sẽ thay đổi màu của lớp phủ tĩnh. Điều này cực kỳ dễ làm trên Divi. Trong mô-đun cửa hàng của bạn Chuyển đến tab « thông số thiết kế tiên tiến tiên tiến Và chọn màu của bạn.

Bước 2: Thêm CSS

Mã CSS sau trong " Tùy chọn chủ đề> CSS tùy chỉnh Hoặc trên bảng phong cách của chủ đề con bạn.

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

.wooc Commerce .et_overlay: trước {left: 0; lề trái: 0; nội dung: 'xem'; / *** Văn bản của bạn ở đây *** / font-family: 'Source Without Pro', Arial! / *** Chọn phông chữ của bạn *** / text-Transform: chữ hoa; cỡ chữ: 24px; màu: #fff; / *** Đặt màu văn bản *** / font-weight: bold; văn bản-align: trung tâm; chiều rộng: 100%; phần đệm: 5px 0; }

Nếu bạn muốn sản phẩm của mình khá tròn, bạn có thể thêm mã tùy chọn này:

.woocommerce ul.products li.product a img, .et_overlay {bán kính biên giới: 50%; }

Đó là tất cả!

Bây giờ bạn có thể truy cập cửa hàng của mình và xem các thay đổi của bạn được xem xét.

Hướng dẫn Divi khác

Bài viết này chứa comments 5

Để lại một bình luận

địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
10 cổ phiếu
cổ phiếu6
tweet
Enregistrer4