1. Home
  2. Docs
  3. Leo Product Recommendations for WooCommerce
  4. Settings
  5. Style Settings

Style Settings

Style setting is all about popup and product styling.


Popup Color Settings: (Pro Feature)

To adjust popup modal color use these fields. Follow the screenshot bellow properly understand.


Product Color Setting: (Pro Feature)

Most of the cases product color will inherit from your theme. For further adjustment of recommended product’s color, you can use these fields.


Custom CSS:

You can use custom css field for further adjustment by writing CSS.

Change notification text font:

Change notification text font use following code and replace font family with your expected font.

.lpr-modal .lpr-modal-content .lpr-message .lpr-notification-text,
.lpr-modal .lpr-modal-content .lpr-message a.lpr-cart-button {
   font-family: 'Noto Serif', serif;
}

Change modal heading font:

To Change modal heading font, use the following code and change font family with your expected font.

.lpr-modal .lpr-modal-content .lpr-modal-head h2.modal-heading {
   font-family: 'Cormorant Garamond', serif;
}

Change product title font:

To Change product title font, use following code snippet and replace font by your require font.

.lpr-modal .lpr-modal-content .recommended-products-slider .single-lpr h2.woocommerce-loop-product__title,
.lpr-modal .lpr-modal-content ul.recommended-products-list li.single-lpr h2.woocommerce-loop-product__title {
   font-family: 'Times New Roman', serif;
}

Change product price:

To change product price font use following snippet and replace font name with your expected font.

.lpr-modal .lpr-modal-content .recommended-products-slider .single-lpr .price, .lpr-modal .lpr-modal-content ul.recommended-products-list li.single-lpr .price{
   font-family: 'Times New Roman', serif;
}

Change product add to cart button:

To change product add to cart button’s font use following code snippet and replace font name with your expected font.

.lpr-modal .lpr-modal-content .recommended-products-slider .single-lpr a.button, .lpr-modal .lpr-modal-content ul.recommended-products-list li.single-lpr a.button {
  font-family: 'Times New Roman', serif;
}

You also can use Custom CSS field to change all other font attribute like Font Size, Font Style, Font Weight, etc.

Was this article helpful to you? Yes No

How can we help?