WooCommerce (Customizer) – JurnalPress Theme
The WooCommerce panel in the Customizer lets you configure various aspects of your store’s appearance and behavior—from product column counts, integrating WooCommerce elements into the header, to colors for key elements such as prices, badges, and buttons.
All settings in this panel are designed to be easily customized without writing code. The panel appears in the Customizer as WooCommerce and centralizes settings directly related to store features.
Info
This option is enabled if you activate the WooCommerce plugin in WordPress.
Settings Location
Appearance → Customize → WooCommerceThis panel includes the following main sections:
- Product Catalog
- Theme Settings
- WooCommerce Color
Product Catalog
This section is directly connected to WooCommerce’s product catalog settings.
Related Columns
Label: Related Columns
Description: How many products should be shown per row?
Type: Select
Default: 3 Columns
Function:
Set the number of columns for Related Products displayed per row on the product detail page.
Available options:
- 2 Columns
- 3 Columns
- 4 Columns
- 5 Columns
- 6 Columns
Notes:
- The more columns, the smaller the product cards.
- Adjust based on content width and target devices (desktop vs mobile).
Theme Settings
The Theme Settings section contains options for integrating WooCommerce elements with the theme layout, especially in the header and menu areas.
Cart Button from Header
Label: Cart button from header
Type: Toggle
Default: On
Function:
Show or hide the WooCommerce Cart button in the theme header.
Common uses:
- Enable for online stores focused on transactions.
- Disable for a more minimal header appearance.
Login Button from Menu
Label: Login button from menu
Type: Toggle
Default: On
Function:
Display the WooCommerce Login / My Account button in the navigation menu.
Notes:
- Useful for stores with customer accounts.
- The button typically changes based on user status (login / logout).
WooCommerce Color
This section lets you adjust the colors of key WooCommerce elements to match your theme’s branding.
Price Color
Label: Price Color
Type: Color Picker
Function:
Set the text color for product prices across WooCommerce pages.
Badge Text Color
Label: Badge Text Color
Type: Color Picker
Function:
Set the text color for product badges such as:
- Sale
- Featured
- Out of Stock
Badge Background Color
Label: Badge Background Color
Type: Color Picker
Function:
Set the background color for product badges.
Tips:
Use contrasting colors to ensure badges remain readable.
Second Button Color
Label: Second Button Color
Type: Color Picker
Function:
Set the text color for WooCommerce secondary buttons, for example:
- View Cart
- Wishlist
- Secondary Action Button
Second Button Background Color
Label: Second Button Background Color
Type: Color Picker
Function:
Set the background color for WooCommerce secondary buttons.
Recommendation:
Use colors that are within the same palette as your primary theme colors for visual consistency.
Summary
The WooCommerce panel in the Customizer gives you full control over:
- Product layout
- Store feature integration in the header and menu
- Consistent colors for WooCommerce elements
With these settings, you can tailor your store’s appearance without additional code customization.
