Chamevo adds a Customize button to your product pages and renders the product customizer with its own styles. You can adjust the button appearance, add CSS classes, and apply custom CSS to match your theme.

Change the Customize button style

Add CSS classes

1. Go to Chamevo → Settings → General → Layout.
2. Find Customize Button CSS Classes.
3. Enter one or more CSS classes (without the dot prefix). The default is fpd-secondary-btn.

Examples:

• Use your theme's button class (e.g., btn btn-primary) to match the theme style.
• Add multiple classes separated by spaces.

Change the button position (WooCommerce)

1. Go to Chamevo → Settings → WooCommerce → Product Page.
2. Set Customization Button Position:
   • After Short Description — below the product excerpt.
   • Before Add-to-Cart Button — directly above the Add to Cart button.
   • After Add-to-Cart Button — directly below the Add to Cart button.

Replace Add-to-Cart in catalog listings

1. Go to Chamevo → Settings → WooCommerce → Catalog Listing.
2. Set Customize Button Position:
   • Replace Add-to-Cart button — replaces the default button with the Customize button.
   • End of Catalog Item — adds the button at the end of the product card.

Apply custom CSS

Add custom CSS to your theme or via Appearance → Customize → Additional CSS in WordPress.

Common CSS adjustments

Change the Customize button color:

.fpd-secondary-btn {
  background-color: #3498db;
  color: #ffffff;
  border: none;
}

.fpd-secondary-btn:hover {
  background-color: #1d8ad3;
}

Adjust the customizer container width:

.fpd-container {
  max-width: 100%;
}