Corfu Private Cruises | Denis Marginas

A JavaScript observer was implemented on the website to monitor changes to the total price of WooCommerce products. This was necessary because the deposit amount depends on the selected product variation.
The observer dynamically updates the deposit option when selected, displaying a notification message that shows the price difference between the full amount and the deposit amount. This ensures users always see accurate deposit pricing based on their chosen variation.

The logic was added due to the behavior of the deposit plugin used on the product page, which allows customers to choose between paying in full or paying a deposit.

This script enables custom product option blocks (e.g., for cruise duration, boat capacity, boat type, or grouped fields) to stay in sync with standard WooCommerce variation selects. It detects user interactions with styled option blocks, updates the underlying select element accordingly, and triggers the necessary change events so WooCommerce can update variation prices, availability, and deposit behaviors properly. This improves compatibility between visual product selectors and WooCommerce’s native variation system.

This script enhances the number input fields created by the Product Addons plugin in WooCommerce by transforming them into a user-friendly component with a central value display flanked by customizable minus and plus buttons. It respects minimum, maximum, and step attributes, and dynamically updates both the hidden input and visible number. It provides a clean UI and better user interaction for numeric fields like quantities, hours, or people.

Displays a limited number of cruise feature items (from an ACF Repeater field added to the product/post) by default, with a +X more and Show less toggle to expand or collapse the full list.

Automatically updates the WooCommerce Add to Cart button text based on the selected date from a Product Add-Ons date field. If no date is selected, it shows Select a Date; otherwise, it changes to Book Now. This enhances booking flow for products like cruises or appointments.

Automatically adjusts the Number of Guests input field based on the selected boat type or capacity variation in a cruise product. When a user selects a boat type (variation), the script reads the number (e.g., capacity) and sets it as the maximum allowed in the number input field. It also updates the UI to reflect the max limit and prevents values above it. Useful when variations are displayed as custom visual selectors instead of standard dropdowns.

Adds custom filter buttons that dynamically show or hide Elementor loop items (boats) based on their passenger capacity. Each button targets loop items by reading the number of passengers inside a .filter-passengers span element and filters accordingly. Useful for categorizing boat listings into ranges like ≤7 passengers or 8–11 passengers with visual button toggles instead of traditional form elements.