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 901.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 khắc phục điều này.

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

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

Cách thêm hình ảnh vào sản phẩm woocommerce

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 đề 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í]

Biểu tượng woocommerce mặc định

Thực sự dễ dàng để thay đổi biểu tượng đó thành một biểu tượng khác trong cài đặt, nhưng nếu bạn muốn thêm một số văn bản, đó có phải là đ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 hôm nay và tôi cũng sẽ bao gồm 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:

Kết quả cuối cùng sửa đổi sản phẩm Wordpress

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: Bất cứ điều gì bạn có thể làm để phân biệt trang web Divi / WooCommerce của mình với trang web 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 qua một trang web có văn bản về sản phẩm di chuột. Tất nhiên tôi đã thấy nó từ các trang web thương mại điện tử khác có các từ chứ không phải biểu tượng trên sản phẩm di chuột, vì vậy đây không phải là một khái niệm mới. Tôi chưa bao giờ phải làm điều này trên chủ đề Divi, và khi tôi nhìn thấy điều này, tôi đã tự đặt ra cho mình một thử thách và tôi 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 yêu cầu, bạn chắc chắn không ảnh hưởng đến hiệu suất blog của mình.

Trang web mẫu

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 tôi sẽ thay đổi màu của lớp phủ khi di chuột. Điều này cực kỳ dễ thực hiện trên Divi. Trong mô-đun cửa hàng của bạn, hãy chuyển đến phần " thông số thiết kế tiên tiến tiên tiến Và chọn màu của bạn.

Lựa chọn màu sắc divi

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

  1. Super article, cảm ơn bạn về mẹo này. Và nếu chúng ta muốn một văn bản khác nhau theo sản phẩm, làm thế nào?

Để 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