Trong một hướng dẫn trước, chúng tôi bạn đã giới thiệu Divi. Đối với những người chưa biết, Divi là một theme 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ố những plugin khác mà chúng tôi có WooCommerce. Hôm nay chúng tôi sẽ hướng dẫn bạn cách tạo hoạt ảnh khác cho sản phẩm của bạn WooCommerce.

Đôi khi phong cách của WooCommerce có thể hơi thiếu sót, đặ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ẽ có 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:

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:

Để 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 đang di chuột. Tất nhiên, tôi đã thấy các trang web thương mại điện tử khác có chữ thay vì 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 một Chủ đề Divi, và khi tôi nhìn thấy điều này, 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 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.

.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.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expand "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] TẢI XUỐNG TRANG CHỦ [/ vcex_button] [/ width_column] [»vc_column] »1/2 ″] [vcex_button url =" https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials "target =" blank "layout =" expand "align =" center " font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] TẢI XUỐNG DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Hướng dẫn Divi khác