Articles on: WooCommerce

Customizing the layout of WooCommerce product pages

If WooCommerce is enabled, an additional WooCommerce tab appears in the settings. Here, you can control how the Product Designer integrates into WooCommerce product pages and checkout flow. All options can be set globally in Settings or per product in the Individual Product Settings.



Step 1: Access WooCommerce Settings


  1. Go to your WordPress Dashboard. Navigate to: Chamevo → Settings
  2. Open WooCommerce Menu
  3. Select Product Page Tab
  4. Configure the options for product page layout, pricing, and add-to-cart behavior and Save Changes!





Step 2: Product Page Layout Options


Product Designer Position: Choose where the Product Designer appears on the product page.


  • Replace Product Image – The Product Designer replaces the default WooCommerce product image.
  • After Product Title – The Product Designer appears directly below the product title.
  • After Summary – The Product Designer is displayed below the summary section (price, add-to-cart button, etc.).
  • Custom Hook – Add the Product Designer anywhere in your theme by placing the following code into the relevant template file: <?php do_action( 'fpd_product_designer' ); ?>


Step 3: Pricing & Quoting Options


  • Get a Quote: Hide pricing and allow customers to submit customized products as quote requests instead of purchasing directly.
  • Customize Button: Variation Needed: Show the Customize button only after a variation has been selected.
  • Disable Price Calculation: Disable all price calculations from the product designer.


Step 4: Add-to-Cart & Checkout Options


Add-to-Cart: Load… Choose which product version should load after a customized product is added to the cart:


  • Customized Product
  • Default Product


AJAX Add-to-Cart Mode:


  • Enable AJAX add-to-cart (if supported by your theme) to prevent page reloads.


Lightbox Options:


  • Update Product Image: Replace the default WooCommerce product image with the customized design after clicking Done in the lightbox.
  • Add-to-Cart: Add the customized product directly to the cart after clicking Done in the lightbox.



Use Get a Quote mode if your store sells customizable products that require manual pricing, such as bulk items or business orders.

Updated on: 22/10/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!