---
title: Style Settings
description: "## **Primary and secondary color** You can change the primary and secondary color from **WPCafe -> Settings -> Style**. This color will apply to the Food menu, Reservation form, Mini cart design, and so on. ![](https://themewinter.com/docs/plugins/wp-content/uploads/sites/3/2022/04/cafe_primary_color_change-1024x337.png) ## **Cart Icon** In…"
url: "https://themewinter.com/docs/plugins/wp-cafe/style-settings/"
updated: "2024-04-29"
category: WPCafe / Style Settings
---

# Style Settings

## **Primary and secondary color**

You can change the primary and secondary color from **WPCafe -> Settings -> Style**. This color will apply to the Food menu, Reservation form, Mini cart design, and so on.

![](https://themewinter.com/docs/plugins/wp-content/uploads/sites/3/2022/04/cafe_primary_color_change-1024x337.png)

## **Cart Icon**

In WPCafe, the users can use their choosen icon for the food menu cart. Go to the **WPCafe -> Settings -> Style** and insert the cart icon class that you want to use.

![](https://themewinter.com/docs/plugins/wp-content/uploads/sites/3/2022/04/cafe_cart_icon_change-1024x332.png)

## **Menu PopUp Icon**

In WPCafe, the users aslo can use their choosen icon for the food menu popup cart. Go to the **WPCafe -> Settings -> Style** and insert the cart icon class that you want to use.

![](https://themewinter.com/docs/plugins/wp-content/uploads/sites/3/2022/04/cafe_popup_icon_change-1024x385.png)

**Frontend veiw for cart and popup icon:**

![Frontend veiw for cart and popup icon](https://themewinter.com/docs/plugins/wp-content/uploads/sites/3/2024/04/image-10-1024x517.png)

**NOTE:**Make sure the icon class that you are using must be loaded in the theme or plugin. Otherwise, the icon will not display properly.

**Font Awesome:**

It's the most popular font library which is loaded by default from most of the theme/plugins. There are 2 variants of font-awesome. For using the font awesome class, click here: [https://fontawesome.com/v5.15/icons?d=gallery&p=2](https://fontawesome.com/v5.15/icons?d=gallery&p=2). If it's not working, you need to add the CSS lines in Additional CSS.

Font Awesome 5: 

.fas.fa-cart-plus{
 font-family: "Font Awesome 5 Free" !important;
 font-weight: 900;
}

Font Awesome 4:

.fas.fa-cart-plus{
 font-family: "FontAwesome"!important;
 font-weight: 900;
}

**Dashicon:**

You can also use the dash icon. Links here: [https://developer.wordpress.org/resource/dashicons/#heading](https://developer.wordpress.org/resource/dashicons/#heading). If it's not working, you need to add the CSS lines in Additional CSS.

Font Awesome 5:
 .fas.fa-cart-plus{
 font-family:  dashicons !important;
 font-weight: 900;
}

## **WooCommerce Layout Override**

If the user want to overrride the WooCommerce product variation layout in popup and single page and WooCommerce Product Details, Cart, Checkout and Thank you page layout, then enable the **"Product Variation List Layout Override?"** and **"Override WooCommerce Default Layout?"** option from **WPCafe -> Settings -> Style**.

![](https://themewinter.com/docs/plugins/wp-content/uploads/sites/3/2022/04/cafe_layout_override-1024x457.png)