WooCommerce Styling

  • Published
  • Last Update

These options are located in the Theme Options > WooCommerce Styling tab.

IMPORTANT NOTE

WooCommerce Styling tab is available only if WooCommerce plugin is activated on your site.

WooCommerce Styling options control the common styles of WooCommerce contents on your site. (Fig. 1)

WooCommerce Styling options Screenshot
Fig. 1. WooCommerce Styling options Screenshot.

WooCommerce Buttons

The options in WooCommerce Buttons section control the styles of buttons in WooCommerce contents.

WooCommerce Buttons Border Radius – Illustrated as A. Controls the border radius for WooCommerce buttons.

WooCommerce Buttons Border Color – Illustrated as B. Controls the border color for WooCommerce buttons.

WooCommerce Buttons Background Color – Illustrated as C. Controls the background color for WooCommerce buttons.

Display WooCommerce Buttons Background Gradient Colors – Illustrated as D. Turn on to display WooCommerce buttons background gradient colors. If set to OFF, WooCommerce Buttons Background Gradient Colors(Illustrated as E.) is not available.

WooCommerce Buttons Background Gradient Colors – Illustrated as E. Controls the background gradient colors for WooCommerce buttons. The From option is a value for the top linear-gradient color and the To option is a value for the bottom linear-gradient color. The background gradient colors are overlap over the background color.

WooCommerce Buttons Background Gradient Angle – Illustrated as F. Controls the background gradient angle for WooCommerce buttons. Degree(deg) unit.

WooCommerce Buttons Text Color – Illustrated as G. Controls the text color for WooCommerce buttons.

WooCommerce Breadcrumbs

WooCommerce Breadcrumbs Separator Style – Illustrated as H. Controls the items separator style of WooCommerce breadcrumb navigation. (Fig. 2)

IMPORTANT NOTE

WooCommerce Breadcrumbs Separator Style option is available only if Display WooCommerce Breadcrumbs is turn ON at Theme Options > Contnt Area > WooCommerce Products.

WooCommerce Breadcrumbs Separator Style.
Fig. 2. WooCommerce Breadcrumbs Separator Style.

WooCommerce Star Rating

WooCommerce Review Stars Color – Illustrated as I. Controls the color for WooCommerce review stars. (Fig. 3) See Woocommerce Ratings and Reviews

WooCommerce Review Stars.
Fig. 3. WooCommerce Review Stars.

WooCommerce Ribbon (Fig. 4)

WooCommerce Ribbon
Fig. 4. WooCommerce Ribbon.

 

Ribbon Background Color for On Sale – Illustrated as J. Controls the ribbon background color for products on sale.

Ribbon Text Color for On Sale – Illustrated as K. Controls the ribbon text color for products on sale.

Products List

In the Pagination, Page Text Translation Used For Page Numbers – Illustrated as L. Inserts custom text for the ‘page’. The ‘page’ text is used in the screen reader text and is printed before the current page number in the mobile version pagination on WooCommerce shop, products search result page, products categories and tags page. (Fig. 5)

In the Pagination, Page Text Translation Used For Page Numbers.
Fig. 5. In the Pagination, Page Text Translation Used For Page Numbers.

WooCommerce Bag View Content Area Menu Items (Fig. 6)

WooCommerce Bag View Content Area Menu Items
Fig. 6. WooCommerce Bag View Content Area Menu Items.

 

Shop – Illustrated as M. Turn on to display ‘Shop’ menu item in WooCommerce Bag View content area.

Cart – Illustrated as N. Turn on to display ‘Cart’ menu item in WooCommerce Bag View content area.

Checkout – Illustrated as O. Turn on to display ‘Checkout’ menu item in WooCommerce Bag View content area.

My Account – Illustrated as P. Turn on to display ‘My Account’ menu item in WooCommerce Bag View content area.