Newest Woo checkout block HTML structure support. Support previewing …

…purchase button styles in Elementor pro.
vendidero · Nov 4, 2024 · e44bec1 · e44bec1
1 parent 1e62719
commit e44bec1
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 5 deletions.
diff --git a/assets/js/blocks/checkout/style.scss b/assets/js/blocks/checkout/style.scss
@@ -67,7 +67,7 @@
    .wc-block-checkout.is-mobile,
    .wc-block-checkout.is-medium,
    .wc-block-checkout.is-small {
-     flex-direction: column-reverse;
+     flex-direction: column-reverse !important;
 
      .wc-gzd-checkout-submit {
        position: relative;

diff --git a/includes/compatibility/class-wc-gzd-compatibility-elementor-pro.php b/includes/compatibility/class-wc-gzd-compatibility-elementor-pro.php
@@ -102,6 +102,45 @@ public static function disable_ajax_callback() {
 	}
 
 	public function load() {
+		/**
+		 * Dynamically adjust the purchase button selectors by replacing the very restrictive #payment parent
+		 * to allow previewing the pay now button added by Germanized.
+		 */
+		add_action(
+			'elementor/element/after_section_end',
+			function ( $element, $section_id, $args ) {
+				if ( is_a( $element, '\ElementorPro\Modules\Woocommerce\Widgets\Checkout' ) ) {
+					$control = $element->get_controls( 'purchase_button_padding' );
+
+					if ( $control ) {
+						$controls = $element->get_controls();
+
+						foreach ( $controls as $control_id => $control ) {
+							if ( strstr( $control_id, 'purchase_button' ) && array_key_exists( 'selectors', $control ) ) {
+								$new_selectors = $control['selectors'];
+
+								foreach ( $new_selectors as $k => $selector ) {
+									$new_k                   = str_replace( '#payment #place_order', '#place_order', $k );
+									$new_selectors[ $new_k ] = $selector;
+								}
+
+								if ( $new_selectors !== $control['selectors'] ) {
+									$element->update_control(
+										$control_id,
+										array(
+											'selectors' => $new_selectors,
+										)
+									);
+								}
+							}
+						}
+					}
+				}
+			},
+			10,
+			3
+		);
+
 		/*
 		 * Use a higher priority here to prevent other plugins (e.g. The Plus Addons for Elementor) from
 		 * de-registering our widgets.

diff --git a/src/Blocks/Checkout.php b/src/Blocks/Checkout.php
@@ -132,12 +132,25 @@ function ( $content, $block ) {
 					if ( ! apply_filters( 'woocommerce_gzd_disable_checkout_block_adjustments', false ) ) {
 						$content = str_replace( 'wp-block-woocommerce-checkout ', 'wp-block-woocommerce-checkout wc-gzd-checkout ', $content );
 
-						// Find the last 2 closing divs of the checkout block and replace them with our custom submit wrap.
-						preg_match( '/<\/div>(\s*)<\/div>$/', $content, $matches );
+						preg_match( '/<\/div>(\s*)<div[^<]*?data-block-name="woocommerce\/checkout-fields-block"/', $content, $matches );
 
+						/**
+						 * Latest Woo Checkout Block version inserts the total blocks before checkout fields
+						 */
 						if ( ! empty( $matches ) ) {
-							$replacement = '<div class="wc-gzd-checkout-submit"><div data-block-name="woocommerce/checkout-order-summary-block" class="wp-block-woocommerce-checkout-order-summary-block"></div><div data-block-name="woocommerce/checkout-actions-block" class="wp-block-woocommerce-checkout-actions-block"></div></div></div></div>';
-							$content     = preg_replace( '/<\/div>(\s*)<\/div>$/', $replacement, $content );
+							$content     = str_replace( 'wc-gzd-checkout ', 'wc-gzd-checkout wc-gzd-checkout-v2 ', $content );
+							$replacement = '<div class="wc-gzd-checkout-submit"><div data-block-name="woocommerce/checkout-order-summary-block" class="wp-block-woocommerce-checkout-order-summary-block"></div><div data-block-name="woocommerce/checkout-actions-block" class="wp-block-woocommerce-checkout-actions-block"></div></div>' . $matches[0];
+							$content     = preg_replace( '/<\/div>(\s*)<div[^<]*?data-block-name="woocommerce\/checkout-fields-block"/', $replacement, $content );
+						} else {
+							/**
+							 * Older Woo versions used to insert the total block as last item
+							 */
+							preg_match( '/<\/div>(\s*)<\/div>$/', $content, $matches );
+
+							if ( ! empty( $matches ) ) {
+								$replacement = '<div class="wc-gzd-checkout-submit"><div data-block-name="woocommerce/checkout-order-summary-block" class="wp-block-woocommerce-checkout-order-summary-block"></div><div data-block-name="woocommerce/checkout-actions-block" class="wp-block-woocommerce-checkout-actions-block"></div></div></div></div>';
+								$content     = preg_replace( '/<\/div>(\s*)<\/div>$/', $replacement, $content );
+							}
 						}
 					}