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 nhóm thiết kế Elegant Themes cung cấp các dịch vụ khác nhau trên WordPress và các plugin và chủ đề thiết kế.

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 WooCommerce có thể hơi không đủ, đặc biệt là nếu kiểu CSS của bạn hơi khác một chút. Hướng dẫn này, sẽ có một chút kỹ thuật (một chút CSS và không có gì), sẽ cho phép bạn sửa chữ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 WooCommerce 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à một phông chữ (make-icon) được Divi đề xuất và đọc 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ả giá đắ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 văn bản, đó là một điều khác? Tôi sẽ cho bạn thấy làm thế nào để đạt được điều này với đoạn mã CSS của ngày hôm 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.

Dưới đây là những gì chúng tôi sẽ có khi hoàn thành:

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

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

Tại sao lại sử dụng văn bản thay vì 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:

Để xác định đưa ra giao diệ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ư "Chế độ xem" hoặc "Mua" có thể dẫn đến nhiều chuyển đổi hơn: Mọi người đều 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 lợi thế của thử nghiệm A / B được tích hợp vào Divi để trợ 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. Dĩ nhiên tôi đã thấy các trang web thương mại điện tử khác có từ thay vì biểu tượng trên sản phẩm lơ lửng, vì vậy nó không phải là khái niệm mới. Tôi không bao giờ phải làm điều này trên một chủ đề Divi, và khi tôi thấy điều đó, tôi đặt ra cho mình một thử thách và tôi nhận ra rằng nó 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 của bạn.

Triển khai chuột qua văn bản

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

Đầu tiên, chúng ta sẽ thay đổi màu của lớp phủ lớp phủ cố đị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 « các thông số thiết kế tiên tiến nâng cao 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 định kiểu của chủ đề con của bạn.

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

Tải xuống WooC Commerce miễn phí, 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. [Khuyến nghị]

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

Nếu bạn muốn sản phẩm của mình trở nên 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%; }

Vậy là xong!

Giờ đây, 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 cân nhắc như thế nào.

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 chỉ định bằng *

Trang web này sử dụng Akismet để giảm thư rác. Tìm hiểu thêm về cách sử dụng dữ liệu phản hồi của bạn.

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