WooCommerce Customizer Settings

WooCommerce Customizer Settings

Complete guide to customizing your WooCommerce store appearance using BuddyX Pro’s Customizer settings.

Overview

BuddyX Pro provides extensive WooCommerce customization options through the WordPress Customizer. You can change product layouts, sale badges, filters, and more without touching any code.

Accessing WooCommerce Settings

Method 1: Through Customizer

  1. Log in to WordPress dashboard
  2. Go to Appearance → Customize
  3. Look for the WooCommerce section
  4. You’ll see two sub-sections:

Method 2: Quick Access

  1. Visit your Shop page while logged in
  2. Click the Customize button in the admin bar
  3. Navigate to WooCommerce section

General Settings

Located at: Customize → WooCommerce → General

These settings affect all WooCommerce pages including product archives and single product pages.

Sale Badge Style

Control how sale badges appear on product images.

OptionAppearanceBest For
DefaultSmall rectangular badgeClean, minimal stores
SquareSquare badge with sharp cornersModern, bold designs
CircleCircular badgeFashion, premium brands

How to Change:

  1. Go to Customize → WooCommerce → General
  2. Find “Sale Badge Style”
  3. Select your preferred style
  4. Click Publish

Visual Preview: The Customizer shows live preview on your shop page.

Sale Badge Position

Choose where sale badges appear on product images.

PositionLocationBest For
RightTop-right corner (default)Most stores, RTL friendly
LeftTop-left cornerLTR languages, unique layouts

How to Change:

  1. Go to Customize → WooCommerce → General
  2. Find “Sale Badge Position”
  3. Select Left or Right
  4. Preview changes in Customizer
  5. Click Publish

Sale Badge Content

Display either text or percentage discount on sale badges.

Content TypeDisplayExampleBest For
Sale TextShows “Sale!” text“Sale!”Simple sales, flat discounts
PercentageShows discount %“-25%”Competitive pricing, variable discounts

How to Change:

  1. Go to Customize → WooCommerce → General
  2. Find “Sale Badge Content”
  3. Select “Sale Text” or “Percentage”
  4. Click Publish

Note: Percentage calculation works for both simple and variable products. For variable products, it shows the maximum discount percentage.

Shop Settings

Located at: Customize → WooCommerce → Shop

These settings control your main shop page and product archive pages (categories, tags).

Product Style

Choose from four different product card designs.

Default Style

  • Clean, standard WooCommerce layout
  • Product image on top
  • Title and price below
  • Add to Cart button visible

Best for: Traditional e-commerce stores, general merchandise

Style 1

  • Hover effects on product images
  • Quick actions appear on hover
  • Smooth transitions
  • Modern card design

Best for: Fashion stores, visual products, modern brands

Style 2

  • Minimal design with emphasis on images
  • Compact information display
  • Reduced spacing
  • Quick view integration ready

Best for: Photography stores, art galleries, portfolio-style shops

Style 3

  • Detailed product information visible
  • Specifications shown upfront
  • Category labels displayed
  • Information-dense layout

Best for: Electronics, books, technical products

How to Change:

  1. Go to Customize → WooCommerce → Shop
  2. Find “Product Style”
  3. Select your preferred style
  4. Preview different options
  5. Click Publish

Product Sort

Show or hide the product sorting dropdown.

When Enabled:

  • Customers can sort by: Popularity, Average rating, Latest, Price (Low to High), Price (High to Low)
  • Dropdown appears above product grid
  • Helpful for large catalogs

When Disabled:

  • Sorting dropdown is hidden
  • Products display in default order
  • Cleaner interface for small catalogs

How to Change:

  1. Go to Customize → WooCommerce → Shop
  2. Find “Product Sort” checkbox
  3. Check to enable, uncheck to disable
  4. Click Publish

Recommendation: Enable for stores with 20+ products, disable for smaller catalogs.

Product Result Count

Show or hide the product count text (e.g., “Showing 1-12 of 50 results”).

When Enabled:

  • Customers see total results
  • Pagination context is clear
  • Professional appearance

When Disabled:

  • Cleaner header area
  • More space for products
  • Simpler interface

How to Change:

  1. Go to Customize → WooCommerce → Shop
  2. Find “Product Result Count” checkbox
  3. Check to enable, uncheck to disable
  4. Click Publish

Recommendation: Enable for stores with multiple pages of products.

Products Per Page

Control how many products display on shop and archive pages.

Default: 16 products per page

Recommended Settings:

Store TypeProducts Per PageReason
Fashion12-16Large images need space
Electronics16-20Smaller images, more comparisons
Digital Products20-24Minimal space needed
Furniture8-12Large products, detailed viewing
General Store16Balanced layout

How to Change:

  1. Go to Customize → WooCommerce → Shop
  2. Find “Products Per Page” slider
  3. Drag slider to desired number (0-100)
  4. Preview the layout
  5. Click Publish

Performance Note: More products per page = longer load times. Balance user experience with performance.

Display Filter Button

Enable a mobile-friendly off-canvas filter sidebar.

When Enabled:

  • “Filter” button appears above products
  • Clicking opens sidebar with filter widgets
  • Mobile-optimized interface
  • Smooth slide-in animation

When Disabled:

  • No filter button
  • Regular sidebar layout (if sidebar is active)
  • Traditional desktop experience

How to Change:

  1. Go to Customize → WooCommerce → Shop
  2. Find “Display Filter Button” checkbox
  3. Check to enable
  4. Click Publish
  5. Add filter widgets: Widgets → Off Canvas Sidebar

Note: When enabled, a new widget area “Off Canvas Sidebar” appears in Appearance → Widgets.

Filter Button Text

Customize the text on the filter button.

Default: “Filter”

Popular Alternatives:

  • “Filter Products”
  • “Refine Search”
  • “Shop By Category”
  • “Find Products”

How to Change:

  1. Go to Customize → WooCommerce → Shop
  2. Find “Filter Button Text”
  3. Enter your custom text
  4. Click Publish

Note: This setting only appears when “Display Filter Button” is enabled.

Sidebar Settings

Located at: Customize → Sidebars → WooCommerce Sidebar

Control sidebar position for WooCommerce pages.

Sidebar Position Options

PositionLayoutBest For
NoneFull-width, no sidebarModern stores, focus on products
LeftSidebar on left, products on rightCategories-heavy stores
RightSidebar on right, products on leftMost common layout
BothSidebars on both sidesAdvanced filtering needs

How to Change:

  1. Go to Customize → Sidebars
  2. Find “WooCommerce Sidebar” option
  3. Select desired position
  4. Click Publish

Adding Sidebar Widgets

  1. Go to Appearance → Widgets
  2. Find WooCommerce Left Sidebar or WooCommerce Right Sidebar
  3. Add filter widgets:

What You Can Do

Create Visual Hierarchy

Combine these settings for impact:

  1. Highlight Sales:
  2. Minimal Modern Look:
  3. Information-Rich Layout:

Optimize for Mobile

Mobile-Friendly Settings:

  • Enable “Display Filter Button”
  • Keep “Products Per Page” at 12-16
  • Use Simple sale badge styles
  • Consider disabling sidebars on mobile (CSS)

A/B Testing Ideas

Test these combinations to find what works best:

Test 1: Sale Badge Effectiveness

  • Version A: Text-based badges
  • Version B: Percentage badges
  • Measure: Click-through rate on sale items

Test 2: Product Density

  • Version A: 12 products per page
  • Version B: 24 products per page
  • Measure: Time on site, pages viewed

Test 3: Sorting Options

  • Version A: Sort enabled
  • Version B: Sort disabled, curated order
  • Measure: Conversion rate

Recommended Shop Configurations by Store Type

Boutique Fashion Store

General Settings:
- Sale Badge Style: Circle
- Sale Badge Position: Right
- Sale Badge Content: Percentage

Shop Settings:
- Product Style: Style 1
- Product Sort: Enabled
- Result Count: Enabled
- Products Per Page: 12
- Filter Button: Enabled
- Filter Text: "Refine"

Sidebar: Right with categories

Why: Fashion customers browse visually and appreciate elegant design.

Electronics & Tech Store

General Settings:
- Sale Badge Style: Square
- Sale Badge Position: Right
- Sale Badge Content: Percentage

Shop Settings:
- Product Style: Style 3
- Product Sort: Enabled
- Result Count: Enabled
- Products Per Page: 16
- Filter Button: Enabled
- Filter Text: "Filter"

Sidebar: Left with specifications

Why: Tech buyers compare specs and need robust filtering.

Digital Downloads Store

General Settings:
- Sale Badge Style: Default
- Sale Badge Position: Right
- Sale Badge Content: Text

Shop Settings:
- Product Style: Style 2
- Product Sort: Enabled
- Result Count: Disabled
- Products Per Page: 24
- Filter Button: Disabled

Sidebar: None

Why: Digital products need less visual space, maximize content.

Premium Jewelry Store

General Settings:
- Sale Badge Style: Circle
- Sale Badge Position: Left
- Sale Badge Content: Percentage

Shop Settings:
- Product Style: Default
- Product Sort: Disabled (curated order)
- Result Count: Disabled
- Products Per Page: 8
- Filter Button: Disabled

Sidebar: None

Why: Premium products need space to breathe, curated presentation.

Large Multi-Category Store

General Settings:
- Sale Badge Style: Square
- Sale Badge Position: Right
- Sale Badge Content: Percentage

Shop Settings:
- Product Style: Default
- Product Sort: Enabled
- Result Count: Enabled
- Products Per Page: 16
- Filter Button: Enabled
- Filter Text: "Filter Products"

Sidebar: Right with multiple filters

Why: Large catalogs need comprehensive navigation and filtering.

Advanced Customization Tips

Using Child Theme

For CSS customizations beyond Customizer options:

  1. Create child theme
  2. Add custom CSS to override product styles
  3. Keep parent theme updates safe

Example: Custom badge colors

/* In child theme style.css */
.onsale {
    background-color: #ff6b6b !important;
    color: white !important;
}

Filter Hook Customization

Developers can use theme filters for advanced changes. See WooCommerce Hooks Reference.

Troubleshooting Settings

Settings not saving

Solution:

  1. Check browser console for JavaScript errors
  2. Disable other plugins temporarily
  3. Try different browser
  4. Clear browser cache

Changes not visible on frontend

Solution:

  1. Clear WordPress cache (if using caching plugin)
  2. Clear browser cache
  3. Try incognito/private browsing
  4. Regenerate CSS: Customize → Publish

Filter button not showing

Solution:

  1. Verify “Display Filter Button” is enabled
  2. Visit shop page (not homepage)
  3. Check for JavaScript conflicts
  4. Add widgets to Off Canvas Sidebar

Sale badge showing wrong percentage

Solution:

  1. Verify product has regular price set
  2. Verify sale price is lower than regular price
  3. For variable products, check all variations
  4. Clear transients: WooCommerce → Status → Tools

Common Questions

Can I customize badge colors?

Customizer doesn’t include color options for badges. Use custom CSS in child theme or Appearance → Customize → Additional CSS.

Will changing products per page affect SEO?

No, it’s a display setting only. Search engines crawl all products regardless of pagination.

Can I hide prices for certain customers?

Not through Customizer. Use a plugin like “WooCommerce Catalog Mode” or custom code.

How do I change product grid columns?

WooCommerce displays 4 columns by default. Change via code in child theme functions.php or use the “Products Per Row” option in some page builders.

Can I have different settings for categories?

Not natively. All settings apply globally. Consider using category-specific sidebar widgets for customization.

Best Practices

Performance

  • Don’t show too many products per page (max 24 for performance)
  • Enable caching to speed up repeated page loads
  • Optimize images before uploading
  • Use lazy loading for product images

User Experience

  • Enable sort options for catalogs with 20+ products
  • Show result counts for clarity on large catalogs
  • Use filter buttons for mobile-friendly filtering
  • Test on mobile devices before going live

Accessibility

  • Use descriptive filter button text (“Filter Products” vs. “Filter”)
  • Ensure badge text has good contrast
  • Test keyboard navigation on shop pages
  • Include alt text on all product images

Design Consistency

  • Match badge style to your overall brand
  • Keep product styles consistent across all archives
  • Use sidebars consistently (don’t mix left and right)
  • Maintain visual hierarchy with proper spacing

Related Settings

Need Help?

Documentation: docs.wbcomdesigns.com Support Forum: wbcomdesigns.com/support Customization Services: wbcomdesigns.com/hire

Email Support: support@wbcomdesigns.com

Last updated: January 31, 2026