cartflows / modules / elementor / widgets / class-cartflows-el-checkout-form.php

class-cartflows-el-checkout-form.php in CartFlows – Funnel Builder & Checkout Plugin for WooCommerce 3.3.0, at modules/elementor/widgets/class-cartflows-el-checkout-form.php

1,090 lines 38.1 KB

Raw Download Zip

1	<?php
2	/**
3	* Elementor Classes.
4	*
5	* @package cartflows
6	*/
7
8	use Elementor\Controls_Manager;
9	use Elementor\Widget_Base;
10	use Elementor\Group_Control_Typography;
11	use Elementor\Group_Control_Background;
12	use Elementor\Group_Control_Border;
13	use Elementor\Group_Control_Box_Shadow;
14
15	if ( ! defined( 'ABSPATH' ) ) {
16	exit; // Exit if accessed directly.
17	}
18
19	/**
20	* Checkout Form Widget
21	*
22	* @since 1.6.15
23	*/
24	class Cartflows_Checkout_Form extends Widget_Base {
25
26	/**
27	* Module should load or not.
28	*
29	* @since 1.6.15
30	* @access public
31	* @param string $step_type Current step type.
32	*
33	* @return bool true\|false.
34	*/
35	public static function is_enable( $step_type ) {
36
37	if ( 'checkout' === $step_type && wcf()->is_woo_active ) {
38	return true;
39	}
40	return false;
41	}
42
43	/**
44	* Retrieve the widget name.
45	*
46	* @since 1.6.15
47	*
48	* @access public
49	*
50	* @return string Widget name.
51	*/
52	public function get_name() {
53	return 'checkout-form';
54	}
55
56	/**
57	* Retrieve the widget title.
58	*
59	* @since 1.6.15
60	*
61	* @access public
62	*
63	* @return string Widget title.
64	*/
65	public function get_title() {
66	return __( 'Checkout Form', 'cartflows' );
67	}
68
69	/**
70	* Retrieve the widget icon.
71	*
72	* @since 1.6.15
73	*
74	* @access public
75	*
76	* @return string Widget icon.
77	*/
78	public function get_icon() {
79	return 'wcf-brand-icon wcf-el-icon-checkout-form';
80
81	}
82
83	/**
84	* Retrieve the list of categories the widget belongs to.
85	*
86	* Used to determine where to display the widget in the editor.
87	*
88	* Note that currently Elementor supports only one category.
89	* When multiple categories passed, Elementor uses the first one.
90	*
91	* @since 1.6.15
92	*
93	* @access public
94	*
95	* @return array Widget categories.
96	*/
97	public function get_categories() {
98	return array( 'cartflows-widgets' );
99	}
100
101	/**
102	* Settings
103	*
104	* @since 1.6.15
105	* @var object $settings
106	*/
107	public static $settings;
108
109	/**
110	* Retrieve Widget Keywords.
111	*
112	* @since 1.6.15
113	* @access public
114	*
115	* @return string Widget keywords.
116	*/
117	public function get_keywords() {
118	return array( 'cartflows', 'checkout', 'form' );
119	}
120
121	/**
122	* Global Primary Color
123	*
124	* @since 2.0.0
125	* @access public
126	*
127	* @var string $gcp_primary_theme_color Primary Color.
128	* @return string $gcp_primary_theme_color Primary Color.
129	*/
130	public static $gcp_primary_theme_color = '';
131
132	/**
133	* Global Primary Text Color
134	*
135	* @since 2.0.0
136	* @access public
137	*
138	* @var string string $gcp_primary_text_color Primary Text Color.
139	* @return string $gcp_primary_text_color Primary Text Color.
140	*/
141	public static $gcp_primary_text_color = '';
142
143	/**
144	* Global Secondary Color
145	*
146	* @since 2.0.0
147	* @access public
148	*
149	* @var string $gcp_secondary_theme_color Secondary Color.
150	* @return string $gcp_secondary_theme_color Secondary Color.
151	*/
152	public static $gcp_secondary_theme_color = '';
153
154	/**
155	* Register cart controls controls.
156	*
157	* @since 1.6.15
158	* @access protected
159	*/
160	protected function register_controls() {
161
162	// Assign global colors to the global vars.
163	$flow_id = wcf()->utils->get_flow_id();
164	self::$gcp_primary_theme_color = ! empty( $flow_id ) ? get_post_meta( $flow_id, 'wcf-gcp-primary-color', true ) : '';
165	self::$gcp_secondary_theme_color = ! empty( $flow_id ) ? get_post_meta( $flow_id, 'wcf-gcp-secondary-color', true ) : '';
166	self::$gcp_primary_text_color = ! empty( $flow_id ) ? get_post_meta( $flow_id, 'wcf-gcp-primary-text-color', true ) : '';
167
168	/**
169	* Self::$gcp_primary_font_family = !empty( $flow_id ) ? get_post_meta( $flow_id, 'wcf-gcp-primary-base-font-family', true ) : '';
170	* self::$gcp_primary_font_family = ! empty( $gcp_primary_font_family ) ? str_replace("'", "", explode( ',', $gcp_primary_font_family, 2 )[0] ) : '';
171	*/
172
173	// Content Tab.
174	$this->register_general_content_controls();
175
176	// Style Tab.
177	$this->register_global_style_controls();
178	$this->register_heading_style_controls();
179	$this->register_input_style_controls();
180	$this->register_button_style_controls();
181	$this->register_payment_section_style_controls();
182	$this->register_error_style_controls();
183	$this->register_order_review_style_controls();
184	}
185
186	/**
187	* Function to get layout types.
188	*
189	* @since 1.6.15
190	* @access protected
191	*/
192	protected function get_layout_types() {
193
194	$layout_options = array();
195
196	if ( ! _is_cartflows_pro() ) {
197	$layout_options = array(
198	'modern-checkout' => __( 'Modern Checkout', 'cartflows' ),
199	'modern-one-column' => __( 'Modern One Column', 'cartflows' ),
200	'one-column' => __( 'One Column', 'cartflows' ),
201	'two-column' => __( 'Two Column', 'cartflows' ),
202	'two-step' => __( 'Two Step ( PRO )', 'cartflows' ),
203	'multistep-checkout' => __( 'MultiStep Checkout ( PRO )', 'cartflows' ),
204	);
205	} else {
206	$layout_options = array(
207	'modern-checkout' => __( 'Modern Checkout', 'cartflows' ),
208	'modern-one-column' => __( 'Modern One Column', 'cartflows' ),
209	'one-column' => __( 'One Column', 'cartflows' ),
210	'two-column' => __( 'Two Column', 'cartflows' ),
211	'two-step' => __( 'Two Step', 'cartflows' ),
212	'multistep-checkout' => __( 'MultiStep Checkout', 'cartflows' ),
213	);
214	}
215
216	return $layout_options;
217	}
218
219	/**
220	* Function to get skin types.
221	*
222	* @since 1.6.15
223	* @access protected
224	*/
225	protected function get_skin_types() {
226
227	$skin_options = array(
228	'default' => __( 'Default', 'cartflows' ),
229	'modern-label' => __( 'Modern Labels', 'cartflows' ),
230	);
231
232	return $skin_options;
233	}
234
235	/**
236	* Register General Controls.
237	*
238	* @since 1.6.15
239	* @access protected
240	*/
241	protected function register_general_content_controls() {
242
243	$this->start_controls_section(
244	'section_general_fields',
245	array(
246	'label' => __( 'Layout', 'cartflows' ),
247	)
248	);
249
250	$this->add_control(
251	'layout',
252	array(
253	'label' => __( 'Select Layout', 'cartflows' ),
254	'type' => Controls_Manager::SELECT,
255	'default' => 'modern-checkout',
256	'options' => $this->get_layout_types(),
257	)
258	);
259
260	if ( ! _is_cartflows_pro() ) {
261
262	$this->add_control(
263	'layout_upgrade_pro',
264	array(
265	'type' => Controls_Manager::RAW_HTML,
266	/* translators: %s admin link */
267	'raw' => sprintf( __( 'This feature is available in the CartFlows higher plan. <a href="%s" target="_blank" rel="noopener">Upgrade Now!</a>.', 'cartflows' ), CARTFLOWS_DOMAIN_URL ),
268	'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
269	'condition' => array(
270	'layout' => array( 'two-step', 'multistep-checkout' ),
271	),
272	)
273	);
274	}
275
276	$this->end_controls_section();
277	}
278
279	/**
280	* Register General Style Controls.
281	*
282	* @since 1.6.15
283	* @access protected
284	*/
285	protected function register_global_style_controls() {
286	$this->start_controls_section(
287	'section_general_style_fields',
288	array(
289	'label' => __( 'Global', 'cartflows' ),
290	'tab' => Controls_Manager::TAB_STYLE,
291	)
292	);
293
294	$this->add_control(
295	'global_primary_color',
296	array(
297	'label' => __( 'Primary Color', 'cartflows' ),
298	'type' => Controls_Manager::COLOR,
299	'default' => self::$gcp_primary_theme_color,
300	'selectors' => array(
301	'{{WRAPPER}} .wcf-embed-checkout-form,
302	{{WRAPPER}} .wcf-embed-checkout-form-modern-checkout,
303	.cartflows_step-template .select2-container--default .select2-results__option--highlighted[aria-selected],
304	.cartflows_step-template .select2-container--default .select2-results__option--highlighted[data-selected]' => '--wcf-primary-color: {{VALUE}};',
305
306	/* Only Modern Checkout related CSS */
307	'{{WRAPPER}} .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce form .form-row input.input-text:focus,
308	{{WRAPPER}} .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce form .form-row textarea:focus,
309	{{WRAPPER}} .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce #order_review .wcf-custom-coupon-field input.input-text:focus' => 'box-shadow: 0 0 0 1px {{VALUE}};',
310
311	/* Only Two-Step Checkout related CSS */
312	'{{WRAPPER}} .wcf-embed-checkout-form-two-step .wcf-embed-checkout-form-steps .step-one.wcf-current:before,
313	{{WRAPPER}} .wcf-embed-checkout-form-two-step .wcf-embed-checkout-form-steps .step-two.wcf-current:before' => 'background-color: {{VALUE}};',
314
315	'{{WRAPPER}} .wcf-embed-checkout-form-two-step .wcf-embed-checkout-form-note:before' => 'border-top-color: {{VALUE}};',
316
317	'{{WRAPPER}} .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns .wcf-next-button,
318	{{WRAPPER}} .wcf-embed-checkout-form-two-step .wcf-embed-checkout-form-note,
319	{{WRAPPER}} .wcf-embed-checkout-form .wcf-custom-coupon-field button.wcf-submit-coupon,
320	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce #order_review button,
321	body .wcf-pre-checkout-offer-wrapper #wcf-pre-checkout-offer-content button.wcf-pre-checkout-offer-btn' => 'background-color: {{VALUE}}; border-color: {{VALUE}};',
322	),
323	)
324	);
325
326	$this->add_control(
327	'global_text_color',
328	array(
329	'label' => __( 'Text Color', 'cartflows' ),
330	'type' => Controls_Manager::COLOR,
331	'default' => self::$gcp_primary_text_color,
332	'selectors' => array(
333	'{{WRAPPER}} .wcf-embed-checkout-form,
334	{{WRAPPER}} .wcf-embed-checkout-form-modern-checkout' => '--wcf-text-color: {{VALUE}}; --wcf-link-color: {{VALUE}};',
335	),
336	)
337	);
338
339	$this->add_group_control(
340	Group_Control_Typography::get_type(),
341	array(
342	'name' => 'global_typography',
343	'label' => 'Typography',
344	'default' => '',
345	'selector' => '{{WRAPPER}} .cartflows-elementor__checkout-form .wcf-embed-checkout-form',
346	)
347	);
348
349	$this->end_controls_section();
350	}
351
352	/**
353	* Register Heading Style Controls.
354	*
355	* @since 1.6.15
356	* @access protected
357	*/
358	protected function register_heading_style_controls() {
359	$this->start_controls_section(
360	'section_heading_style_fields',
361	array(
362	'label' => __( 'Heading', 'cartflows' ),
363	'tab' => Controls_Manager::TAB_STYLE,
364	)
365	);
366
367	$this->add_control(
368	'heading_text_color',
369	array(
370	'label' => __( 'Color', 'cartflows' ),
371	'type' => Controls_Manager::COLOR,
372	'default' => self::$gcp_secondary_theme_color,
373	'selectors' => array(
374	'{{WRAPPER}} .wcf-embed-checkout-form, {{WRAPPER}} .wcf-embed-checkout-form-modern-checkout' => '--wcf-heading-color: {{VALUE}};',
375	),
376	)
377	);
378
379	$this->add_group_control(
380	Group_Control_Typography::get_type(),
381	array(
382	'name' => 'heading_typography',
383	'label' => 'Typography',
384	'selector' => '{{WRAPPER}} .cartflows-elementor__checkout-form .wcf-embed-checkout-form .woocommerce h3,
385	{{WRAPPER}} .cartflows-elementor__checkout-form .wcf-embed-checkout-form .woocommerce h3 span,
386	{{WRAPPER}} .cartflows-elementor__checkout-form .wcf-embed-checkout-form .woocommerce-checkout #order_review_heading,
387	{{WRAPPER}} .cartflows-elementor__checkout-form .wcf-embed-checkout-form-two-step .wcf-embed-checkout-form-steps .step-name,
388	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce .col2-set .col-1 h3,
389	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce .col2-set .col-2 h3',
390	)
391	);
392
393	$this->end_controls_section();
394	}
395
396	/**
397	* Register Input Fields Style Controls.
398	*
399	* @since 1.6.15
400	* @access protected
401	*/
402	protected function register_input_style_controls() {
403	$this->start_controls_section(
404	'input_section',
405	array(
406	'label' => __( 'Input Fields', 'cartflows' ),
407	'tab' => Controls_Manager::TAB_STYLE,
408	)
409	);
410
411	$this->add_control(
412	'input_skins',
413	array(
414	'label' => __( 'Style', 'cartflows' ),
415	'type' => Controls_Manager::SELECT,
416	'default' => 'default',
417	'options' => $this->get_skin_types(),
418	)
419	);
420
421	$this->add_group_control(
422	Group_Control_Typography::get_type(),
423	array(
424	'name' => 'input_text_typography',
425	'label' => 'Typography',
426	'selector' => '{{WRAPPER}} .wcf-embed-checkout-form .woocommerce form .form-row input.input-text::placeholder,
427	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce form .form-row input.input-text,
428	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce form .form-row textarea,
429	{{WRAPPER}} .wcf-embed-checkout-form .select2-container--default .select2-selection--single,
430	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce form .form-row select.select,
431	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce .col2-set .col-1,
432	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce .col2-set .col-2,
433	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce form p.form-row label,
434	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce #payment [type="radio"]:checked + label,
435	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce #payment [type="radio"]:not(:checked) + label,
436	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce form .form-row select',
437	)
438	);
439
440	$this->add_control(
441	'label_color',
442	array(
443	'label' => __( 'Label Color', 'cartflows' ),
444	'type' => Controls_Manager::COLOR,
445	'selectors' => array(
446	'{{WRAPPER}} .wcf-embed-checkout-form .woocommerce-checkout, {{WRAPPER}} .wcf-embed-checkout-form-modern-checkout' => '--wcf-field-label-color: {{VALUE}};',
447	),
448	)
449	);
450
451	$this->add_control(
452	'input_bgcolor',
453	array(
454	'label' => __( 'Field Background Color', 'cartflows' ),
455	'type' => Controls_Manager::COLOR,
456	'selectors' => array(
457	'{{WRAPPER}} .wcf-embed-checkout-form, {{WRAPPER}} .wcf-embed-checkout-form-modern-checkout' => '--wcf-field-bg-color: {{VALUE}};',
458	),
459	)
460	);
461
462	$this->add_control(
463	'input_color',
464	array(
465	'label' => __( 'Input Text / Placeholder Color', 'cartflows' ),
466	'type' => Controls_Manager::COLOR,
467	'selectors' => array(
468	'{{WRAPPER}} .wcf-embed-checkout-form, {{WRAPPER}} .wcf-embed-checkout-form-modern-checkout' => '--wcf-field-text-color: {{VALUE}};',
469	),
470	)
471	);
472
473	$this->add_control(
474	'input_border_style',
475	array(
476	'label' => __( 'Border Style', 'cartflows' ),
477	'type' => Controls_Manager::SELECT,
478	'label_block' => false,
479	'default' => '',
480	'options' => array(
481	'' => __( 'Inherit', 'cartflows' ),
482	'solid' => __( 'Solid', 'cartflows' ),
483	'double' => __( 'Double', 'cartflows' ),
484	'dotted' => __( 'Dotted', 'cartflows' ),
485	'dashed' => __( 'Dashed', 'cartflows' ),
486	),
487	'selectors' => array(
488	'{{WRAPPER}} .wcf-embed-checkout-form #order_review .wcf-custom-coupon-field input[type="text"],
489	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce form .form-row input.input-text,
490	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce form .form-row textarea,
491	{{WRAPPER}} .wcf-embed-checkout-form .select2-container--default .select2-selection--single,
492	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce form .form-row select.select,
493	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce form .form-row select' => 'border-style: {{VALUE}};',
494	),
495	)
496	);
497	$this->add_control(
498	'input_border_size',
499	array(
500	'label' => __( 'Border Width', 'cartflows' ),
501	'type' => Controls_Manager::DIMENSIONS,
502	'size_units' => array( 'px' ),
503	'selectors' => array(
504	'{{WRAPPER}} .wcf-embed-checkout-form #order_review .wcf-custom-coupon-field input[type="text"],
505	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce form .form-row input.input-text,
506	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce form .form-row textarea,
507	{{WRAPPER}} .wcf-embed-checkout-form .select2-container--default .select2-selection--single,
508	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce form .form-row select.select,
509	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce form .form-row select' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
510	),
511	)
512	);
513
514	$this->add_control(
515	'input_border_color',
516	array(
517	'label' => __( 'Border Color', 'cartflows' ),
518	'type' => Controls_Manager::COLOR,
519	'selectors' => array(
520	'{{WRAPPER}} .wcf-embed-checkout-form, {{WRAPPER}} .wcf-embed-checkout-form-modern-checkout' => '--wcf-field-border-color: {{VALUE}};',
521	),
522	)
523	);
524
525	$this->add_responsive_control(
526	'input_radius',
527	array(
528	'label' => __( 'Rounded Corners', 'cartflows' ),
529	'type' => Controls_Manager::DIMENSIONS,
530	'size_units' => array( 'px', 'em', '%' ),
531	'selectors' => array(
532	'{{WRAPPER}} .wcf-embed-checkout-form #order_review .wcf-custom-coupon-field input[type="text"],
533	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce form .form-row input.input-text,
534	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce form .form-row textarea,
535	{{WRAPPER}} .wcf-embed-checkout-form .select2-container--default .select2-selection--single,
536	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce form .form-row select.select,
537	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce form .form-row select' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
538	),
539	)
540	);
541
542	$this->end_controls_section();
543	}
544
545	/**
546	* Register Button Style Controls.
547	*
548	* @since 1.6.15
549	* @access protected
550	*/
551	protected function register_button_style_controls() {
552
553	$this->start_controls_section(
554	'button_section',
555	array(
556	'label' => __( 'Buttons', 'cartflows' ),
557	'tab' => Controls_Manager::TAB_STYLE,
558	)
559	);
560
561	$this->add_group_control(
562	Group_Control_Typography::get_type(),
563	array(
564	'name' => 'buttons_typography',
565	'label' => 'Typography',
566	'selector' => '{{WRAPPER}} .wcf-embed-checkout-form .woocommerce .woocommerce-checkout #payment button,
567	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce .wcf-customer-login-section__login-button,
568	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce #order_review button,
569	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce #payment #place_order:before,
570	{{WRAPPER}} .wcf-embed-checkout-form .wcf-custom-coupon-field button.wcf-submit-coupon,
571	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce #order_review button.wcf-btn-small,
572	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce-checkout form.woocommerce-form-login .button,
573	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce-checkout form.checkout_coupon .button,
574	{{WRAPPER}} .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns .wcf-next-button,
575	{{WRAPPER}} .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout.wcf-modern-skin-multistep .woocommerce form .wcf-multistep-nav-btn-group .wcf-multistep-nav-next-btn,
576	body .wcf-pre-checkout-offer-wrapper #wcf-pre-checkout-offer-content button.wcf-pre-checkout-offer-btn',
577	)
578	);
579
580	$this->start_controls_tabs( 'tabs_button_style' );
581
582	$this->start_controls_tab(
583	'tab_button_normal',
584	array(
585	'label' => __( 'Normal', 'cartflows' ),
586	)
587	);
588
589	$this->add_control(
590	'button_text_color',
591	array(
592	'label' => __( 'Text Color', 'cartflows' ),
593	'type' => Controls_Manager::COLOR,
594	'default' => '',
595	'selectors' => array(
596	'{{WRAPPER}} .wcf-embed-checkout-form,
597	{{WRAPPER}} .wcf-embed-checkout-form-modern-checkout' => '--wcf-btn-text-color: {{VALUE}};',
598	'body .wcf-pre-checkout-offer-wrapper #wcf-pre-checkout-offer-content button.wcf-pre-checkout-offer-btn' => 'color: {{VALUE}};',
599	),
600	)
601	);
602
603	$this->add_group_control(
604	Group_Control_Background::get_type(),
605	array(
606	'name' => 'btn_background_color',
607	'label' => __( 'Background Color', 'cartflows' ),
608	'types' => array( 'classic', 'gradient' ),
609	'selector' => '{{WRAPPER}} .wcf-embed-checkout-form .woocommerce .woocommerce-checkout #payment button,
610	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce .wcf-customer-login-section__login-button,
611	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce #order_review button,
612	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce #order_review button.wcf-btn-small,
613	{{WRAPPER}} .wcf-embed-checkout-form .wcf-custom-coupon-field button.wcf-submit-coupon,
614	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce-checkout form.woocommerce-form-login .button,
615	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce-checkout form.checkout_coupon .button,
616	{{WRAPPER}} .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns .wcf-next-button,
617	{{WRAPPER}} .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout.wcf-modern-skin-multistep .woocommerce form .wcf-multistep-nav-btn-group .wcf-multistep-nav-next-btn,
618	body .wcf-pre-checkout-offer-wrapper #wcf-pre-checkout-offer-content button.wcf-pre-checkout-offer-btn',
619	)
620	);
621
622	$this->add_group_control(
623	Group_Control_Border::get_type(),
624	array(
625	'name' => 'btn_border',
626	'label' => __( 'Border', 'cartflows' ),
627	'selector' => '{{WRAPPER}} .wcf-embed-checkout-form .woocommerce .woocommerce-checkout #payment button,
628	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce .wcf-customer-login-section__login-button,
629	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce #order_review button,
630	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce #order_review button.wcf-btn-small,
631	{{WRAPPER}} .wcf-embed-checkout-form .wcf-custom-coupon-field button.wcf-submit-coupon,
632	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce-checkout form.woocommerce-form-login .button,
633	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce-checkout form.checkout_coupon .button,
634	{{WRAPPER}} .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns .wcf-next-button,
635	{{WRAPPER}} .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout.wcf-modern-skin-multistep .woocommerce form .wcf-multistep-nav-btn-group .wcf-multistep-nav-next-btn,
636	body .wcf-pre-checkout-offer-wrapper #wcf-pre-checkout-offer-content button.wcf-pre-checkout-offer-btn',
637	)
638	);
639
640	$this->add_responsive_control(
641	'btn_border_radius',
642	array(
643	'label' => __( 'Rounded Corners', 'cartflows' ),
644	'type' => Controls_Manager::DIMENSIONS,
645	'size_units' => array( 'px', '%' ),
646	'selectors' => array(
647	'{{WRAPPER}} .wcf-embed-checkout-form .woocommerce .woocommerce-checkout #payment button,
648	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce #order_review button,
649	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce #order_review button.wcf-btn-small,
650	{{WRAPPER}} .wcf-embed-checkout-form .wcf-custom-coupon-field button.wcf-submit-coupon,
651	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce .wcf-customer-login-section__login-button,
652	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce-checkout form.woocommerce-form-login .button,
653	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce-checkout form.checkout_coupon .button,
654	{{WRAPPER}} .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns .wcf-next-button,
655	{{WRAPPER}} .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout.wcf-modern-skin-multistep .woocommerce form .wcf-multistep-nav-btn-group .wcf-multistep-nav-next-btn,
656	body .wcf-pre-checkout-offer-wrapper #wcf-pre-checkout-offer-content button.wcf-pre-checkout-offer-btn' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
657	),
658	)
659	);
660
661	$this->add_group_control(
662	Group_Control_Box_Shadow::get_type(),
663	array(
664	'name' => 'button_box_shadow',
665	'selector' => '{{WRAPPER}} .wcf-embed-checkout-form .woocommerce .woocommerce-checkout #payment button,
666	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce #order_review button,
667	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce #order_review button.wcf-btn-small,
668	{{WRAPPER}} .wcf-embed-checkout-form .wcf-custom-coupon-field button.wcf-submit-coupon,
669	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce .wcf-customer-login-section__login-button,
670	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce-checkout form.woocommerce-form-login .button,
671	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce-checkout form.checkout_coupon .button,
672	{{WRAPPER}} .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns .wcf-next-button,
673	{{WRAPPER}} .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout.wcf-modern-skin-multistep .woocommerce form .wcf-multistep-nav-btn-group .wcf-multistep-nav-next-btn,
674	body .wcf-pre-checkout-offer-wrapper #wcf-pre-checkout-offer-content button.wcf-pre-checkout-offer-btn',
675	)
676	);
677
678	$this->end_controls_tab();
679
680	$this->start_controls_tab(
681	'tab_button_hover',
682	array(
683	'label' => __( 'Hover', 'cartflows' ),
684	)
685	);
686
687	$this->add_control(
688	'btn_hover_color',
689	array(
690	'label' => __( 'Text Color', 'cartflows' ),
691	'type' => Controls_Manager::COLOR,
692	'selectors' => array(
693	'{{WRAPPER}} .wcf-embed-checkout-form,
694	{{WRAPPER}} .wcf-embed-checkout-form-modern-checkout' => '--wcf-btn-hover-text-color: {{VALUE}};',
695	'body .wcf-pre-checkout-offer-wrapper #wcf-pre-checkout-offer-content button.wcf-pre-checkout-offer-btn:hover' => 'color: {{VALUE}};',
696	),
697	)
698	);
699
700	$this->add_control(
701	'button_hover_border_color',
702	array(
703	'label' => __( 'Border Hover Color', 'cartflows' ),
704	'type' => Controls_Manager::COLOR,
705	'selectors' => array(
706	'{{WRAPPER}} .wcf-embed-checkout-form .woocommerce .woocommerce-checkout #payment button:hover,
707	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce .wcf-customer-login-section__login-button:hover,
708	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce #order_review button:hover,
709	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce #order_review button.wcf-btn-small:hover,
710	{{WRAPPER}} .wcf-embed-checkout-form .wcf-custom-coupon-field button.wcf-submit-coupon:hover,
711	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce-checkout form.woocommerce-form-login .button:hover,
712	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce-checkout form.checkout_coupon .button:hover,
713	{{WRAPPER}} .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns .wcf-next-button:hover,
714	{{WRAPPER}} .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout.wcf-modern-skin-multistep .woocommerce form .wcf-multistep-nav-btn-group .wcf-multistep-nav-next-btn:hover,
715	body .wcf-pre-checkout-offer-wrapper #wcf-pre-checkout-offer-content button.wcf-pre-checkout-offer-btn:hover' => 'border-color: {{VALUE}};',
716	),
717	)
718	);
719
720	$this->add_group_control(
721	Group_Control_Background::get_type(),
722	array(
723	'name' => 'button_background_hover_color',
724	'label' => __( 'Background Color', 'cartflows' ),
725	'types' => array( 'classic', 'gradient' ),
726	'selector' => '{{WRAPPER}} .wcf-embed-checkout-form .woocommerce .woocommerce-checkout #payment button:hover,
727	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce .wcf-customer-login-section__login-button:hover,
728	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce #order_review button:hover,
729	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce #order_review button.wcf-btn-small:hover,
730	{{WRAPPER}} .wcf-embed-checkout-form .wcf-custom-coupon-field button.wcf-submit-coupon:hover,
731	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce-checkout form.woocommerce-form-login .button:hover,
732	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce-checkout form.checkout_coupon .button:hover,
733	{{WRAPPER}} .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns .wcf-next-button:hover,
734	{{WRAPPER}} .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout.wcf-modern-skin-multistep .woocommerce form .wcf-multistep-nav-btn-group .wcf-multistep-nav-next-btn:hover,
735	body .wcf-pre-checkout-offer-wrapper #wcf-pre-checkout-offer-content button.wcf-pre-checkout-offer-btn:hover',
736	)
737	);
738
739	$this->end_controls_tab();
740
741	$this->end_controls_tabs();
742
743	$this->end_controls_section();
744	}
745
746	/**
747	* Register Sections Style Controls.
748	*
749	* @since 1.6.15
750	* @access protected
751	*/
752	protected function register_payment_section_style_controls() {
753	$this->start_controls_section(
754	'section_payment_style_fields',
755	array(
756	'label' => __( 'Payment Section', 'cartflows' ),
757	'tab' => Controls_Manager::TAB_STYLE,
758	)
759	);
760	$this->add_control(
761	'payment_section_text_color',
762	array(
763	'label' => __( 'Text Color', 'cartflows' ),
764	'type' => Controls_Manager::COLOR,
765	'default' => '',
766	'selectors' => array(
767	'{{WRAPPER}} .wcf-embed-checkout-form,
768	{{WRAPPER}} .wcf-embed-checkout-form-modern-checkout' => '--wcf-payment-section-label-color: {{VALUE}};',
769	),
770	)
771	);
772
773	$this->add_control(
774	'payment_section_desc_color',
775	array(
776	'label' => __( 'Description Color', 'cartflows' ),
777	'type' => Controls_Manager::COLOR,
778	'default' => '',
779	'selectors' => array(
780	'{{WRAPPER}} .wcf-embed-checkout-form,
781	{{WRAPPER}} .wcf-embed-checkout-form-modern-checkout' => '--wcf-payment-section-desc-text-color: {{VALUE}};',
782	),
783	)
784	);
785
786	$this->add_control(
787	'payment_section_bg_color',
788	array(
789	'label' => __( 'Section Background Color', 'cartflows' ),
790	'type' => Controls_Manager::COLOR,
791	'selectors' => array(
792	'{{WRAPPER}} .wcf-embed-checkout-form,
793	{{WRAPPER}} .wcf-embed-checkout-form-modern-checkout' => '--wcf-payment-section-bg-color: {{VALUE}};',
794	),
795	'separator' => 'before',
796	)
797	);
798
799	$this->add_control(
800	'payment_info_bg_color',
801	array(
802	'label' => __( 'Information Background Color', 'cartflows' ),
803	'type' => Controls_Manager::COLOR,
804	'selectors' => array(
805	'{{WRAPPER}} .wcf-embed-checkout-form,
806	{{WRAPPER}} .wcf-embed-checkout-form-modern-checkout' => '--wcf-payment-section-desc-bg-color: {{VALUE}};',
807	),
808	)
809	);
810
811	$this->add_control(
812	'payment_section_padding',
813	array(
814	'label' => __( 'Section Padding', 'cartflows' ),
815	'type' => Controls_Manager::DIMENSIONS,
816	'size_units' => array( 'px', 'em', '%' ),
817	'selectors' => array(
818	'{{WRAPPER}} .wcf-embed-checkout-form .woocommerce-checkout #payment ul.payment_methods' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
819	),
820	'separator' => 'before',
821	)
822	);
823
824	$this->add_control(
825	'payment_section_margin',
826	array(
827	'label' => __( 'Section Margin', 'cartflows' ),
828	'type' => Controls_Manager::DIMENSIONS,
829	'size_units' => array( 'px', '%', 'em' ),
830	'selectors' => array(
831	'{{WRAPPER}} .wcf-embed-checkout-form .woocommerce-checkout #payment ul.payment_methods' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}',
832	),
833	)
834	);
835
836	$this->add_control(
837	'payment_section_radius',
838	array(
839	'label' => __( 'Section Rounded Corners', 'cartflows' ),
840	'type' => Controls_Manager::DIMENSIONS,
841	'size_units' => array( 'px', 'em', '%' ),
842	'selectors' => array(
843	'{{WRAPPER}} .wcf-embed-checkout-form .woocommerce-checkout #payment ul.payment_methods' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
844	),
845	)
846	);
847
848	$this->end_controls_section();
849	}
850
851	/**
852	* Register Sections error Controls.
853	*
854	* @since 1.6.15
855	* @access protected
856	*/
857	protected function register_error_style_controls() {
858	$this->start_controls_section(
859	'section_error_style_fields',
860	array(
861	'label' => __( 'Field Validation & Error Messages', 'cartflows' ),
862	'tab' => Controls_Manager::TAB_STYLE,
863	)
864	);
865
866	$this->add_control(
867	'error_fields_text',
868	array(
869	'label' => __( 'Field Validation', 'cartflows' ),
870	'type' => Controls_Manager::HEADING,
871	'label_block' => true,
872	)
873	);
874
875	$this->add_control(
876	'error_label_color',
877	array(
878	'label' => __( 'Label Color', 'cartflows' ),
879	'type' => Controls_Manager::COLOR,
880	'default' => '',
881	'selectors' => array(
882	'{{WRAPPER}} .woocommerce form .form-row.woocommerce-invalid label' => '--wcf-field-error-label-color: {{VALUE}};',
883	),
884	)
885	);
886
887	$this->add_control(
888	'error_field_border_color',
889	array(
890	'label' => __( 'Field Border Color', 'cartflows' ),
891	'type' => Controls_Manager::COLOR,
892	'selectors' => array(
893	'{{WRAPPER}} .wcf-embed-checkout-form,
894	{{WRAPPER}} .wcf-embed-checkout-form-modern-checkout' => '--wcf-field-error-border-color: {{VALUE}};',
895
896	),
897	'separator' => 'after',
898	)
899	);
900
901	$this->add_control(
902	'error_fields_section',
903	array(
904	'label' => __( 'Error Messages', 'cartflows' ),
905	'type' => Controls_Manager::HEADING,
906	'label_block' => true,
907	)
908	);
909
910	$this->add_control(
911	'error_text_color',
912	array(
913	'label' => __( 'Error Message Color', 'cartflows' ),
914	'type' => Controls_Manager::COLOR,
915	'default' => '',
916	'selectors' => array(
917	'{{WRAPPER}} .wcf-embed-checkout-form .woocommerce .woocommerce-error,
918	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce .woocommerce-NoticeGroup .woocommerce-error,
919	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce .woocommerce-notices-wrapper .woocommerce-error' => 'color: {{VALUE}};',
920	),
921	)
922	);
923
924	$this->add_control(
925	'error_bg_color',
926	array(
927	'label' => __( 'Background Color', 'cartflows' ),
928	'type' => Controls_Manager::COLOR,
929	'selectors' => array(
930	'{{WRAPPER}} .wcf-embed-checkout-form .woocommerce .woocommerce-error,
931	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce .woocommerce-NoticeGroup .woocommerce-error,
932	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce .woocommerce-notices-wrapper .woocommerce-error' => 'background-color: {{VALUE}};',
933	),
934	)
935	);
936
937	$this->add_control(
938	'error_border_color',
939	array(
940	'label' => __( 'Border Color', 'cartflows' ),
941	'type' => Controls_Manager::COLOR,
942	'selectors' => array(
943	'{{WRAPPER}} .wcf-embed-checkout-form .woocommerce .woocommerce-error,
944	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce .woocommerce-NoticeGroup .woocommerce-error,
945	{{WRAPPER}} .wcf-embed-checkout-form .woocommerce .woocommerce-notices-wrapper .woocommerce-error' => 'border-color: {{VALUE}};',
946
947	),
948	)
949	);
950
951	$this->end_controls_section();
952	}
953
954	/**
955	* Register order review column style controls
956	*/
957	protected function register_order_review_style_controls() {
958
959	$this->start_controls_section(
960	'section_order_review_column',
961	array(
962	'label' => __( 'Order Review', 'cartflows' ),
963	'tab' => Controls_Manager::TAB_STYLE,
964	'condition' => array(
965	'layout' => 'modern-checkout',
966	),
967	)
968	);
969
970	$this->add_control(
971	'order_review_section_text_color',
972	array(
973	'label' => __( 'Text Color', 'cartflows' ),
974	'type' => Controls_Manager::COLOR,
975	'selectors' => array(
976	'{{WRAPPER}} .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout table.shop_table th,
977	{{WRAPPER}} .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout table.shop_table td' => 'color: {{VALUE}};',
978	),
979	'separator' => 'before',
980	'condition' => array(
981	'layout' => 'modern-checkout',
982	),
983	)
984	);
985
986	$this->add_control(
987	'order_review_section_bg_color',
988	array(
989	'label' => __( 'Background Color', 'cartflows' ),
990	'type' => Controls_Manager::COLOR,
991	'selectors' => array(
992	'{{WRAPPER}} .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout table.shop_table' => 'background-color: {{VALUE}};',
993	'{{WRAPPER}} .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout table.shop_table tbody,
994	{{WRAPPER}} .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout table.shop_table tfoot tr.cart-discount,
995	{{WRAPPER}} .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout table.shop_table tfoot tr.cart-subtotal,
996	{{WRAPPER}} .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout table.shop_table tfoot tr.order-total:not( .recurring-total ) th,
997	{{WRAPPER}} .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout table.shop_table tfoot tr.order-total:not( .recurring-total ) td' => 'border-color: {{VALUE}}',
998	),
999	'separator' => 'before',
1000	'condition' => array(
1001	'layout' => 'modern-checkout',
1002	),
1003	)
1004	);
1005
1006	}
1007
1008	/**
1009	* Cartflows Checkout Form Styler.
1010	*
1011	* @since 1.6.15
1012	* @access public
1013	*/
1014	public function is_reload_preview_required() {
1015	return true;
1016	}
1017
1018	/**
1019	* Render Checkout Form output on the frontend.
1020	*
1021	* Written in PHP and used to generate the final HTML.
1022	*
1023	* @since 1.6.15
1024	* @access protected
1025	*/
1026	protected function render() {
1027
1028	self::$settings = $this->get_settings_for_display();
1029
1030	$checkout_id = get_the_id();
1031
1032	/* Add elementor setting options to filters */
1033	$this->dynamic_option_filters();
1034
1035	do_action( 'cartflows_elementor_before_checkout_shortcode', $checkout_id );
1036
1037	?>
1038	<div class = "wcf-el-checkout-form cartflows-elementor__checkout-form">
1039	<?php echo do_shortcode( '[cartflows_checkout]' ); ?>
1040	</div>
1041	<?php
1042
1043	}
1044
1045	/**
1046	* Dynamic options of elementor and add filters.
1047	*
1048	* @since 1.6.15
1049	*/
1050	public function dynamic_option_filters() {
1051
1052	$checkout_fields = array(
1053	array(
1054	'filter_slug' => 'wcf-fields-skins',
1055	'setting_name' => 'input_skins',
1056	),
1057	array(
1058	'filter_slug' => 'wcf-checkout-layout',
1059	'setting_name' => 'layout',
1060	),
1061	);
1062
1063	if ( isset( $checkout_fields ) && is_array( $checkout_fields ) ) {
1064
1065	foreach ( $checkout_fields as $key => $field ) {
1066
1067	$setting_name = $field['setting_name'];
1068
1069	if ( '' !== self::$settings[ $setting_name ] ) {
1070
1071	add_filter(
1072	'cartflows_checkout_meta_' . $field['filter_slug'],
1073	function ( $value ) use ( $setting_name ) {
1074
1075	$value = self::$settings[ $setting_name ];
1076
1077	return $value;
1078	},
1079	10,
1080	1
1081	);
1082	}
1083	}
1084	}
1085
1086	do_action( 'cartflows_elementor_checkout_options_filters', self::$settings );
1087	}
1088
1089	}
1090