WP SITES

3095 Coded Tutorials & 297 Plugins

Image Overlay Product Customizer for WooCommerce

$150.00

The plugin includes the following features :

Product Customization

  • Custom text input field
  • Attribute taxonomy term selection dropdown for overlay images
  • Live preview of customizations

Image Overlay Options

  • Background image support ( Best Results 500px width )
  • Taxonomy term image overlay ( Crop first before upload based on background image )
  • Custom text overlay
  • Position control for overlays

You can select from 2 background image options :

  1. Upload a custom background image or
  2. Use the main product image native to WooCommerce

See the screenshots below for more detail.

Product Name Customization Settings

  • Replace Product Name – Replace the product name with the taxonomy and term
  • Append to Product Name – Append the taxonomy and term to the product name
  • Include Custom Text – Include the custom text in the product name

Variable Products

Variable products now have full customization support:

  1. Enable Customization: Check the “Enable Customization” checkbox in the Customization tab to activate customization for the variable product and all its variations.
  2. Variation Background Images: Each variation can have its own background image, which can be set in the variation settings.
  3. Overlay Settings:
  • Control whether the background image overlays the variation image or vice versa
  • Set overlay image size as a percentage (1-100%)
  • Position overlay images in 9 different positions

4. Custom Text: Enable custom text input for variable products, which will be displayed in the cart and saved to orders.

5. Cart Display: Custom text and product information are displayed in both classic and block cart formats.

    When customization is enabled, the settings from the parent product are automatically applied to all variations, ensuring consistent customization options across all product variations.

    Cart & Order Integration

    • Custom data saved in cart
    • Custom data saved in orders
    • Custom data displayed in order emails
    • Custom data displayed in order received page

    Admin Features

    • Attribute taxonomy term management
    • Image upload for terms
    • Customization settings per product
    • Option to replace/append product name
    • Option to include custom text in cart

    Frontend Display

    • Live preview of customizations
    • Form validation
    • AJAX image loading
    • Responsive design

    Frontend & Backend Screenshots

    Shows the settings and frontend usage. Click to enlarge.

    Video Demo

    Shows how you can create different customizable products per product page.

    Usage

    Once you install and activate the plugin, create a new Customizable Product and click the Customization tab to access the settings. You’ll then need to :

    1. Go to Products > Attributes and add a new attribute
    2. Then click Configure terms and add terms for your attribute
    3. You can also add small images to each term which will be displayed over your background image on the single product page.

    Note : Background image sizes work best at 500px width. Also, crop your attribute term thumbnail images so they’re small enough to overlay within your main background image.

    Works with block ( Gutenberg ) and non block themes ( Visual Editor ).

    Product Type Registration :

    • woocommerce_product_class – Registers custom product class
    • product_type_selector – Adds custom product type to selector
    • woocommerce_product_data_tabs – Modifies product data tabs
    Product Data Management :

    • woocommerce_product_data_tabs – Adds custom product data tab
    • woocommerce_product_data_panels – Adds custom fields to product data panel
    • woocommerce_process_product_meta – Saves custom product data
    Cart and Order Processing :

    • woocommerce_add_cart_item_data – Captures custom fields in cart
    • woocommerce_get_cart_item_from_session – Retrieves cart item from session
    • woocommerce_checkout_create_order_line_item – Saves customizations to order
    • woocommerce_cart_item_name – Modifies product name in cart
    Term/Attribute Management :

    • product_attribute_add_form_fields – Adds image field to new terms
    • {$taxonomy}_edit_form_fields – Edits term image field
    • {$taxonomy}_add_form_fields – Adds image field to new terms
    • edited_{$taxonomy} – Saves edited term image
    • created_{$taxonomy} – Saves new term image
    • manage_edit-{$taxonomy}_columns – Adds image column to term list
    • manage_{$taxonomy}_custom_column – Displays term images in column
    AJAX Endpoints :

    • wp_ajax_get_term_image – AJAX endpoint for term images
    • wp_ajax_nopriv_get_term_image – Public AJAX endpoint for term images
    Frontend Display :

    • woocommerce_before_add_to_cart_button – Adds custom fields to product display
    • woocommerce_customizable_product_add_to_cart – Custom add to cart form
    Admin Interface :

    • admin_enqueue_scripts – Enqueues admin scripts
    System :

    • plugins_loaded – Initializes plugin
    • active_plugins – Checks for WooCommerce dependency
    • init – Registers term columns and fields

    Reviews

    There are no reviews yet.

    Be the first to review “Image Overlay Product Customizer for WooCommerce”

    Includes 1 year updates and support

    Priority Support

    Unlimited Sites

    Lifetime Usage

    Contact Us If You Have Any Questions